Angular 6: Добавление @Input к компоненту не работает

Question

Я должен что-то упустить @Inputпотому что я получаю эту ошибку от 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).

Мой шаблон содержит это:

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

И машинопись содержит это:

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) {}
}

Что мне здесь не хватает?

ОБНОВИТЬ

Следуя совету ниже, я полагаю, что поймал свою ошибку:

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

и в компоненте:

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

Answer 1

Если foobar - строка, добавьте запятую "foobar" и объявите Foobar в этом родительском компоненте. Так в шаблоне html родительского:

Должен быть в родительском:

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

И путь импорта ввода кажется неправильным или, может быть, это какая-то особенная вещь.