Angular - execute code AFTER *ngIf has shown the element

Question

In my application I have a help section that is only visible when this.car.helpOpen property is true, and initially the property is false:

<ion-item *ngIf="car.helpOpen"> <div class="car-help-content" item-content> <img src="{{testURL}}" /> <p class="explanations" [innerHTML]="car.helpText"> </p> </div> </ion-item>

I have a method that changes the value of this.car.helpOpen to true and after that adds an event handler to all of the <a> elements(car.helpText contains <a> elements) inside the <p> element:

 toggleHelp(input){ input.helpOpen=!input.helpOpen; $("p.explanations").find("a").click(function(e){ alert(e.target.innerHTML); }); }

But I think that the attachment of event handlers is happening before the *ngIf actually shows the help section, and that's why the event handlers don't get attached. If I remove *ngIf completely and execute the function toggleHelp(), the handlers get attached.

Is there a way I can work around this?

Maybe there is a way to add the event handlers without using jQuery? (without changing the actual innerHTML of the element)

Instead of using toggleHelp create a directive / component for the explanations that does this for you on init — Explosion Pills
– Explosion Pills, Commented Jul 24, 2018 at 7:28
Do NOT use Angular and jQuery together. Soooo many people do this. Just don't. jQuery manipulates the DOM, while Angular generates it. jQuery is not aware of what Angular does, and Angular is not aware of what jQuery does. Using both together can only lead to clumsy and unmaintainable code, full of hacks and workarounds, not to mention that you have to load two libraries instead of one. — Jeremy Thille
– Jeremy Thille, Commented Jul 24, 2018 at 7:41
Jeremy - I'm aware of that, but I couldn't come up with another way to add an event handler to the <a> elements without changing the actual innerHTML of the p element. Also - if I just do that using plain JavaScript, it's the same thing. Is there an Angular way of doing something like that? — Green Mint
– Green Mint, Commented Jul 24, 2018 at 7:52

Muhammed Albarmavi · Accepted Answer · 2018-07-24 09:42:30Z

ngIf is a structural directive, it creates/destroys content inside the DOM. you can hide the elemnt by css like add class will make the display:none

What is the difference between *ngIf and [hidden]

You can add a click event to p elemnt and check the target element if it 's a this will look like add event listener to a element with pure javascript without jquery

template

<p [innerHTML]="html" (click)="toggleHelp({},$event)"></p>

toggleHelp function

 toggleHelp(input , e:MouseEvent) : void{ input.helpOpen=!input.helpOpen; console.log('event element',e); if ((e.target as HTMLElement).tagName === 'A') { let target = e.target as HTMLElement; // everything here will run if you click on a element alert(target.innerHTML) } }

stackblitz example

Collectives™ on Stack Overflow

Angular - execute code AFTER *ngIf has shown the element

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related