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

Puoi aggiungere direttive all'HTML nel tuo progetto Angular. Alcuni controllano la struttura del tuo 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 angolari?

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

Direttiva	Descrizione
*ngIf	Puoi usare ngIf quando vuoi che determinati blocchi HTML vengano visualizzati solo se soddisfano una determinata condizione. Ad esempio, se avevi un modulo con un popup che viene visualizzato dopo che un utente ha immesso l'input per un determinato campo.
*ngFor	Puoi usare ngFor se hai bisogno di un determinato blocco da ripetere molte volte. Ad esempio, se si dispone di un elenco di elementi ed è necessario visualizzare un div per ogni elemento.
*ngClass	Questo aggiunge uno stile condizionale usando una classe. Se un'istruzione if soddisfa la condizione, applicherà la classe specificata.
*ngStile	Questo aggiunge uno stile in linea condizionale. Se un'istruzione if soddisfa la condizione, applicherà gli stili specificati.
*ngModel	Ciò ti consente di eseguire la rilegatura a due vie. 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ò consente di aggiungere un'istruzione switch con molti casi per controllare molti valori. In base ai casi, verranno visualizzati alcuni elementi HTML.

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

Come usare ngIf

Per usare ngIf, avrai bisogno di una condizione per valutare true per mostrare un particolare elemento HTML.

1. Aggiungi due variabili al tuo file TypeScript. In questo esempio, c'è una variabile noPlaylists e una variabile per memorizzare le playlist. Questa variabile restituirà true se la lunghezza della matrice delle playlist è 0.

   noPlaylist: booleano = false;
   playlist: qualsiasi = [];
   costruttore() { }
    ngOnInit(): void {
    if (this.playlists.length 0) {
    this.noPlaylists = true;
    }
   }
   

2. Nell'HTML, aggiungi l'istruzione *ngIf. Se noPlaylists è true, apparirà il messaggio di errore contenuto nell'intervallo sottostante. Altrimenti, non lo farà. Puoi applicare ngIf a diversi tipi di Tag HTML.

   
   
   Non ci sono playlist disponibili.
   
   
   
   

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

   
   
   Non ci sono playlist disponibili.
   
   
   
   
   
   
   Playlist trovate.
   
   
   
   

Come usare ngFor

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

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

   playlist: qualsiasi = [
    {"name": "Rock", "numberOfSongs": 5},
    {"name": "Contemporary", "numberOfSongs": 9},
    {"name": "Popular", "numberOfSongs": 14},
    {"name": "Acustico", "numberOfSongs": 3},
    {"name": "Canzoni del matrimonio", "numberOfSongs": 25},
    {"name": "Metallo", "numberOfSongs": 0},
   ];
   

2. Nel file HTML, aggiungi l'istruzione *ngFor.

   Playlist trovate.
   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} brani
   
   
   
   
   
   
   

   All'interno di ngFor, sarai in grado di fare riferimento a ciascun oggetto nell'array usando la variabile "playlist". "playlist.name" e "playlist.numberOfSongs" stamperanno entrambi gli attributi all'interno del file etichetta.

Come usare ngClass

È possibile 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 vuoi, come diversi colori di sfondo.

   .canzoni {
    colore di sfondo: #F7F5F2;
   }
   .noSongs {
    colore di sfondo: #FFA8A8;
   }

2. All'interno del ciclo for del passaggio precedente, aggiungi la direttiva dell'attributo ngClass. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'" sta usando lo stesso operatore ternario che JavaScript e altre lingue usano.

   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} brani
   
   
   
   
   

   Se il numero di brani è maggiore di zero, verrà applicata la classe "brani" al div. Questo darà al div un colore di sfondo grigio. In caso contrario, se il numero di brani è zero, verrà applicata la classe "noSongs" al div. Questo darà al div un colore di sfondo rosso.

Come usare ngStyle

Invece di usare ngClass, puoi usare ngStyle se vuoi applicare uno stile in linea invece di uno stile tramite una classe.

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

   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} brani
   
   
   
   

[ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'colore': playlist.numberOfSongs > 0? 'nero': 'blu scuro' }"

CondividereCondividereTwittaCondividereE-mail

Argomenti correlati

• Programmazione
• Programmazione
• JavaScript
• HTML
• CSS