Angular 2 - Directivas

UN directivees un elemento HTML personalizado que se utiliza para ampliar el poder de HTML. Angular 2 tiene las siguientes directivas que se llaman como parte del módulo BrowserModule.

  • ngif
  • ngFor

Si ve el archivo app.module.ts, verá el siguiente código y el módulo BrowserModule definido. Al definir este módulo, tendrá acceso a las 2 directivas.

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

Ahora veamos cada directiva en detalle.

ng Si

los ngif El elemento se usa para agregar elementos al código HTML si se evalúa como verdadero; de lo contrario, no agregará los elementos al código HTML.

Sintaxis

*ngIf = 'expression'

Si la expresión se evalúa como verdadera, se agrega el correspondiente; de ​​lo contrario, los elementos no se agregan.

Veamos ahora un ejemplo de cómo podemos usar la directiva * ngif.

Step 1- Primero agregue una propiedad a la clase llamada appStatus. Este será de tipo booleano. Mantengamos este valor como verdadero.

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 - Ahora en el archivo app.component.html, agregue el siguiente código.

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

En el código anterior, ahora tenemos la directiva * ngIf. En la directiva estamos evaluando el valor de la propiedad appStatus. Dado que el valor de la propiedad debe evaluarse como verdadero, significa que la etiqueta div debe mostrarse en el navegador.

Una vez que agreguemos el código anterior, obtendremos el siguiente resultado en el navegador.

Salida

ngFor

los ngFor element se usa para elementos basados ​​en la condición del bucle For.

Sintaxis

*ngFor = 'let variable of variablelist'

La variable es una variable temporal para mostrar los valores en el variablelist.

Echemos ahora un vistazo a un ejemplo de cómo podemos usar la directiva * ngFor.

Step 1- Primero agregue una propiedad a la clase llamada appList. Este será del tipo que se puede utilizar para definir cualquier tipo de matrices.

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

Por lo tanto, estamos definiendo appList como una matriz que tiene 2 elementos. Cada elemento tiene 2 subpropiedades como ID y Nombre.

Step 2 - En app.component.html, defina el siguiente código.

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

En el código anterior, ahora estamos usando la directiva ngFor para iterar a través de la matriz appList. Luego definimos una lista donde cada elemento de la lista es el parámetro de ID y nombre de la matriz.

Una vez que agreguemos el código anterior, obtendremos el siguiente resultado en el navegador.

Salida