Material angular 7 - Virutas

los <mat-chip-list>, una directiva angular, se usa para una lista de valores como chips.

En este capítulo, mostraremos la configuración requerida para dibujar un control de chip usando Angular Material.

Crear aplicación angular

Siga los siguientes pasos para actualizar la aplicación Angular que creamos en Angular 6 - Capítulo Configuración del proyecto -

Paso	Descripción
1	Cree un proyecto con un nombre materialApp como se explica en el capítulo Angular 6 - Configuración del proyecto .
2	Modifique app.module.ts , app.component.ts , app.component.css y app.component.html como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado 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 { }

A continuación se muestra el contenido del archivo de host HTML modificado 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>

Resultado

Verifica el resultado.

Detalles

• Como primero, creamos una lista de chips usando mat-chip-list.
• Luego, hemos agregado chips a cada lista de chips usando mat-chip.