Изменить ширину div на основе условий в угловых 6

Question

Я хочу изменить ширину div на основе следующего условия,

<div [ngStyle]="'width': selectedTab =='Home' ? '50%' : '100%'">

</div>

Я получаю вкладку, которая была выбрана в " selectedTab ".

У меня есть две вкладки.

1) Индекс

2) Дом

Если я выберу вкладку «Индекс», ширина div должна быть « 100% ». Incase Если я выберу домашнюю вкладку, ширина div должна быть " 50% ". Я написал условие [ngStyle], но оно не работает.

Пожалуйста, помогите мне, как я могу справиться с этой ситуацией.

Answer 1

Вы можете использовать ngStyle для этого.

Демонстрация Stackblitz

<div [ngStyle]="{
    'width.%': selectedTab =='Home' ? '50' : '100',
    'background-color': 'red'
  }">>
  div
</div>

Answer 2

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

<div [style.width]="selectedTab =='Home' ? '50%' : '100%'"></div>