Dynamically changing the width an element in Angular

Question

Forgive me, I'm new to Angular.

I'm trying to dynamically change the a div when a button is clicked. I have tried [style.width] and [style.width.px]. and it seems to work initially setting the value, but when I try to change it within a function it doesn't seem to be rendering on the screen. Meaning, it changes in the html, but not visually. I have been staring at this too long so some hep would be appreciated.

The div in the html

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

Where the initial variable is set in the ts file

 logoWidth = '450px';

And the function within the ts file

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

@xdeepakv, yes I just replaced. my real conditional with that. I'll replace it to just say conditional — zazvorniki
– zazvorniki, Commented Mar 27, 2020 at 17:03
Try with this.logoWidth = '250px';. The semi-colon should not be included in the string. Alternatively, use [style.width.px]="logoWidth", with this.logoWidth = 250;. There is no reason to use [ngStyle] to set a single style property. — Martin Parenteau
– Martin Parenteau, Commented Mar 27, 2020 at 17:09
The [style.width] notation should work. Can you provde a stackblitz of the problem? How do you call closeSideMenu? — Martin Parenteau
– Martin Parenteau, Commented Mar 27, 2020 at 17:18

Pranav C Balan · Accepted Answer · 2020-03-27 17:28:55Z

4

You can use ngStyle

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

Even [style.width need to work, that ; may cause the problem so remove it and try.

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

Or alternately you can provide pixel value binding style.width.px

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

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

edited Mar 27, 2020 at 17:28

answered Mar 27, 2020 at 17:04

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zazvorniki Over a year ago

Thank you! Is there a reason why ngStyle works in the case and not style.width?

Pranav C Balan Over a year ago

@zazvorniki : try [style.width.px] ="logoWidth" and value without px, like logoWidth = 50'

xdeepakv · Accepted Answer · 2020-03-27 17:10:21Z

0

the issue with value: by mistake u added semi-colon ; at end of the value, 50px; remove ';'. Best use, [ngStyle]

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

answered Mar 27, 2020 at 17:10

xdeepakv

8,1452 gold badges25 silver badges35 bronze badges

3 Comments

zazvorniki Over a year ago

Even with removing that it didn't want to change. Not really sure why. The ngStyle seems to wok though :)

xdeepakv Over a year ago

it works.. codesandbox.io/s/intelligent-shirley-xhyb8

xdeepakv Over a year ago

I thinks than u doing something fisshy :-D

Collectives™ on Stack Overflow

Dynamically changing the width an element in Angular

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related