Agregar Angular Material a app de Angular

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/material a 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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/