5. Angular Flex Layout


        
            
                Markdown 0.68 KB
                                    
                        | None                    
                
                                        |
    0    0                            

            
                
                                    raw
                    download
                    clone
                    embed
                    print
                
                                    report
                
                
                            
        
        
            npm install @angular/flex-layout –-save
add to app module
import {FlexLayoutModule} from '@angular/flex-layout';
imports: [

BrowserModule,

BrowserAnimationsModule,

MaterialModule,

FlexLayoutModule

],

layout.component.html
<div fxLayout="row wrap" fxLayoutAlign="center center" class="layout-wrapper">

<div fxFlex="80%" fxFlex.lt-md="100%" class="flex-wrapper">

<ng-content></ng-content>

</div>

</div>

layout.component.css
.layout-wrapper{

height: 100%;

}
.flex-wrapper{

height: 100%;

}

app component html
<app-layout>

Application works.

</app-layout>