Ng Directives

The following examples shows how to use Angular structural directives in NativeScript application.

Create Custom Directive

HTML

<GridLayout *sdkIfAndroid width="300" height="300" backgroundColor="#a4c639" borderRadius="150"></GridLayout>
<GridLayout *sdkIfIos width="300" height="300" backgroundColor="#0099CC" borderRadius="2"></GridLayout>

TypeScript

import { Component, Directive, ViewContainerRef, TemplateRef, Inject } from "@angular/core";
import { Device, platformNames } from "tns-core-modules/platform";
import { DEVICE } from "nativescript-angular/platform-providers";

@Directive({ selector: "[sdkIfAndroid]" })
export class IfAndroidDirective {
    constructor( @Inject(DEVICE) device: Device, container: ViewContainerRef, templateRef: TemplateRef<Object>) {
        if (device.os === platformNames.android) {
            container.createEmbeddedView(templateRef);
        }
    }
}

@Directive({ selector: "[sdkIfIos]" })
export class IfIosDirective {
    constructor( @Inject(DEVICE) device: Device, container: ViewContainerRef, templateRef: TemplateRef<Object>) {
        if (device.os === platformNames.ios) {
            container.createEmbeddedView(templateRef);
        }
    }
}

@Component({
    moduleId: module.id,
    templateUrl: "./create-custom-directive.component.html",
})
export class CreateCustomDirectiveExampleComponent {
}

Custom Unless Directive

Directive code (Typescript)

HTML

<GridLayout *sdkUnless="condition" width="150" height="150" margin="30" borderRadius="125" backgroundColor="green">
    <Label text="Access granted!" class="p-15" color="white" textWrap="true" horizontalAlignment="center" verticalAlignment="center"></Label>
</GridLayout>
<GridLayout *sdkUnless="!condition" width="150" height="150" margin="30" borderRadius="125" backgroundColor="red">
    <Label text="Access not granted!" class="p-15" color="white" textWrap="true" horizontalAlignment="center" verticalAlignment="center"></Label>
</GridLayout>

Typescript

import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    templateUrl: "./unless-directive.component.html",
})
export class CustomUnlessComponent {

    public age: number;
    public condition: boolean;

    constructor() {
        this.condition = true;
    }

    onTap(args) {
        console.log("onTap age is :" + this.age);

        if (this.age >= 18 && this.age !== 0) {
            this.condition = false;
        } else {
            this.condition = true;
        }
    }
}

Ngfor Directive

*ngFor structural directive usage in NativeScript + Angular-2+ A structural directive that renders a template for each item in a array or collection. The directive is placed on an element, which result in repeating the section or template.

HTML

<StackLayout *ngFor="let fruit of fruitList" class="list-group-item">
    <Label [text]="fruit"></Label>
</StackLayout>

Typescript

import { Component } from "@angular/core";
import { fruits } from "./fruits";

@Component({
    moduleId: module.id,
    templateUrl: "./ngfor-directive.component.html",
})
export class NgForComponent {
    public fruitList: Array<string> = [];

    constructor() {
        this.fruitList = fruits;
    }
}

Ngif Directive

*ngIf structural directive basic usage in NativeScript + Angular-2

HTML

<Button text="Show/hide block" (tap)="onTap()" class="btn btn-primary btn-active"></Button>
<GridLayout *ngIf="isVisible" class="bg-primary" borderRadius="2" height="300"></GridLayout>

Typescript

import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    templateUrl: "./ngif-directive.component.html",
})
export class NgIfComponent {
    public isVisible: boolean = true;

    onTap() {
        if (this.isVisible) {
            this.isVisible = false;
        } else  {
            this.isVisible = true;
        }
    }
}

Ngif Directive Advanced

*ngIf structural directive example usage for platform specific elements

HTML

<GridLayout *ngIf="isAndroid" width="150" height="300" margin="30" borderRadius="125" backgroundColor="green">
    <Label text="This content is visible only for Android" textWrap="true" verticalAlignment="center" class="p-15"></Label>
</GridLayout>
<GridLayout *ngIf="isIos" width="150" height="300" margin="30" borderRadius="125" backgroundColor="green">
    <Label text="This content is visible only for iOS" textWrap="true" verticalAlignment="center" class="p-15"></Label>
</GridLayout>

TypeScript

import { Component, OnInit } from "@angular/core";
import * as application from "tns-core-modules/application";

@Component({
    moduleId: module.id,
    templateUrl: "./ngif-directive-advanced.component.html",
})
export class NgIfAdvancedComponent implements OnInit {
    public isAndroid: boolean;
    public isIos: boolean;

    ngOnInit() {
        if (application.ios) {
            this.isAndroid = false;
            this.isIos = true;
        } else if (application.android) {
            this.isAndroid = true;
            this.isIos = false;
        }
    }
}

Ngswitch Directive

ngSwitch structural directive basic usage in NativeScript + Angular-2

HTML

<FlexboxLayout row="0" flexDirection="row">
    <Button flexShrink="0" class="btn btn-primary btn-active" margin="15" width="80" text="Blue" (tap)="onBlue()"></Button>
    <Button flexShrink="0" class="btn btn-primary btn-active" margin="15" width="80" text="Purple" (tap)="onPurple()"></Button>
    <Button flexShrink="0" class="btn btn-primary btn-active" margin="15" width="80" text="Yellow" (tap)="onYellow()"></Button>
</FlexboxLayout>

<GridLayout row="1" [ngSwitch]="color" class="p-15 m-t-15" height="280" borderRadius="2">
    <GridLayout *ngSwitchCase="'purple'" backgroundColor="#8C489F"></GridLayout>
    <GridLayout *ngSwitchCase="'blue'" backgroundColor="#0077AF"></GridLayout>
    <GridLayout *ngSwitchCase="'yellow'" backgroundColor="#FFFF66"></GridLayout>
    <GridLayout *ngSwitchDefault backgroundColor="gray"></GridLayout>
</GridLayout>

Typescript

import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    templateUrl: "./ngswitch-directive.component.html",
})
export class NgSwitchComponent {
    public color: string;

    onBlue() {
        this.color = "blue";
    }

    onPurple() {
        this.color = "purple";
    }

    onYellow() {
        this.color = "yellow";
    }
}