I have a query regarding unsubscribing Outputs in Angular. While I am aware that EventEmitter is automatically cleaned up, there was a time when I needed to use an Observable as my Output. Specifically, I wanted to take an Output that emitted events at most once per second. This led me to write the following code:
@Output() loadNextEvent: Observable<any>;
loadNextSubject = new Subject();
constructor(private el: ElementRef) {
this.loadNextEvent = this.loadNextSubject.asObservable()
.throttleTime(1000); // emitting event once per second
}
emit() {
this.loadNextSubject.next('new event');
}
It seemed to work fine initially. However, the issue arose with unsubscribing. Despite finding a solution on StackOverflow, I still struggled with determining the correct approach. In my scenario:
@Output() loadNextEvent: Observable<any>;
loadNextSubject = new Subject();
constructor(private el: ElementRef) {
this.loadNextEvent = this.loadNextSubject.asObservable()
.takeUntil(this.loadNextSubject) // does this make sense?
.throttleTime(1000); // emitting event once per second
}
emit() {
this.loadNextSubject.next('new event');
}
ngOnDestroy() {
this.loadNextSubject.complete();
}
Question:
Is this the right way to unsubscribe from an observable Output? Does .takeUntil(this.loadNextSubject) serve any purpose? Or perhaps does .asObservable() ensure that the Observable is cleared when the Subject is completed? Can anyone provide guidance on resolving my dilemma or suggest a better alternative than using Observable as an Output in my case?