Using conditional operator in template statement

Question

In this code I'm trying to change transform property on an element. When I click on element one for the first time everything works -- element translates. When I click it again nothing changes. What am I missing?

<div id="one" (click)="two.style.transform = (two.style.transform == 'translate(-100vh)') ? 'translate(0vh)' : 'translate(-100vh)'"></div>   
<div id="two" #two></div>

Pardeep Jain · Accepted Answer · 2017-01-02 12:22:25Z

1

why this is working for first time

because first time assume two.style.transform == 'translate(-100vh)' is FALSE then it will run the condition translate(-100vh)

Why this is not working second time

because Second time condition two.style.transform == 'translate(-100vh)' is again FALSE then it will run again same condition translate(-100vh) so no effect is showing

For better clerification please run the follwing example

<div id="one" (click)="two.style.background = (two.style.background == 'grey') ? 'white' : 'red'">BB</div>   
<div id="two" #two>AA</div>

answered Jan 2, 2017 at 12:22

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

2 Comments

manidos Over a year ago

thank you, good sir! I still can't get it to work. Is there another way of doing this inside template? I mean, toggling from one state to another

ChrisG Over a year ago

@EugeneEpifanov This might be a little late, but you can always have the conditional resolve to a class using [ngClass]. <div id="one" [ngClass]="{'translateHeight': isTranslated}"> and then have a boolean in your component to store the state isTranslated and then in your css have the class with the transform .translateHeight { transform: translate(-100vh); }

Collectives™ on Stack Overflow

Using conditional operator in template statement

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related