Angular: Bind to an @Input alias
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;
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
You can implement it the following way :
@Input() appAvatarColor: string;