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.

Did you read the error message before posting? It tells you what to do to get rid of the error ;) — AVJT82
– AVJT82, Commented Nov 4, 2017 at 7:29

BogdanC · Accepted Answer · 2017-11-04 07:26:57Z

8

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

answered Nov 4, 2017 at 7:26

BogdanC

2,7942 gold badges26 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Moaz Sarwar Over a year ago

That is actually not what I want to achieve.

komron · Accepted Answer · 2017-11-04 07:20:18Z

7

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.

edited Nov 4, 2017 at 7:20

answered Nov 4, 2017 at 7:13

komron

2,2773 gold badges19 silver badges27 bronze badges

Comments

Sygmoral · Accepted Answer · 2020-08-12 20:45:21Z

1

products: Product[];

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

answered Aug 12, 2020 at 20:45

Sygmoral

7,2012 gold badges27 silver badges33 bronze badges

Comments

Dumidu Pramith · Accepted Answer · 2022-08-28 19:02:57Z

1

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"
  }
}

]

answered Aug 28, 2022 at 19:02

Dumidu Pramith

4144 silver badges8 bronze badges

Comments

user20878572 · Accepted Answer · 2024-09-15 18:24:37Z

0

  @Input() product!: Product;

should fix it

answered Sep 15, 2024 at 18:24

user20878572

1

Collectives™ on Stack Overflow

TypeScript Error While Using @Input()

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related