Angular 9 Flex Layout Getting started with FxLayout and Angular Material

Using flexbox CSS layout we can change the width and height of HTML DOM elements based upon the available space.
=============================================
For any Business enquiry contact us
WhatsApp :- [phone] (for only business query)
=============================================

We can define different kinds of layouts for different kinds of display devices and different screen sizes.

In this video I am going to show you how you can design the responsive layout using angular flex-layout along with angular material.



Angular Flex Layout provides a sophisticated layout API using Flexbox CSS + mediaQuery. This module provides Angular developers with component layout features using a custom Layout API, mediaQuery observables, and injected DOM flexbox-2016 CSS stylings.

The Flex Layout engine intelligently automates the process of applying appropriate Flexbox CSS to browser view hierarchies. This automation also addresses many of the complexities and workarounds encountered with the traditional, manual, CSS-only application of box CSS.

The real power of Flex Layout, however, is its responsive engine. The Responsive API enables developers to easily specify different layouts, sizing, visibilities for different viewport sizes and display devices.

Getting Started
Start by installing the Angular Layout library from npm

npm i -s @angular/flex-layout @angular/cdk

Next, you'll need to import the Layout module in your app's module.

...

@NgModule({
...
imports: [ FlexLayoutModule ],
...
});
After that is configured, you can use the Angular Layout attributes in your HTML tags for flex layout:

[drakebhau]

Bro, You are giving the quality content free of cost. It's precious, Thanks.

[iwuce]

If this was paid content, it would cost about a thousand dollars. Thank you so much for giving out such info for free.

[sergiozurita]

media$ is deprecated. Therefore, you should use asObservable as follows:

this.mediaSub = MediaChange[]) => { });

[RaymondBarbour]

Clear and simple. Will help me get going quickly

[hdadpool]

Very clear cut and short, precise explanation. Just what I needed! Thank you! :)

[muneebmukhthar]

What a soothing tutorial with a music in BG 😍

[pradeepkumarkushwaha]

Nice Video Sir. It really helped a lot to understand. It is very clear and to the point. Thank you.

[ajaykumhar]

Thia is very helpful so please make more videos (work with flex layout). we are improvising by your work

[Anuj_Kumar_]

Thanks for teach in details and in easy way

[macgideons]

accurate tutorial.. what of the continuation of this tutorials? I mean the sidebar and the card..etc

[chandruskc]

Ah.. That soothing music in the background

[rahulkengar]

This is very helpful ...Waiting for the next video

[mezianekettou]

Don't forget to add the following import to your styles.css file:
If not adding color="primary" to the mat-toolbar <mat-toolbar color="primary"> will have no effect.

[Alejandro-ggoz]

css grid + angular is not good idea when you using routing links because router-outlet doesnt work with css grid, hope angular flex layout will work fine

[AmitKumar-yjdx]

Hlw babaji, this really helped me but the 2nd part of this video is missing, plz upload it Sir

[lacramioaracorneanu]

Great tutorial! Thank you! Do you have tutorial also for the grid list with mat-cards?

[cypherLabs]

Thanks for the detailed video. You are awesome

[yasarhussain]

thanks for video bro please add more complex videos in angular

[nadya]

thanks for this tutorial, it was a big help for me :)

[amitprakash]

Bro, where are the continuation videos for this series? Please help me with this. And could you please make a video for full website design using Flex-layout & Angular Material?