Angular Material only works with Angular Flex-layout?

Question

In a recent interview I was asked if I knew what flex is, to which I replied that I didn't have much knowledge about it. The interviewer was shocked and then asked how do you even use material if you do not know flex.

He said Angular Material cannot be customized unless we use flex.

Is this correct? Because in my previous project I did use Angular Material and customized it without using any flex property.

Can you guys clarify if Angular Flex is compulsory to use Angular Material?

Many components in angular material like mat-toolbar, mat-expansion-panel-header , mat-horizontal-stepper-header-container uses the flex property. If you inspect the mat-toolbar element in your browser and look for the property of display, you can see display : flex — dileepkumar jami
Note that the correct term that should be used instead of flex should be "flexbox". — Edric

Gustavo Morais Gustavo Morais · Accepted Answer · 2019-02-20T15:17:51

Angular Material flex implementation occurs on top of CSS, so technically no. You should be able to do everything by yourself with CSS as well. You can even use bootstrap flex with it.

However, since you're already using Angular Material and Angular Flex-Layout is an npm package made by the official Angular team which does the job pretty well, it's commonly a good practice to use it.

Article comparing use of Bootstrap or Angular Flex here: https://codinglatte.com/posts/angular/angular-flex-better-than-bootstrap/

Conclusion(According to the author of the article):

Angular Material and Angular Flex Layout are better than bootstrap. This is not to say you shouldn’t use bootstrap, but you should consider using both libraries. Of course, you can still use either independently if you wish to, Angular Material for the nice-looking UI component and Angular Flex Layout for responsive design.

Angular Material only works with Angular Flex-layout?

2 Answers