Is Angular 4 material responsive like bootstrap?

angular responsive-design angular-material2
Brian picture Brian · Jul 24, 2017 · Viewed 36.5k times · Source

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?

Answer

kuncevic.dev picture kuncevic.dev · Jul 25, 2017

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

Related questions

Angular2 - Expression has changed after it was checked - Binding to div width with resize events

I have done some reading and investigation on this error, but not sure what the correct answer is for my situation. I understand that in dev mode, change detection runs twice, but I am reluctant to use enableProdMode() to mask …

Read More
how to do responsive components in Angular2

I'm wading my way into Angular2. My objective is to create a responsive app that loads different components in response to different media-queries for device widths. My working example has a MatchMediaService: import { Injectable } from '@angular/core'; @Injectable() export …

Read More
Can't bind to 'ngModel' since it isn't a known property of 'input'

I've got the following error when launching my Angular app, even if the component is not displayed. I have to comment out the <input> so that my app works. zone.js:461 Unhandled Promise rejection: Template parse errors: Can't …

Read More