OPTION B: "Angular way" => Class (in Angular example, use this snippet inside AfterViewInit lifecycle hook)

medium-wc-article--output-option-b.js

// OPTION B: "Angular way" => Class
// In Angular example, use this snippet inside AfterViewInit lifecycle hook:
class MyAngularComponent implements AfterViewInit {
  
  // Through @ViewChild decorator, Angular will get the first element matches selector in the DOM
  @ViewChild('counter', { static: false }) counter;

  ngAfterViewInit() {
    // Angular-way
    this.counter.nativeElement
      .addEventListener('counter-clicked', this.myCallbackFunction);
  }
  
  myCallbackFunction() { ... }

}
  
/*
  In order to select the element into de DOM, we need to add the selector.
  
  HTML will be like:
  
    <click-counter #counter></click-counter>
    
  Where "@counter" is the selector used by @ViewChild decorator
*/