primary - material css angular

Material Angular con Angular 4

Question

¿Hay opciones para usar Material Angular con nuevo Angular 4?

Material oficial.angularjs.org dice:

Angular Material lanzó recientemente la versión 1, que consideramos estable y lista para su uso en producción. Los desarrolladores deben tener en cuenta que Angular Material v1 solo funciona con Angular 1.x.

Y con respecto a Angular 2:

El desarrollo de Angular Material v2 también está en progreso en el repositorio angular/material2 GitHub

¿Qué pasa con Angular 4? ¿Crees que podemos unir de alguna manera Angular 1.xy Angular 4 en un proyecto para traer nuevas características de Angular 4 y seguir usando el increíble marco de Angular Material?

Answer 1

Acabo de empezar a trabajar con angular 4.0.0 (usando angular cli 1.0.0) y traté de usarlo con el material 2.0.0-beta2. Funciona bien, excepto algunos errores en la interfaz de usuario:

1. La casilla de verificación de Material se ve horrible, tiene una casilla de verificación nativa dentro de ella ( Screenshot )

Voy a actualizar este post en caso de encontrar algo inestable. Parece que puedes probar https://github.com/mseemann/angular2-mdl por ahora.

Answer 2

En diciembre de 2016, cuando el equipo de Angular corría por ahí y les decía a todos que dejaran de decir "Angular 2" y que solo dijeran "Angular", pensé que era una tontería de marketing.

Sin embargo, al leer las preguntas en este sitio, estoy empezando a ver lo racional para su súplica. Angular 1.x a Angular 2 representó una reescritura completa, un marco completamente rediseñado que rompió casi todo. Además de esto, está el cambio a semver, lo que significa que las nuevas versiones principales llegarán más rápidamente.

En resumen, lo que creo que intentaron evitar fue la línea de pensamiento de que "Angular 4 es para Angular 2 como Angular 2 era para Angular 1", lo que definitivamente no es cierto.

Este problema de percepción es también lo que los llevó al nombre en código 4.0 "cambio de imagen invisible".

Por lo tanto, cuando vea los paquetes diseñados para Angular2, la mayoría de ellos probablemente también funcionarán con Angular 4. Y si hay cambios en ng4 que rompen esos paquetes, verá rápidamente versiones para tratar esos ... o tenga su respuesta sobre si ese paquete está lo suficientemente bien como para usarlo en su proyecto.

Answer 3

Hacer esto:

npm install --save @angular/animations

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

 //in app.module.ts
@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class YourAppModule { }

De nuevo importa el módulo de material Me gusta

import: [MaterialModule.forRoot()]

Answer 4

La mayoría de los sitios angulares 2/4 son io intente esto

https://material.angular.io/

Answer 5

Puede consultar la guía de introducción desde here . Esta documentación se actualiza para soportar angular v4.0.0

Algunos componentes de material dependen del módulo de animaciones angulares para poder realizar transiciones más avanzadas. Si desea que estas animaciones funcionen en su aplicación, debe instalar el módulo @angular/animations e incluir el módulo BrowserAnimationsModule en su aplicación desde @angular/platform-browser/animations .

Answer 6

Puede descargar o desmontar la placa de calderas de angular-quickstart desde angular-quickstart En este proyecto, disponga del último soporte estable de material angular 2.0.0-beta.6 y angular 4.0.0. Fue bastante difícil encontrar la configuración correcta para las últimas versiones.

Answer 7

También estoy trabajando con Angular 4.0.0 y CLI 1.0.0, funciona bien. Solo para decir que los comportamientos extraños como la casilla de verificación sin estilo mencionada anteriormente ocurren porque la tematización de sus componentes es obligatoria. Puedes trabajar con temas de materiales angulares ya creados o generar los tuyos. Solo incluye la hoja de estilo en tu index.html y verás la magia.

Puede encontrar más información sobre la temática de material angular aquí: https://material.angular.io/guide/theming

Answer 8

@import ''~@angular/material/prebuilt-themes/deeppurple-amber.css'';

Agregue eso a su archivo css :). Me pasó lo mismo a mí. Solo necesito un tema para arreglar ese problema.