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

Question

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>

i don't get it , why are you using an input inside the same component? aren't u supposed to use that in a another component, then call it by it's markup tag just like ` ` — Yassine Ben Hamida, Jun 06 '18 at 15:11
i think you might be right here, I mean to add the input in the parent as in `` — Steve, Jun 06 '18 at 15:14

shortQuestion · Accepted Answer · 2018-06-06T15:45:17.213

4

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.

edited Jun 06 '18 at 15:45

answered Jun 06 '18 at 15:11

shortQuestion

473
2
16

import path was added automatically by VSCode. I'll edit it. – Steve Jun 06 '18 at 15:15
FYI - I just learned that the brackets in [myInput] cause it to expect an expression, so you have to use the single quotes inside the double quotes. Since you're passing in a string, it's better to use without the brackets and only enclose foobar in double quotes. See https://stackoverflow.com/questions/43633452/when-to-use-square-brackets-in-directives-inputs-and-when-not. – sfors says reinstate Monica Dec 19 '18 at 19:37
with 50% certaincy I guess its a constant than. So change detection will not rerender when myInput changes. – shortQuestion Dec 20 '18 at 08:57

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

UPDATE

1 Answers1