Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular: Bind to an @Input alias

Tags:

angular

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?

like image 676
Doua Beri Avatar asked May 17 '17 19:05

Doua Beri


3 Answers

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

like image 158
yurzui Avatar answered Nov 20 '22 05:11

yurzui


You can implement it the following way :

@Input() appAvatarColor: string;
like image 36
Vijay Avatar answered Nov 20 '22 07:11

Vijay


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;

like image 5
gildniy Avatar answered Nov 20 '22 05:11

gildniy