<mat-label> 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-label es similar a las etiquetas que usamos en formularios HTML normales. Pero la ventaja de mat-label es que tiene clases de estilo CSS predefinidas y animaciones definidas en él.

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 ‘MatFormFieldModule’ desde ‘@angular/material/form-field’ en el archivo app.module.ts.
• Ahora necesitamos usar la etiqueta <mat-label> con el nombre de etiqueta respectivo dentro de la etiqueta <mat-form-field>.
• A continuación se muestra un ejemplo de cómo usar la etiqueta <mat-label> dentro de <mat-form-field>
• 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 { MatFormFieldModule } from '@angular/material/form-field'; 
  
      
import { AppComponent } from './app.component'; 
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
  
  
@NgModule({ 
  imports: 
  [ BrowserModule, 
    FormsModule, 
    MatFormFieldModule,
    BrowserAnimationsModule], 
  declarations: [ AppComponent ], 
  bootstrap: [ AppComponent ] 
}) 
export class AppModule { }

aplicación.componente.html:

<mat-form-field appearance="legacy">
    <mat-label>Mat Label Example</mat-label>
    <input matInput placeholder="Placeholder">
</mat-form-field>

Producción: