Thử Nghiệm Với Angular Phần 11: Template Variable Trong Angular

Template Variable Trong Angular

Bài học này sẽ giới thiệu cho các bạn về cách sử dụng Template Variable trong Angular và ngOnInit, ngAfterViewInit lifecycle.

Nội dung

Template variable trong Angular có thể tạo bằng cách đặt tên kèm theo dấu # vào trước tên biến như sau (e.g: #variableName):

<div class="tp-app__content">
  <input type="text" #nameInput>
  <button (click)="sayHello()">Click me</button>
  <tp-switches #switches></tp-switches>
</div>

Ở ví dụ trên, chúng ta đã tạo hai template variables là nameInput và switches. Chúng ta có thể sử dụng trực tiếp các public properties của chúng ở trên template của component như sau:

<p>{{nameInput.value}}</p>

<button (click)="switches.toggle()">Toggle</button>

Hoặc sử dụng ở trong Component:

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { SwitchesComponent } from './presentation/switches/switches.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
  title = 'app works!';
  @ViewChild('nameInput') name: ElementRef;
  @ViewChild('switches') switches: SwitchesComponent;
  sayHello() {
    this.switches.toggle();
  }
  ngAfterViewInit() {
    this.name.nativeElement.focus();
  }
}

Ở ví dụ trên, chúng ta đã tạo ra các properties để trỏ đến các Template variable bằng việc sử dụng @ViewChild, đối với các element cơ bản của HTML, chúng ta có kiểu dữ liệu tương ứng là ElementRef, còn các kiểu như Component, thì chúng ta có thể có cả kiểu ElementRef hoặc Component tương ứng.

Chúng ta cũng đã hook vào ngAfterViewInit lifecycle để thực hiện hành động focus nameInput.

Video bài học

Tham khảo

Angular lifecycle: https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Code repo: https://github.com/tieppt/try-angular/tree/lesson-11