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 <my-component [myInput]="'foobar'" > </my-component> — Yassine Ben Hamida
– Yassine Ben Hamida, Commented Jun 6, 2018 at 15:11
i think you might be right here, I mean to add the input in the parent as in <app-progress-button [myInput]="foobar"></app-progress-button> — Steve
– Steve, Commented Jun 6, 2018 at 15:14

shortQuestion · Accepted Answer · 2018-06-06 15:45:17Z

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 6, 2018 at 15:45

answered Jun 6, 2018 at 15:11

shortQuestion

4933 silver badges18 bronze badges

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

3 Comments

Steve Over a year ago

import path was added automatically by VSCode. I'll edit it.

sfors says reinstate Monica Over a year ago

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 <app-child myInput="foobar"> </app-child> without the brackets and only enclose foobar in double quotes. See stackoverflow.com/questions/43633452/….

shortQuestion Over a year ago

with 50% certaincy I guess its a constant than. So change detection will not rerender <app-child> when myInput changes.

Collectives™ on Stack Overflow

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

UPDATE

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related