Angular component has click listener attribute

Issue

How can I know within my-component, if the parent listens to the click event (A) or not (B).

Case A:

<my-component (click)="onClick()"></my-component>

Case B:

<my-component></my-component>

Definition:

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent {
  @???()
  hostHasClickListener: boolean;   // I want to know this within my component
}

Thank you!

Solution

You can achieve this by using an @Output with click as the name. This forces the consumers to bind their function to this click when they use (click)="Blah()" in the HTML.

this.click.observed return true when click is used in the HTML.

mycomponent.component.ts

@Component({
  ...
})
export MyComponent implements OnInit {

  @Output()
  public click = new EventEmitter();
  
  private _hasClick = false;

  public ngOnInit() {
     
     this._hasClick = this.click.observed;

     if(this._hasClick) {
       // do something here.
     }

  }
}

Answered By - skouch2022