title: Angular 6: Adding @Input to component doesn't work
body: <p>I must be missing something about <code>@Input</code>, because I get this error from Angular CLI:</p>
  
  <pre><code>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).
  </code></pre>
  
  <p>My template contains this:</p>
  
  <pre><code>&lt;button class="btn btn-primary btn-progress"
      (click)="startProgress($event)"
      [myInput]="foobar"&gt;TEST
  &lt;/button&gt;
  </code></pre>
  
  <p>And the typescript contains this:</p>
  
  <pre><code>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) {}
  }
  </code></pre>
  
  <p>What am I missing here?  </p>
  
  <h2>UPDATE</h2>
  
  <p>Following advice below, I believe I caught my error:</p>
  
  <p><code>&lt;app-progress-button [myInput]="'foobar'"&gt;&lt;/app-progress-button&gt;</code></p>
  
  <p>and in the component:</p>
  
  <pre><code>&lt;button class="btn btn-primary btn-progress"
      (click)="startProgress($event)"&gt;{{myInput}}
  &lt;/button&gt;
  </code></pre>