Content-Length: 732737 | pFad | http://github.com/angular/angular/commit/a5f094c380fbb0b9d9b2cfd1a0721c12a1f4b786

49 docs: change host preference in style guide 06-03 · angular/angular@a5f094c · GitHub
Skip to content

Commit a5f094c

Browse files
rlmestrerlmestre
committed
docs: change host preference in style guide 06-03
1 parent c3b0095 commit a5f094c

File tree

12 files changed

+34
-83
lines changed

12 files changed

+34
-83
lines changed

Diff for: ‎adev/src/content/best-practices/style-guide.md

+5-12
Original file line numberDiff line numberDiff line change
@@ -752,26 +752,19 @@ An element may have more than one attribute directive applied.
752752

753753
<docs-code header="app/app.component.html" path="adev/src/content/examples/styleguide/src/06-01/app/app.component.html"/>
754754

755-
### `HostListener`/`HostBinding` decorators versus `host` metadata
755+
### `Host` metadata versus `HostListener`/`HostBinding` decorators
756756

757757
#### Style 06-03
758758

759-
**Consider** preferring the `@HostListener` and `@HostBinding` to the `host` property of the `@Directive` and `@Component` decorators.
760-
761-
**Do** be consistent in your choice.
759+
**Do** use the `host` property of the `@Directive` and `@Component` decorators instead of the `@HostListener` and `@HostBinding` decorators.
762760

763761
**Why**? <br />
764-
The property associated with `@HostBinding` or the method associated with `@HostListener` can be modified only in a single place &mdash;in the directive's class.
765-
If you use the `host` metadata property, you must modify both the property/method declaration in the directive's class and the metadata in the decorator associated with the directive.
766-
767-
<docs-code header="app/shared/validator.directive.ts" path="adev/src/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts"/>
768-
769-
Compare with the less preferred `host` metadata alternative.
762+
TypeScript preserves the type information of methods with decorators, and when one of the arguments for the method is a native Event type, this preserved type information can lead to runtime errors in non-browser environments (e.g., server-side pre-rendering).
770763

771764
**Why**? <br />
772-
The `host` metadata is only one term to remember and doesn't require extra ES imports.
765+
The `@HostListener` and `@HostBinding` decorators exist exclusively for backwards compatibility.
773766

774-
<docs-code header="app/shared/validator2.directive.ts" path="adev/src/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts"/>
767+
<docs-code header="app/shared/validator.directive.ts" path="adev/src/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts"/>
775768
## Services
776769

777770
### Services are singletons

Diff for: ‎adev/src/content/examples/styleguide/src/06-03/app/app.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ import { Component } from '@angular/core';
44
selector: 'sg-app',
55
template: `
66
<input type="text" tohValidator>
7-
<textarea tohValidator2></textarea>`
7+
<textarea tohValidator></textarea>`
88
})
99
export class AppComponent { }

Diff for: ‎adev/src/content/examples/styleguide/src/06-03/app/app.module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ import { NgModule } from '@angular/core';
22
import { RouterModule } from '@angular/router';
33

44
import { AppComponent } from './app.component';
5-
import { ValidatorDirective, Validator2Directive } from './shared';
5+
import { ValidatorDirective } from './shared';
66

77
@NgModule({
88
imports: [
99
RouterModule.forChild([{ path: '06-03', component: AppComponent }])
1010
],
1111
declarations: [
1212
AppComponent,
13-
ValidatorDirective, Validator2Directive
13+
ValidatorDirective
1414
],
1515
exports: [ AppComponent ]
1616
})

Diff for: ‎adev/src/content/examples/styleguide/src/06-03/app/shared/index.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
export * from './validator.directive';
2-
export * from './validator2.directive';

Diff for: ‎adev/src/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1+
/* eslint-disable @angular-eslint/no-host-metadata-property */
12
// #docregion
2-
import { Directive, HostBinding, HostListener } from '@angular/core';
3+
import { Directive } from '@angular/core';
34

45
@Directive({
56
standalone: true,
6-
selector: '[tohValidator]'
7+
selector: '[tohValidator]',
8+
host: {
9+
'[attr.role]': 'role',
10+
'(mouseenter)': 'onMouseEnter()'
11+
}
712
})
813
export class ValidatorDirective {
9-
@HostBinding('attr.role') role = 'button';
10-
@HostListener('mouseenter') onMouseEnter() {
14+
role = 'button';
15+
onMouseEnter() {
1116
// do work
1217
}
1318
}

Diff for: ‎adev/src/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts

-18
This file was deleted.

Diff for: ‎aio/content/examples/styleguide/src/06-03/app/app.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ import { Component } from '@angular/core';
44
selector: 'sg-app',
55
template: `
66
<input type="text" tohValidator>
7-
<textarea tohValidator2></textarea>`
7+
<textarea tohValidator></textarea>`
88
})
99
export class AppComponent { }

