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

Question

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.

Answer 1

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,
         .....
   };
}

Answer 2

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

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