CODEWITHSUNDEEP
angulartypescriptangular-components
Shoeb Surya
Shoeb Surya

Reputation: 95

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

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...

Upvotes: 0

Views: 866

Answers (1)

Oleksandr Poshtaruk
Oleksandr Poshtaruk

Reputation: 2146

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!');
}
}

Upvotes: 1

Related Questions