<mat-button> 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 usarlo, necesitamos tener angular instalado en nuestro proyecto, después de tenerlo, puede ingresar el siguiente comando y descargarlo.

Sintaxis de instalación:

ng add @angular/material

Tipos de botones en material angular: los  botones presentes en material angular se denominan <mat-button>. Son muchos los tipos de tapetes disponibles en material angular, son:

Acercarse:

• Primero, instale el material angular usando el comando mencionado anteriormente.
• Después de completar la instalación, importe ‘MatButtonModule’ desde ‘@angular/material/button’ en el archivo app.module.ts.
• Luego, utilizando las etiquetas mencionadas anteriormente en el código de la tabla, todos los tipos de botones.
• 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.

Implementación de código: en este ejemplo, implementaremos todos los tipos de <mat-button> en angular.

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 { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatButtonModule} from '@angular/material/button';
  
@NgModule({
  imports:      [ BrowserModule, 
                  FormsModule, 
                  BrowserAnimationsModule, 
                  MatButtonModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

aplicación.componente.html:

<h5>Basic Buttons</h5>
<div>
  <button mat-button>Basic</button>
  <button mat-button color="primary">Primary</button>
  <button mat-button color="accent">Accent</button>
  <button mat-button color="warn">Warn</button>
  <button mat-button disabled>Disabled</button>
</div>
  
<h5>Raised Buttons</h5>
<div>
  <button mat-raised-button>Basic</button>
  <button mat-raised-button color="primary">Primary</button>
  <button mat-raised-button color="accent">Accent</button>
  <button mat-raised-button color="warn">Warn</button>
  <button mat-raised-button disabled>Disabled</button>
</div>
  
<h5>Stroked Buttons</h5>
<div>
  <button mat-stroked-button>Basic</button>
  <button mat-stroked-button color="primary">Primary</button>
  <button mat-stroked-button color="accent">Accent</button>
  <button mat-stroked-button color="warn">Warn</button>
  <button mat-stroked-button disabled>Disabled</button>
</div>
  
<h5>Flat Buttons</h5>
<div>
  <button mat-flat-button>Basic</button>
  <button mat-flat-button color="primary">Primary</button>
  <button mat-flat-button color="accent">Accent</button>
  <button mat-flat-button color="warn">Warn</button>
  <button mat-flat-button disabled>Disabled</button>
</div>
  
<h5>Fab Buttons</h5>
<div>
  <button mat-fab>Basic</button>
  <button mat-fab color="primary">Primary</button>
  <button mat-fab color="accent">Accent</button>
  <button mat-fab color="warn">Warn</button>
  <button mat-fab disabled>Disabled</button>
</div>
  
<h5>Mini Fab Buttons</h5>
<div>
  <button mat-mini-fab>Basic</button>
  <button mat-mini-fab color="primary">Primary</button>
  <button mat-mini-fab color="accent">Accent</button>
  <button mat-mini-fab color="warn">Warn</button>
</div>

Producción: