Skip to content

Commit

Permalink
docs: Add page for 'suffixNotSupported' diagnostic (angular#48315)
Browse files Browse the repository at this point in the history
Adds documentation page for `suffixNotSupported` extended diagnostic.

fixes angular#48290

PR Close angular#48315
  • Loading branch information
atscott authored and AndrewKushnir committed Dec 2, 2022
1 parent 6706fab commit 21952bb
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 0 deletions.
65 changes: 65 additions & 0 deletions aio/content/extended-diagnostics/NG8106.md
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 '&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
1 change: 1 addition & 0 deletions aio/content/extended-diagnostics/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

0 comments on commit 21952bb

Please sign in to comment.