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, Jul 24 '18 at 07: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, Jul 24 '18 at 07:41
Jeremy - I'm aware of that, but I couldn't come up with another way to add an event handler to the 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? — GeForce RTX 4090, Jul 24 '18 at 07:52
Possible duplicate of [Angular 2 innerHTML (click) binding](https://stackoverflow.com/questions/37676726/angular-2-innerhtml-click-binding) — Jeremy Thille, Jul 24 '18 at 07:58
I don't really see a clear answer in the provided thread. I don't need to dynamically add HTML content that contains event bindings - I need the tags to stay unchanged so that they can be sent back to the back-end and the event handlers need to be somehow added dynamically. If I perhaps didn't fully understand, you could provide a better explanation that suits this question better. — GeForce RTX 4090, Jul 24 '18 at 08:12
@gfels I have update my answer of a way to handle a click event while using *ngIf without jquery — Muhammed Albarmavi, Jul 24 '18 at 09:43
Possible duplicate of [Event to fire when an angular \*ngIf statement evaluates in template](https://stackoverflow.com/questions/44472771/event-to-fire-when-an-angular-ngif-statement-evaluates-in-template) — luiscla27, May 08 '19 at 00:37

Muhammed Albarmavi · Accepted Answer · 2018-07-24T09:42:30.940

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

Angular - execute code AFTER *ngIf has shown the element

1 Answers1