Sergio Hidalgo
Apasionado por la tecnología. Ninja Developer, FullStack, Adm Servidores, Profesor de Angular, Node, Phaser, Javascript. sergiohidalgocaceres@gmail.com https://www.facebook.com/groups/607163139705114/
Angular Material
Integración
Paso 1: Instalar las librerías de Angular Material y CDK
npm install --save @angular/material @angular/cdkPaso 2: Instalar librería de animaciones
npm install --save @angular/animationsPaso 3: Importar librería de animaciones en app.module.ts
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
...
imports: [BrowserAnimationsModule],
...
})
export class AppModule { }Paso 4: Instalar un tema
Angular Material proporciona 4 temas:
indigo-pink
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
deeppurple-amber
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
pink-bluegrey
@import "~@angular/material/prebuilt-themes/pink-bluegrey.css";
purple-green
@import "~@angular/material/prebuilt-themes/purple-green.css";
Supongamos que escogemos el tema "indigo-pink".
Debemos modificar el archivo "styles.css" y agregar en la primera línea lo siguiente:
<!-- style.css -->
@import "~@angular/material/prebuilt-themes/indigo-pink.css";Paso 5: Instalar el manejador de gestos (opcional)
Angular Material utiliza la librería hammer.js como manejador de gestos en móviles.
npm install --save hammerjsDebe importarse la librería desde el archivo "main.ts"
<!-- main.ts -->
...
import 'hammerjs';
...Paso 6: Instalar el font de iconos (opcional)
Este paso es opcional pero recomendable hacerlo.
Importar la hoja de estilos del font de iconos desde el archivo "index.html"
<!-- index.html -->
...
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
...Paso 7: Crear un módulo para compartir el Angular Material
Es recomendable crear un módulo compartido donde vincularemos los diversos módulos de Angular Material.
Si no lo hacemos así, tendremos que vincular los módulos de Angular Material a cada módulo que creemos y que los necesitemos.
Esto último no es una opción a descartar, pero debe evaluarse según el proyecto.
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
@NgModule({
imports: [CommonModule],
declarations: []
})
export class MaterialModule {}Crear el módulo compartido. Supongamos que se llama "MaterialModule"
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { MaterialModule } from "./material/material.module";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, MaterialModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}Vincularlo desde otro módulo. Supongamos que se vincula desde el módulo "AppModule"
Para usar un módulo de Angular Material, debe importarse previamente y exportarse.
Importemos y exportemos los módulos "MatSidenavModule" y "MatToolbarModule"
...
import { MatSidenavModule,
MatToolbarModule } from "@angular/material";
...
@NgModule({
imports: [
...
MatSidenavModule, MatToolbarModule
...
],
exports: [MatSidenavModule, MatToolbarModule],
declarations: []
})
export class MaterialModule {}La documentación de ambos módulos se encuentra en https://material.angular.io
El MatSidenavModule lo usaremos para crear el layout base.
Usaremos 3 etiquetas:
1. mat-sidenav-container: es el contenedor padre del layout.
2. mat-sidenav: es el contenedor lateral izquierdo. Un uso puede ser para mostrar el menú móvil.
3. mat-sidenav-container: es el contenedor del contenido mismo.
Agreguemos las etiquetas al componente "AppComponent".
<!-- app.component.html -->
<mat-sidenav-container>
<mat-sidenav></mat-sidenav>
<mat-sidenav-content>
</mat-sidenav-content>
</mat-sidenav-container><mat-sidenav-container>
<mat-sidenav>
<mat-sidenav-content>
Si ejecuta, notarán que la página está en blanco y además las etiquetas tienen altura igual a cero.
Esto se corrige con CSS. Asumamos que la app será fullscreen.
<!-- styles.css -->
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
* {
box-sizing: border-box
}
html,
body {
margin:0;
padding:0;
width: 100%;
height: 100%;
}Modifiquemos también app.component.css
<!-- app.component.css -->
mat-sidenav-container,
mat-sidenav-content,
mat-sidenav {
height: 100%;
}
mat-sidenav {
width: 250px;
}
La página se sigue mostrando vacía, esto es porque no hay contenido. Agreguemos el toolbar a través de la etiqueta <mat-toolbar>.
<!-- app.component.html -->
<mat-sidenav-container>
<mat-sidenav></mat-sidenav>
<mat-sidenav-content>
<mat-toolbar></mat-toolbar>
</mat-sidenav-content>
</mat-sidenav-container>Ahora la página no se ve vacía. Está con la franja del toolbar en color gris claro.
Además de los 4 temas mencionados con anterioridad. Angular Material maneja 3 paletas de colores:
Para asignar una de estas paletas, se debe usar el atributo "color".
Además de los 4 temas mencionados con anterioridad. Angular Material maneja 3 paletas de colores:
<mat-sidenav-container>
<mat-sidenav></mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary"></mat-toolbar>
</mat-sidenav-content>
</mat-sidenav-container>Notarán ahora el cambio de color en el toolbar.
Sin embargo la etiqueta <mat-sidenav> no se muestra.
Usemos el atributo "opened" para mostrarla.
<mat-sidenav-container>
<mat-sidenav [opened]="true"></mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary"></mat-toolbar>
</mat-sidenav-content>
</mat-sidenav-container>Ahora sí se ve. El sidenav tiene un color de fondo blanco
Para mostrar el "sidenav" es mejor usar una referencia local y un botón que lo "muestre" y lo "oculte".
<mat-sidenav-container>
<mat-sidenav #menu></mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button (click)="menu.toggle()">
Abrir/Cerrar
</button>
</mat-toolbar>
</mat-sidenav-content>
</mat-sidenav-container>Veremos más de Angular Material conforme vayamos implementando un proyecto.
13 Angular: Layout
By Sergio Hidalgo
13 Angular: Layout
Usemos Angular Material para integrar componentes y crear webs responsive
