docs: Add page for 'suffixNotSupported' diagnostic (#48315)

Adds documentation page for `suffixNotSupported` extended diagnostic.

fixes #48290

PR Close #48315
This commit is contained in:
Andrew Scott
2022-12-01 12:23:01 -08:00
committed by Andrew Kushnir
parent 6706fab017
commit 21952bbd0f
2 changed files with 66 additions and 0 deletions
@@ -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 '&commat;angular/core';
&commat;Component({
// This will result in &commat;div width.px="5">&commat;/div> in the DOM when the likely
// intent is &commat;div width="5px">&commat;/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 '&commat;angular/core';
&commat;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