Angular 2 - Direttive

UN directiveè un elemento HTML personalizzato che viene utilizzato per estendere la potenza dell'HTML. Angular 2 ha le seguenti direttive che vengono chiamate come parte del modulo BrowserModule.

  • ngif
  • ngFor

Se visualizzi il file app.module.ts, vedrai il codice seguente e il modulo BrowserModule definito. Definendo questo modulo, avrai accesso alle 2 direttive.

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

Ora esaminiamo in dettaglio ciascuna direttiva.

ngIf

Il ngif elemento viene utilizzato per aggiungere elementi al codice HTML se restituisce true, altrimenti non aggiungerà gli elementi al codice HTML.

Sintassi

*ngIf = 'expression'

Se l'espressione restituisce true, viene aggiunto il corrispondente, altrimenti gli elementi non vengono aggiunti.

Diamo ora uno sguardo a un esempio di come possiamo usare la direttiva * ngif.

Step 1- Prima aggiungi una proprietà alla classe denominata appStatus. Sarà di tipo booleano. Manteniamo questo valore come vero.

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 - Ora nel file app.component.html, aggiungi il seguente codice.

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

Nel codice precedente, ora abbiamo la direttiva * ngIf. Nella direttiva stiamo valutando il valore della proprietà appStatus. Poiché il valore della proprietà dovrebbe restituire true, significa che il tag div dovrebbe essere visualizzato nel browser.

Una volta aggiunto il codice sopra, otterremo il seguente output nel browser.

Produzione

ngFor

Il ngFor elemento viene utilizzato per gli elementi in base alla condizione del ciclo For.

Sintassi

*ngFor = 'let variable of variablelist'

La variabile è una variabile temporanea per visualizzare i valori in variablelist.

Diamo ora un'occhiata a un esempio di come possiamo usare la direttiva * ngFor.

Step 1- Prima aggiungi una proprietà alla classe denominata appList. Questo sarà del tipo che può essere utilizzato per definire qualsiasi tipo di array.

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

Quindi, stiamo definendo appList come un array che ha 2 elementi. Ogni elemento ha 2 proprietà secondarie come ID e Nome.

Step 2 - In app.component.html, definire il codice seguente.

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

Nel codice sopra, ora stiamo usando la direttiva ngFor per iterare attraverso l'array appList. Definiamo quindi un elenco in cui ogni elemento dell'elenco è l'ID e il parametro del nome dell'array.

Una volta aggiunto il codice sopra, otterremo il seguente output nel browser.

Produzione