Sema semagarcia

semagarcia / medium-wc-article--output-option-a.js

Created April 14, 2021 19:32

Option A: "standard way" => Class (in Angular example, use this snippet inside AfterViewInit lifecycle hook):

	// OPTION A: "standard way" => Class
	// In Angular example, use this snippet inside AfterViewInit lifecycle hook:
	class MyAngularComponent implements AfterViewInit {

	ngAfterViewInit() {
	// Standard-way
	document.querySelector('#clickCounter')
	.addEventListener('counter-clicked', this.myCallbackFunction);
	}

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

Created April 14, 2021 19:41

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

	// 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