Angular 4 - Bind jQuery event (click) after *ngfor created dynamic components

Question

I have a situation whereby the below code in my viewasd

    <div class="item" *ngFor="let property of propertiesRecent; let i=index">
       <app-property [property]="property" (propertyCreated)="onPropertyCreated()"></app-property></div>

Now app-property looks something like this:

 <span class="col-lg-2 socialShare">
<fa name="share-alt" size="3"></fa>
</span>

I want to bind a jquery event on the above but once the DOM has updated after the value of propertiesRecent is updated I loose the jquery click event listner..

$('.socialShareIcons').hide()

How I do this? If you check the ngFor I tried custom event, I tried AfterViewChecked both in app-property component but did not help...

Why are you using Jquery here? Need to know more details about this question. — Srinivas Valekar
– Srinivas Valekar, Commented Nov 23, 2017 at 22:12
What element has the socialShareIcons class? Why not use angular events? — LLai
– LLai, Commented Nov 24, 2017 at 1:22

Oleksandr Poshtaruk · Accepted Answer · 2017-11-24 11:42:07Z

1

Had a similar problem, Here is a link on github with provided solution and respective discussion

In short:

<div #label *ngFor="...

Component:
Class SuperComponent {
ViewChild('label')
public label: any;
...
ngAfterViewInit() {
this.handleEndOfNgfor();
this.label.changes.subscribe(()=>this.handleEndOfNgfor());
}
private handleEndOfNgfor() 
console.log('hooray!');
}
}

answered Nov 24, 2017 at 11:42

Oleksandr Poshtaruk

2,20618 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Angular 4 - Bind jQuery event (click) after *ngfor created dynamic components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related