Ensures that input bindings are not aliased
-
Type: suggestion
-
🔧 Supports autofix (
--fix
) -
💡 Provides suggestions on how to fix issues (https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions)
The rule accepts an options object with the following properties:
interface Options {
/**
* A list with allowed input names
*
* Default: `[]`
*/
allowedNames?: string[];
}
The following examples are generated automatically from the actual unit tests within the plugin, so you can be assured that their behavior is accurate based on the current commit.
❌ - Toggle examples of incorrect code for this rule
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Component({
inputs: ['a: b']
~~~~~~
})
class Test {}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error",
{
"allowedNames": [
"check",
"test"
]
}
]
}
}
@Directive({
outputs: ['abort'],
'inputs': [boundary, `test: copy`, 'check: check'],
~~~~~~~~~~~~
})
class Test {}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Component({
['inputs']: ['orientation: orientation'],
~~~~~~~~~~~~~~~~~~~~~~~~~~
})
class Test {}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Directive({
[`inputs`]: ['orientation: orientation'],
~~~~~~~~~~~~~~~~~~~~~~~~~~
})
class Test {}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Component()
class Test {
@Custom() @Input(`change`) _change = getInput();
~~~~~~~~
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Directive()
class Test {
@Input('change') change = (this.subject$ as Subject<{blur: boolean}>).pipe();
~~~~~~~~
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Directive({
selector: 'foo'
})
class Test {
@Input('aria-invalid') ariaBusy: string;
~~~~~~~~~~~~~~
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Component({
selector: 'foo'
})
class Test {
@Input('fooColor') colors: string;
~~~~~~~~~~
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Directive({
'selector': 'foo'
})
class Test {
@Input('foocolor') color: string;
~~~~~~~~~~
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Component({
selector: 'click',
})
class Test {}
@Injectable()
class Test {
@Input('click') blur = this.getInput();
~~~~~~~
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Directive({
selector: 'img[fooDirective]',
})
class Test {
@Input('notFooDirective') foo: Foo;
~~~~~~~~~~~~~~~~~
}
✅ - Toggle examples of correct code for this rule
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
class Test {}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Page({
inputs: ['play', popstate, `online`, 'obsolete: obsol', 'store: storage'],
})
class Test {}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Component()
class Test {
change = new EventEmitter();
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Directive()
class Test {
@Input() buttonChange = new EventEmitter<'change'>();
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Component({
inputs,
})
class Test {}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Directive({
inputs: [...test],
})
class Test {}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Component({
inputs: func(),
})
class Test {}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Directive({
inputs: [func(), 'a'],
})
class Test {}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Component({})
class Test {
@Input() set setter(setter: string) {}
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error",
{
"allowedNames": [
"aria-wrong"
]
}
]
}
}
@Component({
inputs: ['foo: aria-wrong']
})
class Test {
@Input('aria-wrong') set setter(setter: string) {}
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
const change = 'change';
@Component()
class Test {
@Input(change) touchMove: EventEmitter<{ action: 'click' | 'close' }> = new EventEmitter<{ action: 'click' | 'close' }>();
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
const blur = 'blur';
const click = 'click';
@Directive()
class Test {
@Input(blur) [click]: EventEmitter<Blur>;
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Component({
selector: 'foo[bar]'
})
class Test {
@Input() bar: string;
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Component({
selector: '[foo], test',
})
class Test {
@Input('foo') label: string;
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Directive({
selector: 'foo'
})
class Test {
@Input('aria-label') ariaLabel: string;
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error",
{
"allowedNames": [
"allowedName"
]
}
]
}
}
@Component({
inputs: ['foo: allowedName']
})
class Test {
@Input() bar: string;
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Directive({
selector: 'foo'
})
class Test {
@Input('fooMyColor') myColor: string;
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Directive({
selector: 'img[fooDirective]'
})
class Test {
@Input foo: Foo;
}
{
"rules": {
"@angular-eslint/no-input-rename": [
"error"
]
}
}
@Directive({
selector: 'img[fooDirective]'
})
class Test {
@Input('fooDirective') foo: Foo;
}