How to use @angular/flex-layout - 10 common examples

@NgModule({
  entryComponents: [
    ConfirmDialogComponent,
    AlertDialogComponent,
    TodoDialogComponent
  ],
  declarations: [
    ConfirmDialogComponent,
    AlertDialogComponent,
    TodoDialogComponent
  ],
  imports: [
    CommonModule,
    HttpClientModule,
    FlexLayoutModule.withConfig({addFlexToParent: false}),
    MatDialogModule,
    MatButtonModule,
    MatSnackBarModule,

    // ngx-translate
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      missingTranslationHandler: {
        provide: MissingTranslationHandler,
        useClass: TbMissingTranslationHandler
      },
      compiler: {

ModuleService,
  NavigationService,
  VersionService,
]

@NgModule({
  declarations: [
    ModComponent,
    FooterComponent,
    HomeComponent,
  ],
  imports: [
    HttpModule,
    CommonModule,
    MaterialModule.forRoot(),
    FlexLayoutModule.forRoot(),
    RouterModule.forChild(ROUTES),
  ],
  providers: [
    ...APP_PROVIDERS,
    // SocketService,
    // AuthGuard
  ]
})

export class ModModule {
  constructor() { }
}

declarations: [
    AppComponent,
    SettingsDialogComponent,
    AddMessageComponent
  ],
  entryComponents: [
    AppComponent,
    SettingsDialogComponent,
    AddMessageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    FlexLayoutModule.forRoot()
  ],
  providers: [
    ModelsService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }



// Copyright 2016 Google Inc. All Rights Reserved.
// Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license

}
    return reducer(state, action)
  }
}

const rootReducer = compose(stateSetter, combineReducers)({
  message
})

let imports = [
  BrowserModule,
  FormsModule,
  HttpModule,
  CommonModule,
  MaterialModule.forRoot(),
  FlexLayoutModule.forRoot(),
  RouterModule.forRoot(ROUTES, {
    useHash: true
  }),

  // StoreLogMonitorModule,
  StoreModule.provideStore(rootReducer)
]

// Enable HMR and ngrx/devtools in hot reload mode
if (process.env.NODE_ENV === 'development') imports.push(...[
  StoreDevtoolsModule.instrumentStore({
    monitor: useLogMonitor({
      visible: false,
      position: 'right'
    })
  }),

_configureAdapters() {
        this._base = new BaseDirectiveAdapter('ngStyle', this.monitor, this._ngEl, this._styler);
        if (!this._ngStyleInstance) {
            // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been
            // defined on the same host element; since the responsive variations may be defined...
            this._ngStyleInstance = new NgStyle(this._differs, this._ngEl, this._renderer);
        }
        this._buildCacheInterceptor();
        this._fallbackToStyle();
    }
    /**

_configureAdapters() {
        this._base = new BaseDirectiveAdapter('ngClass', this.monitor, this._ngEl, this._styler);
        if (!this._ngClassInstance) {
            // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been defined on
            // the same host element; since the responsive variations may be defined...
            this._ngClassInstance = new NgClass(this._iterableDiffers, this._keyValueDiffers, this._ngEl, this._renderer);
        }
    }
    /**

function () {
        this._base = new BaseDirectiveAdapter('ngStyle', this.monitor, this._ngEl, this._styler);
        if (!this._ngStyleInstance) {
            // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been
            // defined on the same host element; since the responsive variations may be defined...
            this._ngStyleInstance = new NgStyle(this._differs, this._ngEl, this._renderer);
        }
        this._buildCacheInterceptor();
        this._fallbackToStyle();
    };
    /**

function () {
        this._base = new BaseDirectiveAdapter('ngClass', this.monitor, this._ngEl, this._styler);
        if (!this._ngClassInstance) {
            // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been defined on
            // the same host element; since the responsive variations may be defined...
            this._ngClassInstance = new NgClass(this._iterableDiffers, this._keyValueDiffers, this._ngEl, this._renderer);
        }
    };
    /**

function () {
        /** @type {?} */
        var activatedValue = this.activatedValue;
        if (activatedValue !== undefined) {
            /** @type {?} */
            var parts = validateBasis(activatedValue, this.flexGrow, this.flexShrink);
            this.marshal.updateElement(this.nativeElement, this.DIRECTIVE_KEY, parts.join(' '));
        }
    };
    /** @nocollapse */

this.direction = this.getFlexFlowDirection(this.parentElement!, addFlexToParent);
    }
    const direction = this.direction;
    const isHorizontal = direction.startsWith('row');
    const hasWrap = this.wrap;
    if (isHorizontal && hasWrap) {
      this.styleCache = flexRowWrapCache;
    } else if (isHorizontal && !hasWrap) {
      this.styleCache = flexRowCache;
    } else if (!isHorizontal && hasWrap) {
      this.styleCache = flexColumnWrapCache;
    } else if (!isHorizontal && !hasWrap) {
      this.styleCache = flexColumnCache;
    }
    const basis = String(value).replace(';', '');
    const parts = validateBasis(basis, this.flexGrow, this.flexShrink);
    this.addStyles(parts.join(' '), {direction, hasWrap});
  }