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?
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
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