Material angular 7 - Insignia

los <mat-badge>, una directiva angular, se utiliza para crear insignias que es un pequeño descriptor de estado para los elementos de la interfaz de usuario. Una insignia suele llevar un número u otro conjunto breve de caracteres, que aparece cerca de otro elemento de la interfaz de usuario.

En este capítulo, mostraremos la configuración requerida para dibujar un control de placa 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 {MatBadgeModule, MatButtonModule, MatIconModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatBadgeModule, MatButtonModule, MatIconModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

A continuación se muestra el contenido del archivo de host HTML modificado app.component.html.

<p><span matBadge = "4" matBadgeOverlap = "false">Mail</span></p>
<p>
   <button mat-raised-button color = "primary"
      matBadge = "8" matBadgePosition = "before" matBadgeColor = "accent">
      Action
   </button>
</p>
<p><mat-icon matBadge = "15" matBadgeColor = "warn">home</mat-icon></p>

Resultado

Verifique el resultado.

Detalles

• Primero, creamos un intervalo, un botón y un ícono.
• Luego, agregamos insignias a cada elemento usando el atributo mat-badge.