Is Angular 4 material responsive like bootstrap?

Question

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?

Check @angular/flex-layout. The material components are responsive up to some extent (font size, text decorators, etc), but to create responsive layouts, angular offers the mentioned package. — Jota.Toledo, Jul 24 '17 at 21:59

score 34 · Accepted Answer · edited Aug 27 '18 at 16:41

34

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

edited Aug 27 '18 at 16:41

Maarti

3,600
4
17
34

answered Jul 24 '17 at 23:04

angularrocks.com

26,767
13
87
104

I laughed when I tried it and learned that it just shrinks the contents instead of letting each contents collapse naturally as the view size changes. :D – Jhourlad Estrella Jan 01 '18 at 07:34
@JhourladEstrella Have you gone through [Responsive API](https://github.com/angular/flex-layout/wiki/Responsive-API) for flexbox ? – pravin Feb 10 '18 at 04:26
But it seems that all the releases are in beta – Abhinandan Khilari Jul 09 '21 at 07:45
@AbhinandanKhilari https://github.com/angular/flex-layout/issues/713 – angularrocks.com Jul 10 '21 at 00:33

score 1 · Answer 2 · answered Apr 03 '18 at 03:37

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

Is Angular 4 material responsive like bootstrap?

2 Answers2

Linked