Come utilizzare la direttiva angolare integrata: ngIf, ngFor, ngClass e altro

Le direttive di Angular aggiungono ulteriori comportamenti a parti della tua applicazione. Scopri come utilizzare le direttive più comuni e utili.

Puoi aggiungere direttive all'HTML nel tuo progetto Angular. Alcuni controllano la struttura del markup mentre altri si concentrano sugli attributi.

Questo articolo esaminerà le sei direttive Angular più comuni: ngFor, ngIf, ngClass, ngStyle, ngModel e ngSwitch.

Cosa sono le direttive Angular?

Le direttive Angular ti consentono di utilizzare istruzioni if e cicli for e di aggiungere altri comportamenti al codice HTML di un progetto Angular.

*ngIf

Puoi utilizzare ngIf quando desideri che determinati blocchi HTML vengano visualizzati solo se soddisfano una determinata condizione. Ad esempio, se avessi un modulo con un popup che viene visualizzato dopo che un utente ha immesso input per un determinato campo.

*ngFor

Puoi utilizzare ngFor se hai bisogno che un determinato blocco si ripeta più volte. Ad esempio, se avessi un elenco di elementi e avessi bisogno di visualizzare un div per ciascun elemento.

*ngClass

Ciò aggiunge uno stile condizionale utilizzando una classe. Se un'istruzione if soddisfa la condizione, applicherà la classe specificata.

*ngStyle

Ciò aggiunge uno stile condizionale in linea. Se un'istruzione if soddisfa la condizione, applicherà gli stili specificati.

*ngModel

Ciò ti consente di eseguire un'associazione bidirezionale. Ciò significa che puoi passare i dati in entrambe le direzioni tra il file HTML e TypeScript. Ad esempio, puoi passare il valore di un attributo dal file TypeScript al file HTML e viceversa.

*ngSwitch

Ciò ti consente di aggiungere un'istruzione switch con molti casi per controllare molti valori. A seconda dei casi, verranno visualizzati alcuni elementi HTML.

Le direttive strutturali coinvolgono la struttura degli elementi HTML. Questi includono ngIf, ngFor e ngSwitch. Le direttive sugli attributi implicano la modifica delle proprietà degli elementi HTML. Questi includono ngStyle, ngClass e ngModel.

Come utilizzare ngIf

Per utilizzare ngIf, avrai bisogno di una condizione che valuti true affinché un particolare elemento HTML venga mostrato.

1. Aggiungi due variabili al tuo file TypeScript. In questo esempio, c'è una variabile noPlaylists e una variabile per memorizzare le playlist. Questa variabile verrà valutata vera se la lunghezza dell'array delle playlist è 0.

   noPlaylists: boolean = false;
   playlists: any = [];
    
   constructor() { }
     ngOnInit(): void {
       if(this.playlists.length === 0) {
         this.noPlaylists = true;
       }
   }
   

2. Nell'HTML, aggiungi l'istruzione *ngIf. Se noPlaylists è true, verrà visualizzato il messaggio di errore contenuto nello span sottostante. Altrimenti non lo farà. Puoi applicare ngIf a diversi tipi di tag HTML.

   <div *ngIf="noPlaylists" class="center">
         <span class="errorMessage">There are no playlists available.</span>
   </div>
   

   

3. Per aggiungere un componente "else" all'istruzione if, dovrai aggiungere il codice HTML per la parte "else" in un blocco modello.

   <div *ngIf="noPlaylists; else playlistsExist" class="center">
         <span class="errorMessage">There are no playlists available.</span>
   </div>
   <ng-template #playlistsExist>
       <div class="center">
           <span class="successMessage">Playlists found.</span>
       </div>
   </ng-template>

Come usare ngFor

Se devi ripetere un certo numero di blocchi su una pagina, puoi utilizzare la direttiva ngFor.

1. Nel file TypeScript, aggiungi elementi all'array.

   playlists: any = [
      {"name": "Rock", "numberOfSongs": 5},
      {"name": "Contemporary", "numberOfSongs": 9},
      {"name": "Popular", "numberOfSongs": 14},
      {"name": "Acoustic", "numberOfSongs": 3},
      {"name": "Wedding Songs", "numberOfSongs": 25},
      {"name": "Metal", "numberOfSongs": 0},
   ];
   

2. Nel file HTML aggiungere l'istruzione *ngFor.

   <span class="successMessage">Playlists found.</span>
   <div *ngFor="let playlist of playlists" class="item">
       <div class="flex">
          <span>{{playlist.name}}</span>
          <span>{{playlist.numberOfSongs}} songs</span>
       </div>
   </div>
   

   

Come utilizzare ngClass

Puoi modificare la classe di stile utilizzata da un particolare div, in base a una condizione.

1. Aggiungi due classi nel file CSS con stili diversi. Puoi aggiungere qualsiasi tipo di stile CSS desideri, ad esempio diversi colori di sfondo.

   .songs {
     background-color: #F7F5F2;
   }
   .noSongs {
     background-color: #FFA8A8;
   }

