Pass HTML attribute value to function in angular 2

Question

I have a custom element that I just want to show when I click a button. Then, when I click that button, I want to do something like...:

<my-element [hidden]="switchHidden()"></my-element>

... so if it's in false, it now will be true, and viceversa. A very typical approach.

But I don't know how I can pass to my function "switchHidden()" the value of the "hidden" attribute. How can I do this, so I can check whether it is true or false?

Thank you!

Is the button you want to click to hide show custom element, inside custom element or outside? — Madhu Ranjan
– Madhu Ranjan, Commented Oct 31, 2016 at 15:49

Vlado Tesanovic · Accepted Answer · 2016-10-31 15:52:10Z

2

Don't use hidden attribute, use:

<my-element *ngIf="switchHidden"></my-element>

http://angularjs.blogspot.ba/2016/04/5-rookie-mistakes-to-avoid-with-angular.html

answered Oct 31, 2016 at 15:52

Vlado Tesanovic

6,4242 gold badges22 silver badges32 bronze badges

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

1 Comment

PiniH Over a year ago

That seems kinda stupid (sorry not meaning to be offensive), display:none, is so much more lightweight than creating and destroying DOM elements, if you have CSS problems, you can always add your own attribute CSS [hidden] { display: none !important; }

Logan H · Accepted Answer · 2016-10-31 15:55:16Z

1

PLUNKER Demo

Just have a variable in your component that is a boolean for when you want to show and hide it.

let showElement: Boolean = true;

Then when you want to toggle it on/off with a button put this in the click.

<button (click)="showElement = !showElement">Toggle</button>

and that will flip the value of showElement every time the user clicks the button. So if showElement is true, when the user clicks the button it will make showElement false and thus hidding your element. Vise versa for when showElement is false, the user clicks the button making it true and thus showing your element.

edited Oct 31, 2016 at 15:55

answered Oct 31, 2016 at 15:49

Logan H

3,4332 gold badges35 silver badges50 bronze badges

Collectives™ on Stack Overflow

Pass HTML attribute value to function in angular 2

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related