forked from angular/angular
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: Add page for 'suffixNotSupported' diagnostic (angular#48315)
Adds documentation page for `suffixNotSupported` extended diagnostic. fixes angular#48290 PR Close angular#48315
- Loading branch information
1 parent
6706fab
commit 21952bb
Showing
2 changed files
with
66 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters