instalar - page title angular 4

¿Es el material de Angular 4 sensible como bootstrap?

Question

Estoy empezando un nuevo proyecto con Angular 4 y necesito crear una interfaz de usuario agradable y receptiva.

• bootstrap te da capacidad de respuesta, pero no se siente material
• material angular proporciona esa experiencia de interfaz de usuario agradable https://material.angular.io

Conozco bootstrap y lo utilicé en aplicaciones anteriores de AngularJS, pero el material angular es nuevo para mí. Parece fácil seguir los documentos pero no puedo encontrar el soporte de capacidad de respuesta.

No quiero mezclarlos, pero no he podido encontrar esa capacidad de respuesta de columna para el soporte móvil que proporciona bootstrap.

¿Me estoy perdiendo de algo? ¿El material angular es compatible con una capacidad de respuesta similar o debo usar ambos en mi aplicación?

Answer 1

He intentado probar Angular Material con dos proyectos Angular diferentes, uno creado con Angular CLI y el segundo con la plantilla Aspnet Core 2.0 de Visual Studio. Con ambos, no he tenido éxito en comenzar con una página simple. Ha sido una experiencia bastante frustrante pasar por soluciones antes de que pueda comenzar a ejecutar el servidor. Para comenzar, npm instaling @ angular / material, solicita actualizar su versión angular a 5.0.0. Cuando lo hice, entonces se quejó de que el cli no era 2.3.1 o mayor cuando era 5.0.0. Tuve que hacer algunas soluciones. En un tutorial que estaba siguiendo, para implementar el formulario, se requiere el uso de mdInput. Pero se quejó y luego descubrí que ahora es matInput. Hoy es mi tercer día intentando sin éxito. Espero crear una página de muestra simple utilizando un componente o un formulario para el martes de la próxima semana. Por otro lado, no he encontrado ningún problema con Bootstrap. Siempre estable. Pero quería ver otras opciones. También experimenté un problema con PrimeNG y me di por vencido para probar Angular Material. ¿Alguien ha experimentado lo mismo?

Answer 2

Un poco tarde, pero he creado una plantilla de inicio que muestra un ejemplo de un diseño sensible con Material 5 y Angular 5, así como también algunas rutas simples. https://github.com/kenji-1996/material-sidenav-responsive-starter

Utiliza Material y Flex, sin libretas externas.

Answer 3

Para agregar capacidad de respuesta en la aplicación angular moderna, puede usar Flex-layout , está completamente separado del material2 por lo que puede usarlo incluso sin usar material2 en su aplicación.

Tenga en cuenta que como Flex-layout se basa en Flexbox CSS, no es compatible con navegadores antiguos .

Aquí hay algunos examples

También puedes ver el nuevo episodio de ngAir hablando de Flex-layout

ACTUALIZAR:

A partir de 6.0.0-beta.16 Flex-layout ahora tiene una API para soportar CSS Grid . Puedes encontrar más detalles marcando pr#712