TypeScript Error While Using @Input()

Question

I am trying to develop an app using Angular 4. But I have received an error message while using

@Input('inputProducts') products: Product[];

The Error is

[tslint] In the class "ProductListComponent", the directive input property "products" should not be renamed.Please, consider the following use "@Input() products: string" (no-input-rename).

The Error Does Not Have any Effect and My App is working fine but it is annoying and am unable to remove it. Code Snippet is Given Below:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Product } from '../product-row/product.model';
@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
  @Input('inputProducts') products: Product[];
  @Output() selectedProduct: EventEmitter<Product>;
  constructor() {
    this.selectedProduct = new EventEmitter();
  }
  clickedProduct(p: Product): boolean {
    this.selectedProduct.emit(p);
    return false;
  }
  ngOnInit() {
  }
}

the html part

<app-product-list [inputProducts]="products"></app-product-list>

Please Point me towards right direction to remove this error.

Answer 1

@Input() inputProducts: Product[]; should fix your problem.

Answer 2

It's styleguide, no-input-rename the rule that you should set to false not to get such tslint error. no-input-rename is set to true usually when you generate your project with Angular CLI. Go to your tslint file and make it's value equal to false. Should look something like: "no-input-rename": false.

Answer 3

products: Product[];

@Input('inputProducts')
set productsFromInput(projects: Project[]) {
  this.products = products;
}