Clever Geek Handbook

Angular: bind to @Input alias

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

  @Input('appAvatarColor') name: string;

The program works, but I get this warning from TS Lint

the directive's input property should not be renamed

The directive selector is

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

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

+25


source to share


3 answers


You can disable the rule in tslint.json 

"no-input-rename": false

or disable checking only a certain line, for example:

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


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

  • Two names for the same property (one private, one public) are inherently confusing.

  • You must use an alias when the directive name is also an input property and the directive name does not describe the property.

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

+40


source


You can implement it like this:



@Input() appAvatarColor: string;
+21


source


You must rename @Input('appAvatarColor') name: string;

for something else to be different from the directive name. You can use a name @Input('avatarColor') name: string;

and then simplify it with@Input() avatarColor: string;

+4


source






More articles:


All Articles