2. All'interno del ciclo for del passaggio precedente, aggiungi la direttiva dell'attributo ngClass. [ngClass]="playlist.numberOfSongs > 0 ? 'songs' : 'noSongs'" utilizza lo stesso operatore ternario utilizzato da JavaScript e da altri linguaggi.

   <div *ngFor="let playlist of playlists" class="item" [ngClass]="playlist.numberOfSongs > 0 ? 'songs' : 'noSongs'">
       <div class="flex">
           <span>{{playlist.name}}</span>
            <span>{{playlist.numberOfSongs}} songs</span>
        </div>
    </div>

   

Come utilizzare ngStyle

Invece di utilizzare ngClass, puoi utilizzare ngStyle se desideri applicare uno stile in linea anziché uno stile tramite una classe.

1. Modificare ngClass dal passaggio precedente per utilizzare invece ngStyle.

   <div *ngFor="let playlist of playlists" class="item" [ngStyle]="{'background-color': playlist.numberOfSongs > 0 ? '#F7F5F2' : '#FFA8A8' }>
        <div class="flex">
            <span>{{playlist.name}}</span>
            <span>{{playlist.numberOfSongs}} songs</span>
        </div>
    </div>
   

2. Se devi applicare più di uno stile in linea, puoi separare ciascuno stile con una virgola.

   [ngStyle]="{'background-color': playlist.numberOfSongs > 0 ? '#F7F5F2' : '#FFA8A8', 'color': playlist.numberOfSongs > 0 ? 'black' : 'darkblue' }"
   

Come utilizzare ngModel

È possibile utilizzare ngModel per l'associazione bidirezionale. Ciò significa che puoi passare il valore di un attributo tra file HTML e TypeScript.

Ad esempio, supponiamo di avere un elemento di input nel file HTML che utilizza ngModel. L'attributo ngModel è associato a una variabile nel file TypeScript. Quando inserisci un valore nell'input, la variabile verrà aggiornata nel file TypeScript.

Le modifiche apportate all'attributo nel file TypeScript si rifletteranno anche nell'HTML se altri div utilizzano quella variabile.

1. In app.module.ts, aggiungi FormsModule alle importazioni nella parte superiore del file e anche all'array imports.

   import { FormsModule } from '@angular/forms';
   @NgModule({
       imports: [
           ...
           FormsModule
       ]
   })
   

2. Aggiungi un attributo nel file TypeScript per tenere traccia di quando l'utente rinomina una playlist.

   renamingPlaylists: boolean = false;

3. Rendi pubblica la variabile delle playlist in modo che possa essere accessibile quando si utilizza ngModel nel file HTML.

   public playlists: any = [
       ...
   ];
   

4. Aggiungi due pulsanti nel file HTML, che ti permetteranno di rinominare o annullare la ridenominazione di ciascuna playlist.

   <button type="button" class="btn btn-info" *ngIf="!renamingPlaylists" (click)="renamingPlaylists=true">Rename Playlists</button>
   <button type="button" class="btn btn-info" *ngIf="renamingPlaylists" (click)="renamingPlaylists=false">Stop renaming</button>

5. Aggiungi una casella di input all'interno del div di ciascuna playlist. L'input sarà visibile solo quando fai clic sul pulsante Rinomina playlist. Questa casella di input avrà un ngModel associato a "playlist.name".

   <input type="text" *ngIf="renamingPlaylists" class="form-control input-field" id="name" required [(ngModel)]="playlist.name" />
   

   

Come utilizzare ngSwitch

È possibile utilizzare ngSwitch per visualizzare determinati elementi in base ai casi all'interno di un caso switch.

1. Aggiungi un nuovo attributo "rating" agli oggetti all'interno dell'array delle playlist. Questo attributo può essere qualsiasi numero compreso tra 0 e 5 (inclusi).

   public playlists: any = [
       {"name": "Rock", "numberOfSongs": 5, "rating": 5},
       {"name": "Contemporary", "numberOfSongs": 9, "rating": 1},
       {"name": "Popular", "numberOfSongs": 14, "rating": 5},
       {"name": "Acoustic", "numberOfSongs": 3, "rating": 4},
       {"name": "Wedding Songs", "numberOfSongs": 25, "rating": 5},
       {"name": "Metal", "numberOfSongs": 0, "rating": 0},
     ];

2. Aggiungi un caso di commutazione sotto il nome e il numero di brani per una playlist. In base al numero di valutazione della playlist, la playlist mostrerà il numero corretto di stelle.

   <div class="flex">
      <span>{{playlist.name}}</span>
      <span>{{playlist.numberOfSongs}} songs</span>
   </div>
   <div [ngSwitch]="playlist.rating" style="text-align:right">
       <div *ngSwitchCase="'1'">★</div>
      <div *ngSwitchCase="'2'">★★</div>
      <div *ngSwitchCase="'3'">★★★</div>
      <div *ngSwitchCase="'4'">★★★★</div>
      <div *ngSwitchCase="'5'">★★★★★</div>
      <div *ngSwitchDefault>No ratings</div>
   </div>
   

   

Imparare di più con Angular

Ora hai imparato le basi delle direttive Angular, incluso come utilizzare ngIf, ngFor, ngClass, ngStyle, ngModel e ngSwitch. Puoi combinarli per creare interfacce utente più complesse. C'è molto altro da esplorare e conoscere su Angular, non importa se sei un principiante o un livello avanzato.