From 0f2da4bc65047c425425ed69ec671487593f4e33 Mon Sep 17 00:00:00 2001 From: John Rassa Date: Fri, 13 Sep 2024 09:07:47 -0400 Subject: [PATCH] refactor: migrate @HostBinding usage to host property of in the @Component/@Directive decorator --- src/app/common/link-accessibility.directive.ts | 8 +++++--- src/app/common/multi-select.directive.ts | 1 - .../asy-abstract-header-filter.component.ts | 9 ++++++--- .../common/table/filter/asy-filter.directive.ts | 1 - .../common/table/sidebar/sidebar.component.ts | 1 - src/app/common/table/sort/asy-sort.directive.ts | 1 - .../view-all-messages.component.ts | 16 +++++----------- 7 files changed, 16 insertions(+), 21 deletions(-) diff --git a/src/app/common/link-accessibility.directive.ts b/src/app/common/link-accessibility.directive.ts index 379eead1..20607067 100644 --- 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 index 2e7edf32..d18f4b41 100644 --- 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 index f8722da8..314be2e2 100644 --- 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 implements AsyFilterable, AfterViewInit, OnDestroy, OnInit { @@ -104,7 +108,6 @@ export abstract class AsyAbstractHeaderFilterComponent /** * 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 index 44b0deda..b8c6e5c9 100644 --- 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 index 132917a6..9a61d9d8 100644 --- 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 index 2cf81114..9f65b237 100644 --- 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 index 12a1b13a..f19a4c17 100644 --- 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 (