Angular 2 — Директиви

Від автора: директива — це користувальницький HTML-елемент, який застосовується для розширення можливостей HTML. У Angular 2 директиви, які викликаються як частину модуля BrowserModule, наступні: ngif і ngFor.

Якщо ви перегляньте файл app.module.ts, то побачите наступний код і модуль BrowserModule. Визначивши цей модуль, ви отримаєте доступ до двох директив.

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { AppComponent } from ‘./app.component’;
@NgModule ({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

Тепер давайте детально розглянемо кожну директиву.

ngIf

Елемент ngif використовується для додавання елементів в HTML-код, якщо він оцінює значення true, в іншому випадку елементи HTML-код не додаються.

Синтаксис

*ngIf = ‘вираз’

Якщо вираз оцінюється як true, то додаються відповідні елементи, інакше елементи не додаються. Давайте тепер розглянемо приклад того, як ми можемо використовувати директиву *ngif.

Крок 1 — Спочатку додайте властивість в клас з ім’ям appStatus. Воно буде мати тип Boolean. Давайте збережемо його значення як true.

import { Component } from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
templateUrl: ‘app/app.component.html’
})
export class AppComponent {
appTitle: string = ‘Welcome’;
appStatus: boolean = true;
}

Крок 2 — Тепер у файлі app.component.html додайте наступний код.

В даному коді тепер міститься директива *ngIf. У директиві ми оцінюємо значення властивості appStatus. Оскільки значення властивості має бути true, це означає, що тег div повинен відображатися в браузері. Після того, як ми додамо вищенаведений код, що ми отримаємо в браузері наступний результат.

Висновок

ngFor

Елемент ngFor використовується для елементів, виходячи з оцінки умови циклу For. Синтаксис

*ngFor = ‘let variable of variablelist’

variable — це тимчасова змінна для відображення значень variablelist. Давайте тепер розглянемо приклад того, як ми можемо використовувати директиву *ngFor.

Крок 1 — Спочатку додайте властивість в клас з ім’ям appList. Воно буде мати тип, який можна використовувати для визначення будь-якого типу масивів.

import { Component } from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
templateUrl: ‘app/app.component.html’
})
export class AppComponent {
appTitle: string = ‘Welcome’;
appList: any[] = [ {
“ID”: “1”,
“Name” : “One”
},
{
“ID”: “2”,
“Name” : “Two”
} ];
}

Таким чином, ми визначаємо appList як масив, який містить 2 елемента. Кожен елемент має 2 додаткових властивості — ID, Name.

Крок 2 — В app.component.html визначте наступний код.

У наведеному вище коді ми тепер використовуємо директиву ngFor для обробки через цикл масиву appList. Потім ми визначаємо список, у якому кожний елемент списку є ідентифікатором і параметром імені масиву. Після того, як ми додамо вищенаведений код, що ми отримаємо в браузері наступний результат.

Висновок