Diff for: ‎aio/content/examples/styleguide/src/06-03/app/app.module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ import { NgModule } from '@angular/core';
22
import { RouterModule } from '@angular/router';
33

44
import { AppComponent } from './app.component';
5-
import { ValidatorDirective, Validator2Directive } from './shared';
5+
import { ValidatorDirective } from './shared';
66

77
@NgModule({
88
imports: [
99
RouterModule.forChild([{ path: '06-03', component: AppComponent }])
1010
],
1111
declarations: [
1212
AppComponent,
13-
ValidatorDirective, Validator2Directive
13+
ValidatorDirective
1414
],
1515
exports: [ AppComponent ]
1616
})

Diff for: ‎aio/content/examples/styleguide/src/06-03/app/shared/index.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
export * from './validator.directive';
2-
export * from './validator2.directive';

Diff for: ‎aio/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
1+
/* eslint-disable @angular-eslint/no-host-metadata-property */
12
// #docregion
2-
import { Directive, HostBinding, HostListener } from '@angular/core';
3+
import { Directive } from '@angular/core';
34

45
@Directive({
5-
selector: '[tohValidator]'
6+
selector: '[tohValidator]',
7+
host: {
8+
'[attr.role]': 'role',
9+
'(mouseenter)': 'onMouseEnter()'
10+
}
611
})
712
export class ValidatorDirective {
8-
@HostBinding('attr.role') role = 'button';
9-
@HostListener('mouseenter') onMouseEnter() {
13+
role = 'button';
14+
onMouseEnter() {
1015
// do work
1116
}
1217
}

Diff for: ‎aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts

-17
This file was deleted.

Diff for: ‎aio/content/guide/styleguide.md

+5-20
Original file line numberDiff line numberDiff line change
@@ -1992,42 +1992,27 @@ An element may have more than one attribute directive applied.
19921992

19931993
<a id="06-03"></a>
19941994

1995-
### `HostListener`/`HostBinding` decorators versus `host` metadata
1995+
### `Host` metadata versus `HostListener`/`HostBinding` decorators
19961996

19971997
#### Style 06-03
19981998

1999-
<div class="s-rule consider">
2000-
2001-
**Consider** preferring the `@HostListener` and `@HostBinding` to the `host` property of the `@Directive` and `@Component` decorators.
2002-
2003-
</div>
2004-
20051999
<div class="s-rule do">
20062000

2007-
**Do** be consistent in your choice.
2001+
**Do** use the `host` property of the `@Directive` and `@Component` decorators instead of the `@HostListener` and `@HostBinding` decorators.
20082002

20092003
</div>
20102004

20112005
<div class="s-why-last">
20122006

20132007
**Why**? <br />
2014-
The property associated with `@HostBinding` or the method associated with `@HostListener` can be modified only in a single place &mdash;in the directive's class.
2015-
If you use the `host` metadata property, you must modify both the property/method declaration in the directive's class and the metadata in the decorator associated with the directive.
2016-
2017-
</div>
2018-
2019-
<code-example header="app/shared/validator.directive.ts" path="styleguide/src/06-03/app/shared/validator.directive.ts"></code-example>
2020-
2021-
Compare with the less preferred `host` metadata alternative.
2022-
2023-
<div class="s-why-last">
2008+
TypeScript preserves the type information of methods with decorators, and when one of the arguments for the method is a native Event type, this preserved type information can lead to runtime errors in non-browser environments (e.g., server-side pre-rendering).
20242009

20252010
**Why**? <br />
2026-
The `host` metadata is only one term to remember and doesn't require extra ES imports.
2011+
The `@HostListener` and `@HostBinding` decorators exist exclusively for backwards compatibility.
20272012

20282013
</div>
20292014

2030-
<code-example header="app/shared/validator2.directive.ts" path="styleguide/src/06-03/app/shared/validator2.directive.ts"></code-example>
2015+
<code-example header="app/shared/validator.directive.ts" path="styleguide/src/06-03/app/shared/validator.directive.ts"></code-example>
20312016

20322017
[Back to top](#toc)
20332018

0 commit comments

Comments
 (0)








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/angular/angular/commit/a5f094c380fbb0b9d9b2cfd1a0721c12a1f4b786

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy