Динамически изменяя ширину элемента в Angular

Question

Простите, я новичок в Angular.

Я пытаюсь динамически изменить div при нажатии кнопки. Я пробовал [style.width] и [style.width.px]. и кажется, что он изначально работает, устанавливая значение, но когда я пытаюсь изменить его внутри функции, оно не отображается на экране. Смысл, он меняется в html, но не визуально. Я слишком долго смотрел на это, так что некоторые hep были бы оценены.

Div в html

<div class='logo-contain' [style.width]='logoWidth'>stuff</div>

Где начальная переменная установлена ​​в файле ts

 logoWidth = '450px';

И функция в файле TS

closeSideMenu(){
    if(my conditional){
        this.logoWidth = '50px;'
    }else{
        this.logoWidth = '250px;'
    }
  }

Answer 1

Вы можете использовать ngStyle

<div class='logo-contain' [ngStyle]='{ width : logoWidth }'>stuff</div>

---

Даже [style.width должно работать, что ; может вызвать проблему, поэтому удалите ее и попробуйте.

closeSideMenu(){
    if(my conditional){
        this.logoWidth = '50px'
    }else{
        this.logoWidth = '250px'
    }
  }

Или, альтернативно, вы можете указать привязку значения пикселя style.width.px

<div class='logo-contain' [style.width.px]='logoWidth'>stuff</div>

closeSideMenu(){
    if(my conditional){
        this.logoWidth = 50
    }else{
        this.logoWidth = 250
    }
  }

Answer 2

проблема со значением: по ошибке u добавили точку с запятой ; в конце значения, 50px; remove ';'. Лучшее использование, [ngStyle]

closeSideMenu(){
    if(my conditional){
        this.logoWidth = '50px;'
    }else{
        this.logoWidth = '250px;'
    }
  }