пользовательская точка останова не работает в flexlayout

Question

Я пытаюсь установить другой цвет фона для другого режима разрешения с помощью flexlayout.

не работает, ниже мой код

app.component.html

<div class="content" fxLayout="row" fxLayout.xs="column" fxFlexFill >
          <div fxFlex="50" [fxFlex.xs]="xsBGColor" [fxFlex.md]="mdBGColor">
              first-section
          </div>
          <div fxFlex="50" [fxFlex.xs]="xsBGColor"  [fxFlex.md]="mdBGColor">
              second-section
          </div>
</div>

app.component.css

.xsBGColor{
background-color:red;
}
.mdBGColor{
background-color:blue;
}

кое-что, что я пропустил здесь, но не могу найти, пожалуйста, предложите, что я пропустил в своем коде.

Answer 1

Вы должны использовать ngClass вместо fxFlex

ngClass.xs="xsBGColor"

Ссылка: https://github.com/angular/flex-layout/wiki/ngClass-API