chore(components): Change event listeners to HostListener and template binding

Author: pmoleri

projects/igniteui-angular/src/lib/directives/button/button.directive.ts

@@ -3,12 +3,11 @@ import {
     ElementRef,
     EventEmitter,
     HostBinding,
+    HostListener,
     Input,
     Output,
     Renderer2,
     booleanAttribute,
-    AfterContentInit,
-    OnDestroy
 } from '@angular/core';
 import { mkenum } from '../../core/utils';
 import { IBaseEventArgs } from '../../core/utils';
@@ -47,7 +46,7 @@ export type IgxButtonType = typeof IgxButtonType[keyof typeof IgxButtonType];
     selector: '[igxButton]',
     standalone: true
 })
-export class IgxButtonDirective extends IgxButtonBaseDirective implements AfterContentInit, OnDestroy {
+export class IgxButtonDirective extends IgxButtonBaseDirective {
     private static ngAcceptInputType_type: IgxButtonType | '';
 
     /**
@@ -93,7 +92,8 @@ export class IgxButtonDirective extends IgxButtonBaseDirective implements AfterC
      */
     private _selected = false;
 
-    private emitSelected() {
+    @HostListener('click')
+    protected emitSelected() {
         this.buttonSelected.emit({
             button: this
         });
@@ -127,15 +127,6 @@ export class IgxButtonDirective extends IgxButtonBaseDirective implements AfterC
         super(element);
     }
 
-    public ngAfterContentInit() {
-        this.emitSelected = this.emitSelected.bind(this);
-        this.nativeElement.addEventListener('click', this.emitSelected);
-    }
-
-    public ngOnDestroy(): void {
-        this.nativeElement.removeEventListener('click', this.emitSelected);
-    }
-
     /**
      * Sets the type of the button.
      *

projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts

@@ -348,13 +348,13 @@ export class IgxTestScrollInertiaDirective extends IgxScrollInertiaDirective {
         <div #container style='width:calc(100% - 50px); height: 500px; float: left;'>
             <ng-template igxTestScrollInertia #scrInertiaContainer></ng-template>
         </div>
-        <div #scrBar [style.height]='height' style='overflow: auto; width: 50px; float:right;'>
+        <div #scrBar [style.height]='height' style='overflow: auto; width: 50px; float:right;' (scroll)="this.onScroll($event)">
             <div [style.height]='innerHeight' [style.width]='innerWidth'></div>
         </div>
     `,
     imports: [IgxTestScrollInertiaDirective]
 })
-export class ScrollInertiaComponent implements OnInit, OnDestroy {
+export class ScrollInertiaComponent implements OnInit {
     @ViewChild('container', { static: true }) public container: ElementRef;
     @ViewChild('scrBar', { static: true }) public scrollContainer: ElementRef;
     @ViewChild('scrInertiaContainer', { read: IgxTestScrollInertiaDirective, static: true })
@@ -370,9 +370,6 @@ export class ScrollInertiaComponent implements OnInit, OnDestroy {
 
    public ngOnInit() {
         this.scrInertiaDir.IgxScrollInertiaScrollContainer = this.scrollContainer.nativeElement;
-
-        this.onScroll = this.onScroll.bind(this);
-        this.scrollContainer.nativeElement.addEventListener('scroll', this.onScroll);
     }
 
     public onScroll(evt) {
@@ -386,8 +383,4 @@ export class ScrollInertiaComponent implements OnInit, OnDestroy {
         this.scrTopStepArray.push(calcScrollStep);
         this.scrLeftStepArray.push(calcScrollLeftStep);
     }
-
-    public ngOnDestroy(): void {
-        this.scrollContainer.nativeElement.removeEventListener('scroll', this.onScroll);
-    }
 }