Search code examples
angularangular-materialangularjs-material

flex-sm analog in angular material2 application

This is code which works with angularjs material.

<div flex="50" flex-sm="100">
    Some data
</div>

How can I implement it in my Angular material 2 app?

Solution

  • Follow these steps to get it working:

    1. Install the flex-layout dependency:

      npm install @angular/flex-layout

    2. Import the FlexLayoutModule to your AppModule:

      import { FlexLayoutModule } from '@angular/flex-layout';
import { NgModule } from '@angular/core';

@NgModule({
    imports: [
        FlexLayoutModule,
        // Other modules
    ]
})
export class AppModule {}

    3. Change your code to the following:

      <div fxFlex="50%" fxFlex.sm="100%">
    Some data
</div>