Materiale angolare 7 - Chip

Il <mat-chip-list>, una direttiva angolare, viene utilizzata per un elenco di valori come chip.

In questo capitolo, mostreremo la configurazione richiesta per disegnare un controllo truciolo utilizzando Angular Material.

Crea applicazione angolare

Segui i seguenti passaggi per aggiornare l'applicazione Angular che abbiamo creato in Angular 6 - Capitolo Configurazione del progetto -

Passo	Descrizione
1	Creare un progetto con un nome materialApp come spiegato nel capitolo Angular 6 - Project Setup .
2	Modifica app.module.ts , app.component.ts , app.component.css e app.component.html come spiegato di seguito. Mantieni invariato il resto dei file.
3	Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata.

Di seguito è riportato il contenuto del descrittore del modulo modificato app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatChipsModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatChipsModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Di seguito è riportato il contenuto del file host HTML modificato app.component.html.

<mat-chip-list>
   <mat-chip>One</mat-chip>
   <mat-chip>Two</mat-chip>
   <mat-chip color = "primary" selected>Tree</mat-chip>
   <mat-chip color = "accent" selected>Four</mat-chip>
</mat-chip-list>

Risultato

Verifica il risultato.

Dettagli

• Per prima cosa, abbiamo creato un elenco di chip utilizzando mat-chip-list.
• Quindi, abbiamo aggiunto chip a ciascuna lista di chip utilizzando mat-chip.