En este post te muestro cómo agregar y utilizar los estilos de Material Design o Angular Material a una aplicación de Angular. Vamos a ver cómo:
- Agregar
@angular/materiala proyecto - Utilizar un tema presideñado
- Configurar componente contenedor
- Usar algunos componentes
Nota: para esto necesitas un proyecto existente. Si no lo tienes, mira aquí cómo comenzar con Angular.
Agregar Angular Material
Una vez que hayas instalado la angular cli, ve a tu proyecto y ejecuta:
ng add @angular/material
Selecciona cualquier tema presideñado.
HammerJS es para reconocer gestos en pantallas táctiles, su inclusión depende de quién usará y cómo usará tu app.
Cuando se te pregunte sobre las animaciones selecciona que sí.
Al agregar Angular Material se harán alguno cambios en tus estilos. También se importarán algunas fuentes.
No olvides que ya puedes ejecutar ng serve para servir tu app.
El contenedor
Para que el color de fondo sea aplicado correctamente, tu app debe estar dentro de un elemento mat-sidenav-container, si no quieres usar este elemento, aplica la clase mat-app-background al contenedor.
En mi caso le agregué la clase al body así:
<body class="mat-app-background">
<app-root></app-root>
</body>Elegir un tema de Angular Material
Para no complicarnos creando un tema podemos usar uno predefinido. Yo usaré el deeppurple-amber.css así que en styles.css (dentro de src) hay que agregar la siguiente línea:
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
En mi caso, con los otros estilos, se ve así (aunque los márgenes van por mi cuenta):
/* You can add global styles to this file, and also import other style files */
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
html, body { height: 100%; }
body { margin: 10px; font-family: Roboto, "Helvetica Neue", sans-serif; }Nota: también puedes cambiar el tema en angular.json, ahí tendrás algo así:
"styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.css"
],Si los cambias en esa línea cámbialos en la otra que está en el mismo archivo.
Puedes ver otros temas aquí.
Algunos componentes
Para terminar vamos a usar algunos componentes de Angular Material. En este caso usaré MatButtonModule y MatInputModule para diseñar un formulario.
Los vamos a importar en app.module.ts dentro de imports. Bueno, primero los importamos:
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';Después en @NgModule los agregamos dentro de imports:
@NgModule({
declarations: [
AppComponent,
FormularioEjemploComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatButtonModule,// <-------- Aquí
MatInputModule// <-------- Y aquí
],
providers: [],
bootstrap: [AppComponent]
})Dentro de nuestra vista podemos usar los componentes. Yo lo he hecho directamente en la raíz así que queda así:
<h2>Angular Material</h2>
<a mat-stroked-button color="primary" mat-button
href="https://parzibyte.me/blog">By Parzibyte</a>
<p>
<mat-form-field appearance="outline">
<mat-label>Tu nombre</mat-label>
<input matInput placeholder="Escribe tu nombre">
</mat-form-field>
</p>
<p>
<mat-form-field appearance="outline">
<mat-label>Tu correo</mat-label>
<input matInput placeholder="Escribe tu correo electrónico">
</mat-form-field>
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias harum
animi earum, repellendus, cumque, facere quo doloribus fuga sed sint aut ex
magni. Dignissimos corrupti odio corporis tenetur quia incidunt. </p>
<button mat-raised-button color="accent" mat-button>Enviar</button>
<p>Con el siguiente resultado:
Si seleccionaste otro tema, los colores y estilos pueden variar. Después de eso es momento de crear tus aplicaciones con estilo Material Design o como le digas; usando Angular para el funcionamiento.
Por cierto, aquí la documentación oficial.
