angular javascript document and window functions best practice-CodePudding

In angular component.ts I use ngOnInit function to implement Javascript document and window functions.

for example :

ngOnInit(): void {
  document.addEventListener('mouseup', () => {
    this.isRatingPopupActive = false;
  });
}

this is part of my code to close opened popup after mouseup similar to facebook like button .. is this right?

and if it is wrong to use onInit this way, what is the best practice then?

thank you all <3

CodePudding user response：

In Angular, the common pattern to handle DOM events is using HostListener

Instead of using ngOnInit, declare the HostListener directive inside your class like this:

 @HostListener('window:mouseup', ['$event'])
 handleMouseUp(event){
   console.log("mouseup");
 }