Incluir Angular Material en tus proyectos

Hola, en esta oportunidad les traigo como incluir Angular Material en tus proyectos. Angular Material  es una biblioteca de componentes de interfaz de usuario para desarrolladores de Angular. Los componentes de Angular Material ayudan a construir páginas web y aplicaciones web atractivas, consistentes y funcionales, a la vez que se adhieren a los principios modernos de diseño web como la portabilidad del navegador, la independencia del dispositivo.

Bueno basta de teoría a continuación los pasos para añadir la librería a nuestros proyectos:

Puedes usar NPM o yarn para instalar estos paquetes :

NPM

npm install --save @angular/material @angular/cdk @angular/animations
 

YARN

yarn add @angular/material @angular/cdk @angular/animations

Una vez instalado el paquete de Animations, importamos el módulo BrowserAnimationsModule en nuestra aplicación:

import {BrowserAnimationsModule} from'@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class DemoAppModule { }
import {MatButtonModule, MatCheckboxModule} from'@angular/material';

@NgModule({
  ...
  imports: [MatButtonModule, MatCheckboxModule],
  ...
})
export class DemoAppModule { }

Alternativamente, puedes crear un NgModule separado que importe y luego reexporte todos los componentes de Material Angular que deseas utilizar en tu aplicación. De esta manera puedes usar tu MaterialModule en dónde lo necesites  y obtener automáticamente todos los módulos de Material exportados. Un buen lugar para importar/exportar los módulos de Material de la aplicación es el SharedModule.


import {MatButtonModule, MatCheckboxModule} from'@angular/material';

@NgModule({
  imports: [MatButtonModule, MatCheckboxModule],
  exports: [MatButtonModule, MatCheckboxModule],
})
export class MaterialModule { }

Esto es una parte crucial en el funcionamiento de Angular Material en nuestra aplicación. Puedes empezar usando uno de los temas de Material Angular, si estás usando Angular CLI puedes añadir lo siguiente a tu archivo styles.css:


@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Para conocer más a fondo los temas en Angular Material puedes visitar esta guía en la documentación oficial.

Algunos componentes como mat-slide-toggle, mat-slider, matTooltip usan  HammerJS para los gestos por lo que debemos incluirlo en nuestra aplicación de la siguiente manera:

Puedes añadir HammerJS a tu aplicación vía  npm, a CDN ( Google CDN)

NPM

npm install --save hammerjs

YARN

yarn add hammerjs

Después de instalarlo, lo debes importar en tu aplicación como por ejemplo en src/main.ts

import 'hammerjs';

Si deseas utilizar el componente  mat-icon sólo debes cargar la fuente con todos los íconos en tu index.html.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Con esto ya tendríamos configurado Angular Material en nuestra aplicación

Saludos!

Leave a reply:

Your email address will not be published.

Site Footer