My current challenge involves handling an event coming from NgLoopDirective within the method EV of NgDNDirective. I am attempting to achieve this by passing the EventEmitter object by reference and then calling .subscribe() as shown in the code snippet below:
import { Directive, Input, ElementRef, Renderer2, EventEmitter } from '@angular/core';
@Directive({
selector: '[ngDN]'
})
export class NgDNDirective {
private dn: number = -1
private ev: EventEmitter<void>;
@Input() set ngDN(dn: number) {
this.dn = dn
}
@Input() set EV(ref: {ev: EventEmitter<void>}) {
console.log('waiting for ev')
ref.ev.subscribe(() => {
console.log('data-num:', this.dn)
this.renderer.setAttribute(this.elRef, 'data-num', this.dn.toString())
})
}
constructor(private elRef: ElementRef,
private renderer: Renderer2) {}
}
@Directive({
selector: '[ngLoop]'
})
export class NgLoopDirective {
@Input() set ngLoop(iter_count: number) {
this.container.clear()
for (let i=0; i<iter_count; i++) {
let ev: EventEmitter<void> = new EventEmitter<void>()
let ref = {ev: ev}
this.container.createEmbeddedView(this.template, {index: i, ev: ref})
ev.emit()
}
}
constructor(private template: TemplateRef<any>,
private container: ViewContainerRef) {}
}
Here is how the HTML code is implemented:
<ng-template [ngLoop]="10" let-i="index" let-ref="ev">
<a href="#" [ngDN]="i" [EV]="ref"></a>
</ng-template>
However, when debugging the code in the console, only the following message is displayed:
waiting for ev
This indicates that the event was not handled successfully since
console.log('data-num:', this.dn)What could be causing this issue?