How to make a if condition in View XML


#1

Is there anyway to do a if condition in the XML file of nativescript? (without angular)

if

  <Slider value="18" minValue="5" maxValue="30" />

else

  <Label text="Example" class="h3" margin="10" />

or eventually within a template:

<Repeater items="{{ items }}" templateSelector="{{ givemethetemplatename }}">
    <Repeater.itemTemplate name="a">
            <Slider value="18" minValue="5" maxValue="30" />
    </Repeater.itemTemplate>
    <Repeater.itemTemplate name="b">
           <Label text="Example" class="h3" margin="10" />
    </Repeater.itemTemplate>
</Repeater>

#2

There is probably a better way, but a couple *ngIf statements would get the job done.

Edit: Maybe ngSwitch would be better: https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html


#3

I am not using Angular


#4

Well then, I got nothing! Good luck!


#5

What condition is the if supposed to be testing?

For me, I usually use the visibility = {{ if_condition_check }} to hide/show an XML segment based on the true/false result of the if_condition_check.


#6

You can use ternary operators in the bindings https://docs.nativescript.org/core-concepts/data-binding#supported-expressions


#7

The only way I found to do to do this was to use the navigatingTo event of the page:

export function navigatingTo(args: EventData) {
    let page = <Page>args.object;
    var myLayout = <StackLayout>page.getViewById("myLayout");
        if (condition) {
            let segmentedBar = new SegmentedBar;  
            ...
            myLayout.addChild(segmentedBar);
        }
        else {
            let button: Button = new Button;
            ...
            myLayout.addChild(button);
        }

No possibility in the template file :-/