Cursos Empresas Blog Live Conf Precios

Trabajando con Angular Material

Clase 5 de 75 • Curso de MEAN 2017

Contenido del curso

Introducción al Curso de MEAN

El Frontend de PlatziOverflow

El Backend de PlatziOverflow

La Base de Datos de PlatziOverflow

Despliegue a producción

Contenido Bonus

Resumen

Datos importantes:

Angular Material son componentes basados en Material Design para Angular.
package.json es como el manifiesto de nuestros proyectos, es donde están todos los detalles.

Obtén respuestas inmediatasProfundiza lo que acabas de ver

Comentarios

Sergio Toshio Minei

student•

Angular Material

Angular Material son componentes basados en Material Design para Angular.

Paso 1: Instalar las dependencias

$ npm i @angular/material @angular/cdk

Para instalar las animaciones de Angular Material:

$ npm i @angular/animations

Paso 2: Configurar las animaciones

Para habilitar las animaciones, se debe de importar el paquete en la aplicación:

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  // ...
  imports: [BrowserAnimationsModule],
  // ...
})
export class AppModule { }

Paso 3: Importar los módulos de los componentes

Para importar los módulos, se va a crear un archivo llamado material.module.ts. Ahí se van a agregar todos los módulos que se desean importar.

import { NgModule } from '@angular/core';
import { MatButtonModule, MatCheckboxModule } from '@angular/material';

const modules = [
  MatButtonModule,
  MatCheckboxModule
]

@NgModule({
  imports: modules,
  exports: modules
})

export class MaterialModule {}

Luego, se va a importar el archivo creado en el módulo principal de la aplicación.

import { MaterialModule } from './material.module';

@NgModule({
  //...
  imports: [
    MaterialModule
  ]
  //...
})

export class AppModule { }

Paso 4: Incluir un theme

El theme se va a encargar de aplicar todos los estilos básicos a la aplicación. Para esto, solo se debe de agregar el theme en el archivo styles.css.

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

Paso 5: Soporte de gestos

Algunos componentes requieren HammerJS para realizar gestos en los dispositivos táctiles.

$ npm i hammerjs

Luego de instalarlos, solo se debe de importar en el módulo principal (ej. app.module.ts).

import 'hammerjs';

Paso 6: Agregar íconos de material

Para usar los íconos de Material Design, se debe de agregar la fuente de el index.html.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Pueden ver el resumen completo del curso aquí.
Pueden ver mi lista de resúmenes aquí.

Juan Cruz Rey

student•

Se agradece!

Guillermo Lapettina

student•

Error al compilar:

ERROR in src/app/material.module.ts:2:52 - error TS2306: File 'C:/Users/Guillermo/Desktop/platzi-overflow/node_modules/@angular/material/index.d.ts' is not a module.

2 import { MatButtonModule, MatCheckboxModule } from '@angular/material';
                                                     ~~~~~~~~~~~~~~~~~~~

Diego Alejandro Gomez Angarita

student•

En las nuevas versiones ya no es necesario agregar nada al archivo app.module.ts ya que por defecto en la instalación se realizan los import

José Andrés Choc Alvarado

student•

Estoy probando este proyecto, llegue al minuto 5:41 del video y me tiro un error, resulta que el MdButton ahora en la pagina de Angular es MatButtonModule, la linea literal es:

import {MatButtonModule, MatCheckboxModule} from ‘@angular/material’;

Por lo que hay que escribir MatButtonModule en todos los espacios que en el video se escriben como MdButton… Excelente video, me esta gustando mucho.

Juan Pablo Frers Campos

student•

Cuidado en este capítulo, ya es viejo, y la instalación es totalmente diferente. Lo mejor es seguir los pasos propuestos en https://material.angular.io/guide/getting-started (es mucho más fácil)

Quimey Lucas Marquez

student•

Que diferencia hay entre Angular como UI y UX y Bootstrap?, entiendo que con material sigue los estandares de Material, pero y Bootstrap?

Diego Forero

Team Platzi•

Simplemente son dos frameworks de frontend qué tienen una serie de elementos definidos como botones, barras de navegación etc. Material usa como base los estilos de Material Design de Android. Bootstrap por otro lado tiene sus propios estilos, esa es la diferencia.

Andres Mora Vanegas

student•

Hola Amigos de Platzi, valdría la pena aclarar en un pagina previa a este video que se debe cambiar las etiquetas <md-xxx></md-xx> por <mat-xxx></mat-xxx> con el fin de evitar confusiones por parte de los nuevos estudiantes de este curso y también sugerir que siempre se remitan a la documentación oficial de material.angular, muchas gracias, me ha gustado mucho el curso y seguiré aprendiendo… 😃

