Cannot find name 'Input'.ts(2304) [closed]

Question

I wanted to use angular data-binding and the Input decorator to get input values from a component to another given child component.

I have a minimal example to show you how i wanted to accomplish this task:

Parent template:

<h4>Passing value of input element to child component:</h4>
<input [ngModel]="name" (ngModelChange)="name = $event">
<p>{{name}}</p>
<hello [name]="name"></hello>

Parent component:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = '';
}

Child component:

@Component({
  selector: 'hello',
  template: `<h4>Passed : "{{ name }}" to child component!</h4>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
}

this seems to work fine enough on stackblitz: https://stackblitz.com/edit/angular-pggcbd

But my Local typescript compiler responds:

Cannot find name 'Input'.ts(2304)

and marks the @Input() decorators. any ideas?

Answer 1

It's just missing or incorrect import.

Add the import to import { Component, Input } from '@angular/core'