Angular 2 - Diretivas

UMA directiveé um elemento HTML personalizado usado para estender o poder do HTML. Angular 2 tem as seguintes diretivas que são chamadas como parte do módulo BrowserModule.

• ngif
• ngFor

Se você visualizar o arquivo app.module.ts, verá o código a seguir e o módulo BrowserModule definido. Ao definir este módulo, você terá acesso às 2 diretivas.

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

Agora, vamos examinar cada diretiva em detalhes.

ngIf

o ngif element é usado para adicionar elementos ao código HTML se for avaliado como verdadeiro, caso contrário, não adicionará os elementos ao código HTML.

Sintaxe

*ngIf = 'expression'

Se a expressão for avaliada como verdadeira, o correspondente será adicionado, caso contrário, os elementos não serão adicionados.

Vamos agora dar uma olhada em um exemplo de como podemos usar a diretiva * ngif.

Step 1- Primeiro adicione uma propriedade à classe chamada appStatus. Será do tipo booleano. Vamos manter esse valor como verdadeiro.

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appStatus: boolean = true;
}

Step 2 - Agora, no arquivo app.component.html, adicione o código a seguir.

<div *ngIf = 'appStatus'>{{appTitle}} Tutorialspoint </div>

No código acima, agora temos a diretiva * ngIf. Na diretiva, estamos avaliando o valor da propriedade appStatus. Como o valor da propriedade deve ser avaliado como verdadeiro, isso significa que a tag div deve ser exibida no navegador.

Depois de adicionar o código acima, obteremos a seguinte saída no navegador.

Resultado

ngFor

o ngFor elemento é usado para elementos com base na condição do loop For.

Sintaxe

*ngFor = 'let variable of variablelist'

A variável é uma variável temporária para exibir os valores no variablelist.

Vamos agora dar uma olhada em um exemplo de como podemos usar a diretiva * ngFor.

Step 1- Primeiro adicione uma propriedade à classe chamada appList. Será do tipo que pode ser usado para definir qualquer tipo de matriz.

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

Portanto, estamos definindo appList como um array que possui 2 elementos. Cada elemento possui 2 subpropriedades como ID e Nome.

Step 2 - No app.component.html, defina o código a seguir.

<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
   </ul> 
</div>

No código acima, agora estamos usando a diretiva ngFor para iterar por meio do array appList. Em seguida, definimos uma lista em que cada item da lista é o parâmetro de ID e nome do array.

Depois de adicionar o código acima, obteremos a seguinte saída no navegador.

Resultado