Angular: Bind to an @Input alias

Question

I'm trying to set an input alias in a directive following this example

  @Input('appAvatarColor') name: string;

The program is working, but I'm receiving this warning from TS Lint

the directive input property should not be renamed

The directive selector is this

@Directive({
  selector: '[appAvatarColor]'
})

Am I doing something wrong?
Why is this considered a bad practice by default?

I suspect you have "no-input-rename": true rule in your tslint.json file — yurzui
– yurzui, Commented May 17, 2017 at 19:58
@yurzui yes. That's correct. I'm using the standard tslint.json generated by angular cli. My question is why is this considered a bad practice by default? — Doua Beri
– Doua Beri, Commented May 17, 2017 at 20:13
The accepted answer is now deprecated as we have eslint with Angular. I have added a new answer for eslint — Shashank Vivek
– Shashank Vivek, Commented Sep 27, 2022 at 9:03

yurzui · Accepted Answer · 2017-05-17 20:22:45Z

60

You can either turn off rule in tslint.json

"no-input-rename": false

or disable checking for only specific line like:

// tslint:disable-next-line:no-input-rename
@Input('appAvatarColor') name: string;

My question is why is this considered a bad practice by default?

Two names for the same property (one private, one public) is inherently confusing.
You should use an alias when the directive name is also an input property, and the directive name doesn't describe the property.

From https://angular.io/docs/ts/latest/guide/style-guide.html#!#05-13

edited May 17, 2017 at 20:22

answered May 17, 2017 at 20:04

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bvdb Over a year ago

for the "-input-rename, I can agree that renames are confusing, after all the type of the field remains the same externally/internally. But for @Output there is also a no-output-rename: true by default. And I find this logic harder to comprehend, because unlike inputs, it's not symetrical. e.g. Externally it looks like an event:(rowDeleted)="onRowDelete($event)", but internally it's not an event, but an EventEmitter. Naming it rowDeleted would make it look like a boolean. It make more sense to define it as @Output('rowDeleted') private rowDeletedEventEmitter;, right?

bvdb Over a year ago

Nevertheless, this is a great answer :). But curious about your opinion regarding the no-output-rename as well.

Denny Over a year ago

For eslint v8.2.0 write "no-input-rename": 0 Or you'll get Error: .eslintrc.json#overrides[0]:

Ben Racicot Over a year ago

Point 1: aliasing is typically done to solve inherently confusing binding names isnt it? Especially when forced to use a name eg.@Input('cdkListItemTemplate') item: TemplateRef<any>;

Nicholas K · Accepted Answer · 2018-12-09 16:24:51Z

33

You can implement it the following way :

@Input() appAvatarColor: string;

edited Dec 9, 2018 at 16:24

Nicholas K

15.4k8 gold badges35 silver badges59 bronze badges

answered May 17, 2017 at 20:10

Vijay

5966 silver badges17 bronze badges

1 Comment

pabloRN Over a year ago

I believe you are not adding a alias here, you are only declaring your variable as 'appAvatarColor' instead of 'name'

gildniy · Accepted Answer · 2018-12-07 09:37:24Z

5

You should rename @Input('appAvatarColor') name: string; to something else for this to differ from the directive name. You can do @Input('avatarColor') name: string; and then simplify it by @Input() avatarColor: string;

answered Dec 7, 2018 at 9:37

gildniy

3,9831 gold badge38 silver badges25 bronze badges

Comments

Shashank Vivek · Accepted Answer · 2022-09-27 09:02:17Z

4

With new Angular version, tslint is gone and we need to use eslint. For Eslint, you need to modify rules inside the .eslintrc.json file and add "@angular-eslint/no-input-rename" as below.

Example:

"rules": {
        // ..... some rules
        "@angular-eslint/no-input-rename": [
          "warn",
          { 
            "allowedNames": ["name"]
          }
        ],
       //.... more rules
     }

answered Sep 27, 2022 at 9:02

Shashank Vivek

17.6k9 gold badges70 silver badges110 bronze badges

1 Comment

Ben Racicot Over a year ago

Thank you @Shashank! Also "@angular-eslint/no-output-rename": "warn"

Ragnar · Accepted Answer · 2021-01-26 21:42:13Z

1

The right way to do it should be the following:

@Input() appAvatarColor: string;

answered Jan 26, 2021 at 21:42

Ragnar

4,6281 gold badge33 silver badges42 bronze badges

Collectives™ on Stack Overflow

Angular: Bind to an @Input alias

5 Answers 5

4 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related