From c93d02151aba019e81440559c158677dbbfdb387 Mon Sep 17 00:00:00 2001 From: SkyZeroZx <73321943+SkyZeroZx@users.noreply.github.com> Date: Mon, 17 Nov 2025 17:54:28 -0500 Subject: [PATCH] docs: replace @HostListener with host event bindings in attribute directives --- .../src/app/highlight.directive.2.ts | 12 +++++++++--- .../src/app/highlight.directive.3.ts | 10 +++++++--- .../src/app/highlight.directive.ts | 10 +++++++--- .../content/guide/components/host-elements.md | 2 +- .../guide/directives/attribute-directives.md | 16 ++++++++-------- 5 files changed, 32 insertions(+), 18 deletions(-) diff --git a/adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts b/adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts index 77f213e298d..198cfaa3ecc 100644 --- a/adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts +++ b/adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts @@ -1,21 +1,27 @@ // #docplaster // #docregion imports -import {Directive, ElementRef, HostListener, inject} from '@angular/core'; +import {Directive, ElementRef, inject} from '@angular/core'; // #enddocregion imports // #docregion +// #docregion decorator @Directive({ selector: '[appHighlight]', + host: { + '(mouseenter)': 'onMouseEnter()', + '(mouseleave)': 'onMouseLeave()', + }, }) +// #enddocregion decorator export class HighlightDirective { private el = inject(ElementRef); // #docregion mouse-methods - @HostListener('mouseenter') onMouseEnter() { + onMouseEnter() { this.highlight('yellow'); } - @HostListener('mouseleave') onMouseLeave() { + onMouseLeave() { this.highlight(''); } diff --git a/adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts b/adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts index d5f2dda4a8e..9fbd53aa352 100644 --- a/adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts +++ b/adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts @@ -1,9 +1,13 @@ // #docregion, imports -import {Directive, ElementRef, HostListener, inject, input} from '@angular/core'; +import {Directive, ElementRef, inject, input} from '@angular/core'; // #enddocregion imports @Directive({ selector: '[appHighlight]', + host: { + '(mouseenter)': 'onMouseEnter()', + '(mouseleave)': 'onMouseLeave()', + }, }) export class HighlightDirective { private el = inject(ElementRef); @@ -13,12 +17,12 @@ export class HighlightDirective { // #enddocregion input // #docregion mouse-enter - @HostListener('mouseenter') onMouseEnter() { + onMouseEnter() { this.highlight(this.appHighlight() || 'red'); } // #enddocregion mouse-enter - @HostListener('mouseleave') onMouseLeave() { + onMouseLeave() { this.highlight(''); } diff --git a/adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts b/adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts index 653bd8c5515..64c26e0b238 100644 --- a/adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts +++ b/adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts @@ -1,7 +1,11 @@ -import {Directive, ElementRef, HostListener, inject, input} from '@angular/core'; +import {Directive, ElementRef, inject, input} from '@angular/core'; @Directive({ selector: '[appHighlight]', + host: { + '(mouseenter)': 'onMouseEnter()', + '(mouseleave)': 'onMouseLeave()', + }, }) export class HighlightDirective { private el = inject(ElementRef); @@ -13,12 +17,12 @@ export class HighlightDirective { appHighlight = input(''); // #docregion mouse-enter - @HostListener('mouseenter') onMouseEnter() { + onMouseEnter() { this.highlight(this.appHighlight() || this.defaultColor() || 'red'); } // #enddocregion mouse-enter - @HostListener('mouseleave') onMouseLeave() { + onMouseLeave() { this.highlight(''); } diff --git a/adev/src/content/guide/components/host-elements.md b/adev/src/content/guide/components/host-elements.md index e52a09b52e4..38f5080b34c 100644 --- a/adev/src/content/guide/components/host-elements.md +++ b/adev/src/content/guide/components/host-elements.md @@ -48,7 +48,7 @@ the `host` property in the `@Component` decorator: 'role': 'slider', '[attr.aria-valuenow]': 'value', '[class.active]': 'isActive()', - '[style.background] : `hasError() ? 'red' : 'green'`, + '[style.background]' : `hasError() ? 'red' : 'green'`, '[tabIndex]': 'disabled ? -1 : 0', '(keydown)': 'updateValue($event)', }, diff --git a/adev/src/content/guide/directives/attribute-directives.md b/adev/src/content/guide/directives/attribute-directives.md index 90a479b1953..4d39ac94196 100644 --- a/adev/src/content/guide/directives/attribute-directives.md +++ b/adev/src/content/guide/directives/attribute-directives.md @@ -43,15 +43,15 @@ Angular creates an instance of the `HighlightDirective` class and injects a refe This section shows you how to detect when a user mouses into or out of the element and to respond by setting or clearing the highlight color. -1. Import `HostListener` from '@angular/core'. +1. Configure host event bindings using the `host` property in the `@Directive()` decorator. - + -1. Add two event handlers that respond when the mouse enters or leaves, each with the `@HostListener()` decorator. +1. Add two event handler methods, and map host element events to them via the `host` property. -Subscribe to events of the DOM element that hosts an attribute directive, the `

` in this case, with the `@HostListener()` decorator. +Subscribe to events of the DOM element that hosts an attribute directive (the `

` in this case) by configuring event listeners on the directive's [`host` property](guide/components/host-elements#binding-to-the-host-element). HELPFUL: The handlers delegate to a helper method, `highlight()`, that sets the color on the host DOM element, `el`. @@ -71,17 +71,17 @@ This section walks you through setting the highlight color while applying the `H -1. Add an `appHighlight` `input` property. +2. Add an `appHighlight` `input` property. The `input()` function adds metadata to the class that makes the directive's `appHighlight` property available for binding. -1. In `app.component.ts`, add a `color` property to the `AppComponent`. +3. In `app.component.ts`, add a `color` property to the `AppComponent`. -1. To simultaneously apply the directive and the color, use property binding with the `appHighlight` directive selector, setting it equal to `color`. +4. To simultaneously apply the directive and the color, use property binding with the `appHighlight` directive selector, setting it equal to `color`. @@ -113,7 +113,7 @@ This section guides you through adding radio buttons to bind your color choice t This section guides you through configuring your application so the developer can set the default color. -1. Add a second `Input()` property to `HighlightDirective` called `defaultColor`. +1. Add a second `input()` property to `HighlightDirective` called `defaultColor`.