CODEWITHSUNDEEP
angularlayoutangular-materialangular-flex-layout
Paulo Afonso Pinheiro
Paulo Afonso Pinheiro

Reputation: 115

How to achieve such layout with Angular Flex-Layout

how could i achieve this layout using Angular Flex-Layout? desired layout

Since i'm using angular material. It seems that i need to use this flex-layout lib instead of bootstrap but the problem is that i can't get it working, so any help is welcome thanks.

*i'm not looking for responsiveness, if i can get this layout just as the image it would help-me a lot.

Upvotes: 0

Views: 782

Answers (1)

PeS
PeS

Reputation: 4039

Well, install flex-layout.

Import layout module to your project/module:

import {FlexLayoutModule} from '@angular/flex-layout';
...
@NgModule({
 imports: [
   ...
   FlexLayoutModule,
   ...
 ]
})

And finally, in the HTML:

<div fxLayout="row" style="height: 100%">
  <div style="background-color: red" fxFlex="20"></div>
  <div fxLayout="column" fxFlex>
    <div style="background-color: blueviolet" fxFlex></div>
    <div style="background-color: cornflowerblue" fxFlex></div>
    <div style="background-color: darkgray" fxFlex></div>
  </div>
</div>

fxFlex="20" gives the first div 20% width. fxFlex with no params just spreads the height or width evenly between elements.

Upvotes: 1

Related Questions