Desarrollar WebApps con Angular y Material Design

Angular 7

Hola mis queridos lectores de mis memorias de desarrollo de software en una fábrica de software, en este caso les vengo a conversar sobre cómo instalar Material Design en Angular 7.

Lo primero que debemos crear es el proyecto en angular con la sentencia:

ng new md-demo


Una vez que se ha creado nuestra aplicación de demo, añadimos el comando:

ng add @angular/material

Esto va añadir los componentes necesarios para que todo funcione correectamente, pero deberás contestar las siguientes preguntas:

1. Escojer un tema de los 4 que ya vienen pre - fabricados o si tienes ya uno creado, seleccionar la opción CUSTOM
2. Instalar HAMMER.JS es una libreria que ayudará a reconocer los gestos en los mobiles
3. Instalar las animaciones que trae Material Design.
4. Listo

Al terminar la instalación este comando ng add @angular/material ha cambiado el index.html, el package.json, y los CSS de forma Global.

Para probar que todo comience a funcionar en la aplicación debemos añadir en el app.module.ts la referencia al uso de la librería de esta forma:

import { MatSliderModule } from '@angular/material/slider';

@NgModule ({....
  imports: [...,
  MatSliderModule,
…]
})

En el app.component.html debemos añadir la siguiente linea de codigo.

<mat-slider min="1" max="100" step="1" value="1"></mat-slider>

y agregamos ahora ng serve para probar lo que hemos realizado y debería mostrarte algo como la ilustración de abajo:

Saludos.