¿Cómo usar <mat-chip-list> y <mat-chip> en material angular?

Angular Material es una biblioteca de componentes de interfaz de usuario desarrollada por el equipo de Angular para crear componentes de diseño para aplicaciones web móviles y de escritorio. Para instalarlo, necesitamos tener angular instalado en nuestro proyecto, una vez que lo tenga, puede ingresar el siguiente comando y descargarlo. mat-chip-list se usa principalmente para etiquetas.

Sintaxis de instalación:

ng add @angular/material

Acercarse:

• Primero, instale el material angular usando el comando mencionado anteriormente.
• Después de completar la instalación, importe ‘MatChipsModule’ desde ‘@angular/material/chips’ en el archivo app.module.ts.
• Luego use la etiqueta <mat-chip-list> para agrupar todas las etiquetas o elementos dentro de esta etiqueta de grupo.
• Dentro de la etiqueta <mat-chip-list> necesitamos usar la etiqueta <mat-chip> para cada elemento o etiqueta.
• En material angular, también tenemos un tipo de lista de fichas llamada lista de fichas de pila donde todas las fichas o etiquetas se muestran verticalmente como una pila.
• Para mostrar de esa forma, necesitamos usar este nombre de clase «mat-chip-list-stacked».
• Si queremos cambiar el tema, podemos cambiarlo usando la propiedad de color. En angular tenemos 3 temas, son primarios, acentuados y advertidos.
• Una vez que haya terminado con los pasos anteriores, sirva o comience el proyecto.

Estructura del proyecto:

Implementación de código:

aplicación.módulo.ts:

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

aplicación.componente.html:

<p>Default Chip List</p>
  
<mat-chip-list aria-label="Fish selection">
    <mat-chip color="primary" selected>
        Primary theme chip
    </mat-chip>
      
    <mat-chip color="accent" selected>
        Accent theme chip 
    </mat-chip>
      
    <mat-chip color="warn" selected>
        Warn theme chip
    </mat-chip>
      
    <mat-chip>Default theme chip </mat-chip>
</mat-chip-list>
<br><br><br>
  
<p>Stacked Chip List</p>
  
<mat-chip-list class="mat-chip-list-stacked"
    aria-label="Fish selection">
      
    <mat-chip color="primary" selected>
        Primary theme chip 
    </mat-chip>
      
    <mat-chip color="accent" selected>
        Accent theme chip
    </mat-chip>
      
    <mat-chip color="warn" selected>
        Warn theme chip
    </mat-chip>
      
    <mat-chip>Default theme chip </mat-chip>
</mat-chip-list>

Producción: