Angular Material FlexLayout fxHide does not hide

Question

I am working on mat-stepper with usage of flex-layout. Every step contains and icon and a paragraph to make it responsible and more readable I want to hide paragraph on smaller screens and leave only icon. Per my understanding fxHide.lt-sm should hide element if the resolution is lower than small but unfortunately nothing happens and it looks like this: Image of stepper (Galaxy S5 size)

Here is the code:

<mat-horizontal-stepper>
  <mat-step>
    <ng-template matStepLabel>
      <ul>
        <li>
          <mat-icon>format_list_numbered</mat-icon>
        </li>
        <li fxHide.lt-sm>
          <p>Grades</p>
        </li>
      </ul>
    </ng-template>
    <app-grades></app-grades>
  </mat-step>
  <mat-step label="Student">
    <ng-template matStepLabel>
      <ul>
        <li>
          <mat-icon>account_circle</mat-icon>
        </li>
        <li fxHide.lt-sm>
          <p>Student</p>
        </li>
      </ul>
    </ng-template>
    <app-user></app-user>
  </mat-step>
  <mat-step label="Teachers">
    <ng-template matStepLabel>
      <ul>
        <li>
          <mat-icon>people</mat-icon>
        </li>
        <li fxHide.lt-sm>
          <p>Teachers</p>
        </li>
      </ul>
    </ng-template>
    <app-teachers></app-teachers>
  </mat-step>
  <mat-step label="Messages">
    <ng-template matStepLabel>
      <ul>
        <li>
          <mat-icon>message</mat-icon>
        </li>
        <li fxHide.lt-sm>
          <p>Messages</p>
        </li>
      </ul>
    </ng-template>
    <app-messages></app-messages>
  </mat-step>
</mat-horizontal-stepper>

FxLayoutModule is included in imports of app.module.ts

There's a issue reported about this problem, perhaps changing your version could solve it. Issue 945 — Paulo Galdo Sandoval
Are you importing the right module? Or is it a typo error that you spelt FlexLayoutModule as FxLayoutModule? — Edric
Thank you for response Edric. Actually i didn't know that FlexLayoutModule cannot be shared between modules and have to import it explicitly to every module which uses flex. — Mateusz Gebroski

Fletch Fletch · Accepted Answer · 2020-07-01T08:43:12

FlexLayoutModule must be imported in all modules that wish to use it

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

@NgModule({
  imports: [
    FlexLayoutModule,
  ]
})
export class MyModule { }

Angular Material FlexLayout fxHide does not hide

1 Answers