Angular using @HostListener to listen to specific click of button

Question

I am using Angular 10 and I am currently listening to a button click by id using jquery. I know this is not the right way to do this with Angular so I want to change it.

This is the current code:

$('#tbtn1').click((e) => {
  e.preventDefault(); 
  this.myMethod();
});

Can I use: @HostListener to listen to a specific button which is on another component as I can do with the example above?

How can I do this?

Answer 1

Here is the code and it works (ng-version="10.1.6"):

app.component.html -

<button (click)="onClick($event)">Demo Button</button>

app.component.ts ( extends other components) -

export class AppComponent extends DemoComponent {
    @HostListener('document:click', ['$event'])
    onClick(event: MouseEvent): void {
        event.preventDefault();
        this.myMethod();
    }
}

demo.component.ts -

myMethod() {
    console.log('myMethod working!!!');
}