Change div width based on condition in angular 6

Question

I want to change the div width based on the following condition,

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

</div>

I am getting the tab which has been selected in "selectedTab".

I have two tabs.

1) Index

2) Home

If I select Index tab, The div width should be "100%". Incase If I select home tab, the div width should be "50%". I have written [ngStyle] condition but it is not working.

Please help me how can I handle this situation.

Might try a two way binding that you change based on which tab you are currently on. — Sir Catzilla
– Sir Catzilla, Commented Aug 28, 2018 at 13:49

Harun Or Rashid · Accepted Answer · 2018-08-28 13:50:49Z

3

Try this :

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

answered Aug 28, 2018 at 13:50

Harun Or Rashid

5,9572 gold badges21 silver badges23 bronze badges

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

Comments

Krishna Rathore · Accepted Answer · 2018-08-28 13:57:51Z

1

You can use ngStyle for this.

Stackblitz Demo

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

answered Aug 28, 2018 at 13:57

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Collectives™ on Stack Overflow

Change div width based on condition in angular 6

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related