👩‍💻 The "low code" way for professional developers to create NativeScript apps. Introducing Kinvey Studio.

NativeScript Angular

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 {
}

Improve this document

Demo Source


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;
        }
    }
}

Improve this document

Demo Source


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;
    }
}

Improve this document

Demo Source


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;
        }
    }
}

Improve this document

Demo Source


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;
        }
    }
}

Improve this document

Demo Source


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";
    }
}

Improve this document

Demo Source