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
Gmail :- [e-mail]
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.
Source Code ( GitHub Link ): github.com/Tariqu/flex-tutorial
Flex-Layout Documentation Link : github.com/angular/flex-layout
Angular Material UI Documentation : material.angular.io/
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.
app.module.ts
import { FlexLayoutModule } from '@angular/flex-layout';
...
@NgModule({
...
imports: [ FlexLayoutModule ],
...
});
After that is configured, you can use the Angular Layout attributes in your HTML tags for flex layout:

[@drakebhau8922]

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

[@hbdarji]

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

[@RaymondBarbour]

Clear and simple. Will help me get going quickly

[@rahulkengar1312]

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

[@pradeepkumarkushwaha8519]

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

[@cypherLabs]

Thanks for the detailed video. You are awesome

[@iwuce101]

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

[@Anuj_Kumar_1]

Thanks for teach in details and in easy way

[@nadya6833]

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

[@muneebmukhthar4880]

What a soothing tutorial with a music in BG 😍

[@HernandesJunio]

Gostei muito da explicação, foi bem claro.

[@appartementschambres140]

Good observation

[@RamuRamu-jp3yy]

good explanation subscribed liked

[@SubratRed]

AWESOME.....

[@yassirbahlouli3791]

you are great , you helped me a lot

[@ajaykumhar8356]

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

[@TechnicalBabaji1]

Thank you, I will

[@sergiozurita2033]

media$ is deprecated. Therefore, you should use asObservable as follows:
this.mediaSub = this.mediaObserver.asObservable().subscribe((change: MediaChange[]) => { console.log(change[0].mqAlias) });

[@chandruskc]

Ah.. That soothing music in the background

[@yasarhussain3811]

thanks for video bro please add more complex videos in angular

[@sherafattradings]

Thanks,
A useful video.

[@lacramioaracorneanu6271]

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

[@manikcheruku4399]

Thanks a lot

[@mezianekettou9097]

Don't forget to add the following import to your styles.css file:
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
If not adding color="primary" to the mat-toolbar will have no effect.

[@TechnicalBabaji1]

Thanks for sharing the information

[@scienceisareligion2231]

Thank you

[@balajid4963]

Thanks lot boss

[@srinathsathyanath7435]

This is gold 🔥

[@TechnicalBabaji1]

Thank you

[@Alejandro-gg7oz]

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

[@macgideons4201]

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

[@AmitKumar-yj1dx]

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

[@adel8167]

I get this error everytime I try to install. any idea why: '@angular/flex-layout@latest' is not in the npm registry.

[@amitprakash2567]

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?

[@pratapjena1393]

I am getting horizontal bar when adding more numbers toolbar option

[@birajadhikari2237]

media$ is deprecated on new version, can you update the video?

[@mdwaseemahmad7757]

Is your problem resolved?

[@CHAN-xn9eq]

this.mediaObserver.asObservable()
.subscribe((change)=>{
this.deviceXs = change[0].mqAlias === 'sm' ? true : false
console.log(change[0].mqAlias)
})
try this...

[@vidyasagargaikwad1268]

Hi, Sir How did you make the sidebar and card responsive

[@amolgode9843]

Plzz upload full video...........................!

[@drakZes]

I'm in this video to learn Flex. Now you doing stuff I have never seen before in the 1st few minutes so this tut is very confusing.

[@picflight]

How can you soo on big screen when screen is wider than 1600?

[@AnkitGupta-sf9pp]

Where is next video..adding card with image

[@MauricioRamosdaSilva]

I have the same needs! Responsive cards!

[@Drysdev]

Question? Flex-layout Is free or paid. Thank you

[@TechnicalBabaji1]

Free

[@rachitmaheshwari2129]

what if I Ngoinit is already used

[@chinnii_chiinnii]

where is next video

[@AsimAli-pr6tv]

where is next part of this video , everything is not implemented here in this video as shown in demo

[@ekomobongudo1796]

How can I get other parts of video

[@yashmeenzunifa2684]

where is the 2nd part of this video

[@atlamasthanaiah7911]

Where is side bar
How can I get siddebar video

[@gkmishra2009]

please help explain below topic of angular ->
ChangedetecorRef
TemplateRef
ViewContainerRef
ElementRef
RXJS operators
Host listener
host binding
CDK Portal
QueryList
DOM Portal host
Portal template
Application ref
AG Grid tutorial
Subject
behavious subjects
Forward Ref
WithLatestFrom
Content Child
Overlay
Overlayref
ChildrenOutlet Context
Navigation Extras
NGRX
FakeAsync

[@vadrif-draco]

media$ is deprecated now, what is the alternative?

[@CHAN-xn9eq]

this.mediaObserver.asObservable()
.subscribe((change)=>{
this.deviceXs = change[0].mqAlias === 'sm' ? true : false
console.log(change[0].mqAlias)
})
use this

[@streamlobby2341]

I hope this helps

[@amolgode9843]

Video not complete............................... :(

[@amolgode9843]

2nd part is missing.....................................................!

[@sumantamaji7498]

ERROR in node_modules/@angular/flex-layout/typings/module.d.ts:16:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/flex-layout) which declares FlexLayoutModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

16 export declare class FlexLayoutModule {
~~~~~~~~~~~~~~~~ how to correct this error please

[@TechnicalBabaji1]

Please stop and restart project with npm

[@TechnicalBabaji1]

Make sure you have everything updated

[@yasarhussain3811]

@@TechnicalBabaji1 bro where is next video please upload

[@mearn_ctaftsman]

Good content but never add any such background music on technical videos, bro

[@TechnicalBabaji1]

Sure

[@SureshKumarDL]

Bro Mobile Version?

[@sanjayarakkan8803]

bakwaas

[@nw_rye]

Doesn't work with the latest versions of TS and Angular. Strict class initialization now requires an initializer in the constructor, and mediaObserver.media$ must be used as asObservable() instead.

[@chickenjoy]

How to fix? I can't proceed with the tutorial due to this error.