CODEWITHSUNDEEP
angulartypescriptangular2-inputs
Saadat Rizvi
Saadat Rizvi

Reputation: 69

Uncaught Reference Input is not defined- @Input() not working in Angular 2

I am a newbie trying to learn Angular2 from ng-book 2(v49). Here are the contents of article.componenets.ts file:

import { Component, OnInit } from '@angular/core';
import { Article } from './article.model';

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
 styleUrls: ['./article.component.css'],
 host: {
 class: 'row'
 }
})
export class ArticleComponent implements OnInit {
  @Input() article: Article;



  voteUp(): boolean {
    this.article.voteUp();
    return false;
  }

  voteDown(): boolean {
    this.article.voteDown();
    return false;
  }

  ngOnInit() {
  }

}

Here is the error on the angular-cli:

ERROR in C:/Users/saad/Desktop/books/Angular JS2/angular2Reddit/src/app/article/article.component.ts (13,4): Cannot find name 'Input'.)
webpack: Failed to compile.

Console Error

Upvotes: 3

Views: 8553

Answers (2)

Aravind
Aravind

Reputation: 41533

You are missing import for the Input directive, so change the first line as 

import { Component, OnInit, Input } from '@angular/core';

It is good practice to have the @Input parameters with some value else you will end up getting Unhandled promise error some where in your application.

For that it can be defined inside your ngOnInit or constructor

ngOnInit() {
   this.article={
         id: 0
         .....
   };
}

or

constructor(....) {
   this.article={
         id: 0,
         .....
   };
}

Upvotes: 5

mickdev
mickdev

Reputation: 2885

You have to import Input if you want to use it :

import { Component, OnInit, Input } from '@angular/core';

Upvotes: 5

Related Questions