matBadge 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. 

El uso principal de matBadge y asignar un valor para mostrar números o estado sobre texto, imágenes o íconos. Podemos relacionarnos con ellos como un indicador de número de icono de notificación.

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 ‘MatBadgeModule’ desde ‘@angular/material/badge’ en el archivo app.module.ts.
• Luego use matBadge y asigne un número para mostrarlo sobre cualquier texto o imagen.
• También tenemos otras propiedades como matBadgeOverlap y matBadgeSize para personalizar el tamaño y la posición de la insignia.
• Si queremos cambiar el tema, podemos cambiarlo usando la propiedad matBadgeColor. En angular tenemos 3 temas, son primarios, acentuados y advertidos.
• Una vez que haya terminado con los pasos anteriores, sirva o comience el 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 { AppComponent } from './app.component';
import { MatBadgeModule} from '@angular/material/badge'; 
import { MatIconModule} from '@angular/material/icon'; 
import { MatButtonModule} from '@angular/material/button'; 
  
@NgModule({
  imports:
  [ BrowserModule, 
    FormsModule,
    MatButtonModule, 
    MatBadgeModule,
    MatIconModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

aplicación.componente.html:

<h3> Mat-Badge over a text</h3>
  
<p>
    <span matBadge="8" matBadgeOverlap="false">
        Text with a badge
    </span>
</p>
<hr>
  
<h3>
    Mat-Badge positioned left 
    and right over a Button
</h3>
  
<p>
    <button mat-raised-button color="primary"
        matBadge="8" matBadgePosition="before" 
        matBadgeColor="accent">
        Left badge Button with accent theme
    </button>
</p>
  
<p>
    <button mat-raised-button color="accent" 
        matBadge="8" matBadgePosition="after" 
        matBadgeColor="primary">
        Right badge button with primary theme
    </button>
</p>
<hr>
  
<h3> Mat-Badge over a icon</h3>
  
<p>
    <mat-icon matBadge="8" matBadgeColor="warn">
        home
    </mat-icon>
</p>

Producción: