mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
docs: Add page for 'suffixNotSupported' diagnostic (#48315)
Adds documentation page for `suffixNotSupported` extended diagnostic. fixes #48290 PR Close #48315
This commit is contained in:
committed by
Andrew Kushnir
parent
6706fab017
commit
21952bbd0f
@@ -0,0 +1,65 @@
|
||||
@name Suffix not supported
|
||||
|
||||
@description
|
||||
|
||||
This diagnostic detects when the `.px`, `.%`, and `.em` suffixes are used with an attribute
|
||||
binding. These suffixes are only available for style bindings.
|
||||
|
||||
<code-example format="typescript" language="typescript">
|
||||
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
// This will result in @div width.px="5">@/div> in the DOM when the likely
|
||||
// intent is @div width="5px">@/div>
|
||||
template: `<div [attr.width.px]="5"></div>`,
|
||||
})
|
||||
class MyComponent {
|
||||
}
|
||||
|
||||
</code-example>
|
||||
|
||||
## What should I do instead?
|
||||
|
||||
Rather than using the `.px`, `.%`, or `.em` suffixes that are only supported in style bindings,
|
||||
move this to the value assignment of the binding.
|
||||
|
||||
<code-example format="typescript" language="typescript">
|
||||
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
template: `<div [attr.width]="'5px'"></div>`,
|
||||
})
|
||||
class MyComponent {
|
||||
}
|
||||
|
||||
</code-example>
|
||||
|
||||
## What if I can't avoid this?
|
||||
|
||||
This diagnostic can be disabled by editing the project's `tsconfig.json` file:
|
||||
|
||||
<code-example format="json" language="json">
|
||||
|
||||
{
|
||||
"angularCompilerOptions": {
|
||||
"extendedDiagnostics": {
|
||||
"checks": {
|
||||
"suffixNotSupported": "suppress"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</code-example>
|
||||
|
||||
See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
|
||||
|
||||
<!-- links -->
|
||||
|
||||
<!-- external links -->
|
||||
|
||||
<!-- end links -->
|
||||
|
||||
@reviewed 2022-02-28
|
||||
@@ -10,6 +10,7 @@ Currently, Angular supports the following extended diagnostics:
|
||||
|
||||
* [NG8101 - `invalidBananaInBox`](extended-diagnostics/NG8101)
|
||||
* [NG8102 - `nullishCoalescingNotNullable`](extended-diagnostics/NG8102)
|
||||
* [NG8106 - `suffixNotSupported`](extended-diagnostics/NG8106)
|
||||
|
||||
## Configuration
|
||||
|
||||
|
||||
Reference in New Issue
Block a user