Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is Angular 4 material responsive like bootstrap?

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?

like image 822
Brian Avatar asked Jul 24 '17 21:07

Brian


People also ask

Is Angular material is responsive?

Features of Angular MaterialIt is an In-built responsive design. Angular Material has standard CSS. The new version of UI Components, buttons, checkboxes, and text fields is used to follow Angular Material Design concepts.

Is it better to use Angular material or Bootstrap?

Angular Material and Flex Layout are absolutely better than bootstrap. But that doesn't mean that you should not use bootstrap, but you may consider utilizing both the libraries.

Is Angular material like Bootstrap?

Bootstrap or Angular Material? Bootstrap is a responsive framework that can develop user-friendly and modern websites and mobile applications. Angular Material is a User Interface (UI) component library that offers reusable components to speed up your project.

Is Angular material responsive by default?

The quickest answer would be, no, angular is not responsive by default.


Video Answer


1 Answers

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

like image 106
angularrocks.com Avatar answered Sep 23 '22 01:09

angularrocks.com