Accessing NativeScript controls in Angular 2 with ViewChild

Josh redoes the basic 'hello world' app in Angular, demonstrating how to access and set control properties using ViewChild

  •         
    import {Component, ViewChild, ElementRef, AfterViewInit} from "@angular/core";
    import {Button} from "ui/button";
    
    @Component({
        selector: "my-app",
        templateUrl: "app.component.html",
    })
    export class AppComponent implements AfterViewInit {
        @ViewChild("button") button: ElementRef;
    
        public counter: number = 16;
    
        public onTap() {
            let viewButton: Button = this.button.nativeElement;
            this.counter--;
            // sets the button text on each tap.
            viewButton.text = `${this.counter} taps left`;
            if (this.counter === 0) {
                viewButton.text = "Hoorraaay!";
            }
        }
    
        ngAfterViewInit(): void {
            // sets the button text after load
            let viewButton: Button = this.button.nativeElement;
            viewButton.text = `TAPS Left ${this.counter}`;
        }
    }
    	
    		
      
  •         
    <StackLayout>
        <Label text="Tap the button" class="title"></Label>
        <Button #button text="TAP" (tap)="onTap()"></Button>
    </StackLayout>