Instalación de Angular Material

Clase 14 de 31 • Curso de PWA con Angular 2018

Clase anteriorSiguiente clase

Resumen

Para esta instalación vamos a usar npm.

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

Cristian Martinez

student•

Para proyectos existentes puedes usar el comando:

$ ng set defaults.styleExt scss

Luego debes reemplazar al ext de los archivos .css a scss

Alejandro González

student•

Esta forma de instalación me funcionó a mi:

ng add @angular/material

Pedro Mosquera

student•

Otra manera de agregar un theme de angular es añadiéndolo en la lista styles del fichero .angular-cli.json (actualmente llamado angular.json).

"styles": [
	"./node_modules/@angular/material/prebuilt-themes/purple-green.css",
	"src/styles.css"
],

ARIEL RICARDO MOLINAS LEZCANO

student•

comando que muestra actualmente en la pagina de angular material, para instalar:
npm install --save @angular/material @angular/cdk @angular/animations

Carlos Enrique Ramírez Flores

student•

en step 2 de material angular dice que ya esta instaladas las animaciones!!

Francisco Martin

student•

cuando he instalado este comando me salieron un monton de warms, que en el video no se ven..... y continuo sin poder compilar, no me crea la carpeta que al principio si me creaba sin problemas.....

Francisco Samuel Lesmes Fajardo

student•

tambien me funciono ng add @angular/material

Cristian Martinez

student•

Por defecto angular CLI crea proyectos en css. Si quieres usar sass/scss debes especificar el flag --style:

$ ng new myapp --style=scss

Carlos Uriel de Jesus Sánchez González

student•

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

Juan Guillermo Perez Cardozo

student•

ahora el comando es: npm install --save @angular/material @angular/cdk @angular/animations en donde instala materil el cdk y animations de una sola vez

Roberto Gian Franco Carbonell Saravia

student•

y sobre el sistema de grilla que sea responsiva en material con angular como la manejarias?

Juan Antonio Baracat

student•

En la descripción del video está mal escrito el nombre del paquete, paso el comando correcto:

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

Diego Forero

Team Platzi•

Corregido, gracias por el reporte.

Cristian Martinez

student•

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

Julio J Yépez

student•

Todo va caminando … 😃
js

import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
...
  imports: [
    BrowserModule,
    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
    BrowserAnimationsModule
  ],
...

css

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

Instalación de Angular Material

Introducción

¡Vamos a renovar este curso!

Qué son las PWAs?

PWA vs SPA

Setup del Proyecto en Mac, Windows y Linux

Presentando el Editor de Código

Generando nuestro primer PWA

Service Worker

Correr nuestro app en modo de producción

Qué es el service worker de Angular?

Gestión de versiones del Service Worker

Configuración del Service Worker y Caching Policy

Propiciando el Click to Install banner

Estilo

Comprendiendo el concepto de responsividad

Introducción a Angular Material

Instalación de Angular Material

Configuración de Angular Material en el proyecto

Datos Dinámicos

Introducción a Acceso a Datos

Implementando Firebase

Creando un servicio de conexión a Firebase

Creando vista de lista y detalle

Guardando notas en Firebase

Obteniendo notas de Firebase

Editando notas

Implementando Caching

Push Notifications

Implementando Login

Configurando Push Notifications

Cómo instalar curl en Mac, Windows y/o Linux

Configurando Firebase Hosting y subiendo nuestro proyecto a producción

Implementando Push Notifications

Cloud Functions

NativeScript: Características Nativas en un Web App con Angular

¿Dónde Aprender Más?