Добавить класс, включающий флаг и медиа-запрос в угловых

Question

Я хочу добавить класс в зависимости от флага и разрешения экрана, которое я пробовал

[ngClass]="singleFloorFlagStyle ? 'floorPlanContainerWidth' : 'singleFloor'"

 @media only screen and (min-width: 1500){
.floorPlanContainerWidth{
 width: 670px;
 }
}

 @media only screen and (max-width: 1400){
.floorPlanContainerWidth{
width: 613px !important;
}
}

.singleFloor{
width: 1300px;
}

singleFloorFlagStyle Я получил бы как true или false. Таким образом, класс singleFloor применяется, а класс floorPlanContainerWidth - нет. Как я могу заставить классы медиазапроса работать.

Я уже упоминал это Angular 5: Использование ngClass для переключения классов для мобильных и настольных ПК но я думаю, что мой сценарий другой

Answer 1

Вы не добавили px, поэтому floorPlanContainerWidth не применяется

 @media only screen and (min-width: 1500px){
   .floorPlanContainerWidth{
     width: 670px;
   }
 }

 @media only screen and (max-width: 1400px){
   .floorPlanContainerWidth{
      width: 613px !important;
   }
 }

.singleFloor{
   width: 1300px;
}

Answer 2

Попробуйте это

[ngClass]="{'floorPlanContainerWidth' : singleFloorFlagStyle , 'singleFloor' : !singleFloorFlagStyle }"

Если вы хотите установить начальный размер floorPlanConatainerWidth. Так что, даже если он не находится в соотношении медиазапросов, тогда также будет применяться стиль. Затем вы должны добавить класс вне медиазапросов и определить там некоторую ширину

.floorPlanConatainerWidth{
  // Initially set width without media queries
}

@media ...