David Toca

student•

Muchas gracias por la sugerencia, lo voy a comentar con las personas encargadas

Jesus Sandrea

student•

Pueden poner el enlace al proyecto en Github? Please | Porfa | Porfiss?

Diego Forero

Team Platzi•

El proyecto hasta este punto lo puedes descargar en la pestaña de archivos en el boton de descargar todo, es la misma estructura del proyecto en github en este commit especifico 😃

Jesus Sandrea

student•

es que no aparecen ciertos archivos como por ej: app.module.ts

Ioce Velasco

student•

Estaría genial que hablaran un mas de como hacer mas custom los theme de material

Diego Forero

Team Platzi•

Eso ya es mas css que como tal MEAN, solo es estudiar la documentación de material design y hacer los cambios que desees.

Alex de los Santos

student•

Si voy a subir mi proyecto completo a GitHub, el cual incluye Angular Material ¿necesito especificar que se debe seguir estos pasos para instalar Angular Material? ¿O sólo necesito descargarlo yo para desarrollar la aplicación? Gracias!

Carlos Sampol

Team Platzi•

No es necesario. Cuando haces el npm install de algun paquete automaticamente se agrega al package.json.
Te recomiendo que en especifiques que es necesario instalar dependencias y luego si ejecutar el proyecto.

Carlos Enrique Ramírez Flores

student•

30/12/2018 el comando es:

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

Adrian Pelaez Vegas

student•

Me sale este error al compilar la página:

Failed to compile.

/home/adrian/node_modules/@angular/cdk/esm5/table.es5.js Module not found: Error: Can’t resolve ‘@angular/common’ in ‘/home/adrian/node_modules/@angular/cdk/esm5’

Alguien sabe como solucionarlo?

Diego Forero

Team Platzi•

Puedes compartir el stack trace completo del error por favor.

Carlos Enrique Ramírez Flores

student•

pudiste resolver el error?

RAUL HENDE

student•

Buenas, me ha sucedido en linux, que ejecutando el comando ng serve, no he podido inicializar el servidor, te ha sucedido??

RAUL HENDE

student•

Lo que hago es revisar mediante la terminal, cuales es el proceso que esta utilizando este pueto y lo libero: Primero ubico el proceso con este comando, indicando o pasandole como parametro el puerto a liberar:

fuser -n tcp 4200

Esto devolvera: 4200/tcp: numero_de_proceso

una vez identificado el proceso que ejecuta el puerto, termino el proceso con:

kill -9 numero_de_proceso

Entonces ya puedes ejecutar ng serve ó ng serve -o y listo.-

Diego Forero

Team Platzi•

También puedes utilizar el flag --port para correr en otro puerto tu aplicación, por ejemplo ng server <nombre proyecto> --port 5100 esto correrá el servidor en el puerto 5100 en lugar del 4200 que es el valor por defecto, puedes ver otros flags útiles aquí https://angular.io/cli/serve

Emanuel Alejandro Mamani

student•

Que version de angular es?

Telenet de México

student•

La versión con la que fue creada me parace es Angular 6, pero la diferencia entre esa versión y la actual (al momento que publicas tu duda) no hay gran diferencia. Hay cosas nuevas sí, pero no te afectan de manera critica en el curso. Si deseas ver con detalle cuales son las nuevas cosas debes leer la documentación.

Usuario anónimo

user•

ng add @angular/material

Guillermo Lapettina

student•

Error al compilar:

ERROR in src/app/material.module.ts:2:51 - error TS2306: File 'C:/Users/Guillermo/Desktop/platzi-overflow/node_modules/@angular/material/index.d.ts' is not a module.

2 import { MatButtonModule, MatCheckboxModule } from'@angular/material';

Jorge Leonardo Céspedes Tapia

student•

He seguido toda la instalación con la documentación oficial y no coincide con lo desarrollado en clase. Este curso debería actualizarse o deberían ver otra forma de incorporarlo en alguna carrera.

José Rodríguez

student•

Saludos, cambié la versión de angular material en el package.json para que me pudiera funcionar esto fué lo que coloqué: “@angular/material”: “2.0.0-beta.7”,

Javier Cestau

student•

No le pongan ‘;’ a @NgModule si no dará error, estuve más de una hora buscando el problema…

wesly hernandez

student•

me siento tan emocionado con este curso.
estoy a tope.

Maycol Romero

student•

Para los que quieran remplazar html por pug, aqui les deje este link de como configurar pug en un proyecto de angular

Para los que quieran usar SCSS en angular solo tienen que escribir en la terminal, posicionados en el proyecto lo siguiente:

 $  ng set defaults.styleExt scss

Saludos!!!