Listen to click event on Angular component

Question

How to listen to click event on the component and call a method on the component?

Ex -

Component

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <div>Hello my name is {{name}}. </div>
   `
})
export class MyComponent {
  name = "Aj"
}

HTML -

<my-component></my-component> // user clicks here

Now how do I listen to click on the component itself?

Answer 1

Use HostListener in your component. The answer given by Ploppy works, but Angular tells you to use HostListener in your component instead like this

import { HostListener  } from "@angular/core";

@Component({
  [...]
})
export class MyComponent {

  @HostListener("click") onClick(){
    console.log("User Click using Host Listener")
  }

}

Answer 2

Update: Rahul Singh has the right answer

---

Use the host property of the @Component decorator:

@Component({
  ...,
  host: { '(click)': 'onClick()'}
})

export class MyComponent {
  private onClick() {
    console.log('onClick');
  }
}