What is the point of the @angular-eslint/no-input-rename ESLint rule?

user_1679126 0
Viewed 3179

What is wrong with renaming an input property? If I have the following component

@Component({
  selector: 'sc-heading',
  templateUrl: './sc-heading.component.html',
  styleUrls: ['./sc-heading.component.scss']
})
export class ScHeadingComponent {
  @Input()
  title: string;

  @Input()
  class: string;

  @Input('columns')
  set columnsSet(value: string | number) {
    if (typeof value === 'string') {
      this.columns = parseInt(value, 10);
    } else {
      this.columns = value;
    }
  }
  columns = 1;
}

What is wrong with having an override for the columns property setter so it can take a string as an input and parse it? I have just switched over to angular-eslint and it has a rule @angular-eslint/no-input-rename which is causing this to error. I use this in multiple spots so I was wondering if there is anything wrong with this practice before I go and disable the rule.

angular
1 Answers

As described in Angular's Style Guide rules:

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.

user_6404280
Related