¿Cómo utilizar Angular material?

[smartads]

Angular es un framework desarrollado en TypeScript que permite el diseño de aplicaciones web, de código abierto y mantenido por Google.

Por otro lado, Angular Material es un módulo construido por y para Angular. Dicho módulo permite implementar componentes Angular con un diseño basado en Material Design.

En esta entrada haremos una introducción resumida a Angular y al módulo Angular Material mostrando el proceso paso a paso. Para ello, seguiremos las guías de las páginas oficiales. Antes de comenzar, debemos cumplir con los siguientes requisitos previos:

Aplicación Angular

Paso 1: Instalar el CLI de Angular

Paso 2: Generar una aplicación

Para crear un nuevo workspace y generar una aplicación de prueba debemos utilizar el comando new disponible a través del CLI de Angular:

ng new material-app

Paso 3: Lanzar la aplicación

Ahora que tenemos la nueva aplicación generada podemos probarla utilizando el comando serve del CLI de Angular desde el directorio donde se creó la aplicación:

cd material-app
ng serve --open

La opción –open permite abrir la aplicación en un navegador.

Mostrar componente:

Mostremos un componente de alternancia de diapositivas en su aplicación y verificaremos que todo funcione.

Debe importar lo MatSlideToggleModuleque desea mostrar agregando las siguientes líneas a su app.module.tsarchivo.

import { MatSlideToggleModule } from '@angular/material/slide-toggle';
@NgModule ({
  imports: [
    MatSlideToggleModule,
  ]
})
class AppModule {}

Agregue la <mat-slide-toggle>etiqueta a algo app.component.htmlasí:

<mat-slide-toggle>Toggle me!</mat-slide-toggle>

Ejecute su servidor de desarrollo local:

ng serve

Luego apunte su navegador a http://localhost:4200

Botones – MatButtonModule

Botones customizables mediante colores y sombras. Seguramente estos botones ya los has visto en muchas apps para Android.

Para customizarlos, este componente viene con una serie de parámetros. Los parámetros se añaden directamente dentro de la etiqueta html:

• mat-button: Botón básico sin color de fondo
• mat-raised-button: Botón con sombra y con color de fondo
• mat-flat-button: Botón con color pero sin sombra
• mat-stroked-button: Botón con borde pero sin color de fondo
• mat-icon-button: Botón circular para añadir un icono, es transparente
• mat-fab: Botón circular con fondo y sombra
• mat-mini-fab: Lo mismo que el anterior pero más pequeño

Para usarlos creamos el botón HTML y le añadimos el parámetro que queramos, para cambiarle el color añadimos la propiedad color. Si quieres usar también los iconos importar:

import { MatIconModule } from "@angular/material/icon";
<button mat-button color="primary">Primary</button>
<button mat-stroked-button color="accent">Accent</button>
<button mat-icon-button>
  <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>

Iconos Angular Material – MatIconModule

Angular material viene con un set de iconos material design, si has configurado el CDN de los icons cómo he indicado antes, tienes a tu disposición un conjunto bastante bueno de iconos svg material design. Para usar estos iconos importa:

Si quieres usarlos simplemente crea la etiqueta con el parámetro svgIcon del icono que quieres renderizar.

<mat-icon svgIcon="thumbs-up"></mat-icon>

Además del esquema de instalación, Angular Material viene con varios otros esquemas (como navegación, tabla, formulario de dirección, etc.) que se pueden usar para generar fácilmente componentes prediseñados en su aplicación, por esta vez vemos componentes de botones e iconos.

Fuentes:

https://material.angular.io

https://codingpotions.com/angular-material