Angular 6: Adding @Input to component doesn't work

Steve picture Steve · Jun 6, 2018 · Viewed 12.6k times · Source

I must be missing something about @Input, because I get this error from Angular CLI:

ERROR in app/web/progress/progress-button/progress-button.component.ts(10,4): Error during template compile of 'ProgressButtonComponent'
Only initialized variables and constants can be referenced in decorators because the value of this variable is needed by the template compiler in 'Input'
'Input' is not initialized at ../@angular/core/src/metadata/directives.ts(855,22).

My template contains this:

<button class="btn btn-primary btn-progress"
    (click)="startProgress($event)"
    [myInput]="foobar">TEST
</button>

And the typescript contains this:

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

@Component({
  selector: 'app-progress-button',
  templateUrl: './progress-button.component.html',
  styles: []
})
export class ProgressButtonComponent implements OnInit {
  @Input() myInput: string;
  constructor() {}

  ngOnInit() {}

  startProgress(event) {}
}

What am I missing here?

UPDATE

Following advice below, I believe I caught my error:

<app-progress-button [myInput]="'foobar'"></app-progress-button>

and in the component:

<button class="btn btn-primary btn-progress"
    (click)="startProgress($event)">{{myInput}}
</button>

Answer

shortQuestion picture shortQuestion · Jun 6, 2018

If foobar is a string so add high comma "'foobar'" and declare Foobar in that parent component. So in template html of parent:

Should be in parent:

<app-child [myInput]="'foobar'"> </app-child>

And input import path seems to be wrong or maybe is some special thing there.