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.

Aravind · Accepted Answer · 2017-03-18 19:44:47Z

5

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

edited Mar 18, 2017 at 19:44

answered Feb 18, 2017 at 20:53

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

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

1 Comment

Saadat Rizvi Over a year ago

Thanks a ton! Fixed my Issue. Although no such thing was mentioned in the book.

mickdev · Accepted Answer · 2017-02-18 20:51:51Z

5

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

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

answered Feb 18, 2017 at 20:51

mickdev

2,88514 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related