问题
I am starting on a new project with Angular 4 and need to create responsive and pleasant user interface.
- bootstrap gives you responsiveness, but no material feel
- angular material provides that nice UI experience https://material.angular.io
I know bootstrap and used it in previous AngularJS apps, but angular material is new to me. It seems easy to follow docs but i cannot find the responsiveness support.
I don't want to mix them but have not been able to find that column responsiveness for mobile support that bootstrap provides.
Am I missing something? Does angular material support similar responsiveness or should I used both in my app?
回答1:
To add responsiveness in modern angular app you can use Flex-layout it is completely separate from material2 so you can use that even without using material2 in your app.
Bare in mind that as flex-layout is based on Flexbox CSS so it is not supported in old browsers.
Here are some examples
Also check out the new ngAir episode episode talking about Flex-Layout
UPDATE:
Starting from 6.0.0-beta.16 flex-layout now has an API to support CSS Grid. You can find more details by checking pr#712
回答2:
I have been trying to test Angular Material with two different Angular projects, one build with Angular CLI and the second with Visual Studio's Aspnet core 2.0 template. With both, I have not been successful to get started with a simple page. It's been quite a frustrating experience going through workarounds before I can start running the server. For start, npm instaling @angular/material, asks to upgrade you Angular version to 5.0.0. When I did, then it complained about the cli not being 2.3.1 or greater when it was 5.0.0. I had to do some workarounds. In one tutorial I was following, to implement the form, required using mdInput. But it complained and then I find out it is now matInput. Today is my 3rd day trying with no success. I hope to come up with a simple sample page using a component or a form by Tuesday next week. On the other hand, I have not encounter any issues with Bootstrap. Always stable. But I wanted to see other options. I also experienced an issue with PrimeNG and gave up to try Angular Material. Has anyone experience the same?
回答3:
A bit late but I have created a starter template that shows an example of a responsive layout with Material 5 and Angular 5 as well as some simple routing. https://github.com/kenji-1996/material-sidenav-responsive-starter
Uses Material and Flex, no outside libs
来源：https://stackoverflow.com/questions/45290746/is-angular-4-material-responsive-like-bootstrap