How to set up visibility binding in JavaScript

Thread is closed for posting
2 posts, 0 answers
  1. Marc
    Marc avatar
    101 posts
    Member since:
    Oct 2013

    Posted 19 Jan 2017 Link to this post


    I try to define some databinding in JavaScript Code, like I usually did in XML before:

    <ActivityIndicator busy="{{ isLoading }}" visibility={{ isLoading ? 'visible' : 'collapse' }} />


    Now it is necessary for me to define this in JavaScript, as I need to create the UI dynamically in JavaScript.

    I tried to define the busy binding and visibility binding like this:

    activityIndicator.bind({               //works
       sourceProperty: "isLoading",
       targetProperty: "busy",
       twoWay: true
    }, myObservable);
    activityIndicator.bind({               //does NOT work
       sourceProperty: "isLoading" ? 'visible' : 'collapse',
       targetProperty: "visibility",
       twoWay: true
    }, myObservable);


    The busy binding works as expected, but not the visibility-binding. When the ActivityIndicator is not busy, it should not consume any space, but as you can see in the gif (please have a look at the attachment), there is some 'white space' even when the Indicator is not busy.


    I tried this with NativeScript 2.3 and 2.4. So it seems that I am generally making a mistake.


    Can you tell me what I am doing wrong?


    Best regards

  2. Nikolay Iliev
    Nikolay Iliev avatar
    351 posts

    Posted 24 Jan 2017 Link to this post

    Hi Marc,

    One of the reasons behind your visibility not to work as expected is the usage of collapse instead of collapsed. The first syntax was deprecated some time ago in favour of the CSS syntax collapsed. Also no need to use the source and target property to bind to your visibility. Apart from that I also noticed that your visibility is not wrapped in quotation marks.
    <Page xmlns="" navigatingTo="navigatingTo">
      <StackLayout class="p-20" backgroundColor="gray" >
        <ActivityIndicator busy="{{ isLoading }}" visibility="{{ isLoading ? 'visible' : 'collapsed' }}"  backgroundColor="blue" color="yellow"/>
        <Button text="Show/Hide" tap="onTap" />

    let vm = new Observable();
    vm.set("isLoading", false);
    export function navigatingTo(args: EventData) {
        let page = <Page>args.object;
        page.bindingContext = vm;
    export function onTap() {
        vm.set("isLoading", !vm.get("isLoading"));

    Here you can find a full working example for binding to visibility.

    Nikolay Iliev
    Telerik by Progress

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

Back to Top