CODEWITHSUNDEEP
angulartypescriptangularjs-directive
Moaz Sarwar
Moaz Sarwar

Reputation: 83

TypeScript Error While Using @Input()

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.

Upvotes: 8

Views: 5638

Answers (5)

user20878572
user20878572

Reputation: 1

  @Input() product!: Product;

should fix it

Upvotes: 0

Dumidu Pramith
Dumidu Pramith

Reputation: 414

in .eslintrc.json file under the rules section add these line

"@angular-eslint/no-input-rename": "off"

//Like That

"overrides": [
{
  "rules" : {
    "@angular-eslint/no-input-rename": "off"
  }
}

]

Upvotes: 1

Sygmoral
Sygmoral

Reputation: 7181

products: Product[];

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

Upvotes: 1

BogdanC
BogdanC

Reputation: 2784

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

Upvotes: 8

komron
komron

Reputation: 2277

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.

Upvotes: 7

Related Questions