Angular Material 4 flex layout

1
votes

Installed material flex layout in my project but i unable to see the file in @node_modules and its not rendering properly for flex layout css.

Below code i followed, please suggest any thing missing here.

installed

npm install @angular/flex-layout@latest --save

imported app.components.ts

import { ObservableMedia } from '@angular/flex-layout';

imported in app.moduel.ts

import { FlexLayoutModule } from '@angular/flex-layout';
imports: [
    BrowserModule,
    BrowserAnimationsModule,   
    FlexLayoutModule
  ],

Node: installed version

@angular/[email protected]

for reference enter image description here

2
angular-materialangular-flex-layout

2 Answers

1
votes

Nothing seems to be missing. Pay attention to your Angular version - "Deprecated support for Angular 2.4.x" https://github.com/angular/flex-layout

You should be able to find the lib here: node_modules/@angular/flex-layout. Here is some basic directive usage example. Hope it helps!

<div fxLayout="row" fxLayoutAlign="space-around center">
  <div fxFlex="33"></div>
  <div fxFlex="33"></div>
  <div fxFlex="33"></div>
</div>
0
votes

Flex layout works great with angular, all you need is here. Please visit this link and follow documentation:

https://github.com/angular/flex-layout

---------Extra Note---------------

If you are using visual code there is also a plugin for angular flex layout which can be used for more fast coding.