refactor: migrate @HostBinding usage to host property of in the @Comp…

…onent/@directive decorator
bluehalo · Sep 13, 2024 · a8a7c67 · a8a7c67
1 parent 9485b20
commit a8a7c67
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 21 deletions.
diff --git a/src/app/common/link-accessibility.directive.ts b/src/app/common/link-accessibility.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, Renderer2, inject } from '@angular/core';
+import { Directive, ElementRef, Renderer2, inject } from '@angular/core';
 
 /**
  * Used to enable link for keyboard accessibility.
@@ -8,7 +8,10 @@ import { Directive, ElementRef, HostListener, Renderer2, inject } from '@angular
  */
 @Directive({
 	selector: '[linkAccessibility]',
-	standalone: true
+	standalone: true,
+	host: {
+		'(keydown.enter)': 'onEnter($event)'
+	}
 })
 export class LinkAccessibilityDirective {
 	private elRef = inject(ElementRef);
@@ -19,7 +22,6 @@ export class LinkAccessibilityDirective {
 		this.renderer.setAttribute(el, 'tabIndex', '0');
 	}
 
-	@HostListener('keydown.enter', ['$event'])
 	onEnter(event: Event) {
 		event.target?.dispatchEvent(new Event('click'));
 	}

diff --git a/src/app/common/multi-select.directive.ts b/src/app/common/multi-select.directive.ts
@@ -14,7 +14,6 @@ import { NgSelectComponent } from '@ng-select/ng-select';
 @Directive({
 	selector: 'ng-select[multi-select]',
 	standalone: true,
-	// eslint-disable-next-line @angular-eslint/no-host-metadata-property
 	host: {
 		['class.ng-hide-arrow-wrapper']: 'hideArrow()'
 	}

diff --git a/src/app/common/table/filter/asy-abstract-header-filter.component.ts b/src/app/common/table/filter/asy-abstract-header-filter.component.ts
@@ -2,7 +2,6 @@ import {
 	AfterViewInit,
 	ChangeDetectorRef,
 	Directive,
-	HostListener,
 	Input,
 	OnDestroy,
 	OnInit,
@@ -20,7 +19,12 @@ export interface AsyFilterHeaderColumnDef {
 	name: string;
 }
 
-@Directive({ standalone: true })
+@Directive({
+	standalone: true,
+	host: {
+		'(click)': '_handleClick($event)'
+	}
+})
 export abstract class AsyAbstractHeaderFilterComponent<T>
 	implements AsyFilterable, AfterViewInit, OnDestroy, OnInit
 {
@@ -104,7 +108,6 @@ export abstract class AsyAbstractHeaderFilterComponent<T>
 	/**
 	 * Stop click event propagation to prevent sorting from being updated
 	 */
-	@HostListener('click', ['$event'])
 	_handleClick(event: Event) {
 		event.stopPropagation();
 	}

diff --git a/src/app/common/table/filter/asy-filter.directive.ts b/src/app/common/table/filter/asy-filter.directive.ts
@@ -14,7 +14,6 @@ export interface AsyFilterable {
 @Directive({
 	selector: '[asyFilter]',
 	exportAs: 'asyFilter',
-	// eslint-disable-next-line @angular-eslint/no-host-metadata-property
 	host: { class: 'asy-filter' },
 	standalone: true
 })

diff --git a/src/app/common/table/sidebar/sidebar.component.ts b/src/app/common/table/sidebar/sidebar.component.ts
@@ -6,7 +6,6 @@ import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 	selector: 'asy-sidebar',
 	templateUrl: './sidebar.component.html',
 	styleUrls: ['./sidebar.component.scss'],
-	// eslint-disable-next-line @angular-eslint/no-host-metadata-property
 	host: {
 		class: 'sidebar',
 		'[class.sidebar-open]': 'open()',

diff --git a/src/app/common/table/sort/asy-sort.directive.ts b/src/app/common/table/sort/asy-sort.directive.ts
@@ -12,7 +12,6 @@ export interface AsySortable {
 @Directive({
 	selector: '[asySort]',
 	exportAs: 'asySort',
-	// eslint-disable-next-line @angular-eslint/no-host-metadata-property
 	host: { class: 'asy-sort' },
 	standalone: true
 })

diff --git a/src/app/core/messages/view-all-messages/view-all-messages.component.ts b/src/app/core/messages/view-all-messages/view-all-messages.component.ts
@@ -1,13 +1,5 @@
 import { DOCUMENT, LowerCasePipe, NgClass } from '@angular/common';
-import {
-	Component,
-	DestroyRef,
-	HostListener,
-	OnInit,
-	inject,
-	signal,
-	viewChild
-} from '@angular/core';
+import { Component, DestroyRef, OnInit, inject, signal, viewChild } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { WINDOW } from '@ng-web-apis/common';
@@ -23,7 +15,10 @@ import { MessageService } from '../message.service';
 	templateUrl: './view-all-messages.component.html',
 	styleUrls: ['./view-all-messages.component.scss'],
 	standalone: true,
-	imports: [SystemAlertComponent, SearchInputComponent, NgClass, LowerCasePipe, AgoDatePipe]
+	imports: [SystemAlertComponent, SearchInputComponent, NgClass, LowerCasePipe, AgoDatePipe],
+	host: {
+		'(window:scroll)': 'onScroll()'
+	}
 })
 export class ViewAllMessagesComponent implements OnInit {
 	readonly #destroyRef = inject(DestroyRef);
@@ -52,7 +47,6 @@ export class ViewAllMessagesComponent implements OnInit {
 			});
 	}
 
-	@HostListener('window:scroll')
 	onScroll() {
 		// If at the bottom of the page, load more messages
 		if (