На этот вопрос уже есть ответ здесь:

index.html:

  <app [myname]="some_name"></app>

app.component.ts:

  import {Component, Input, Output} from '@angular/core';

  @Component({
    selector: 'app',
    template: '<span>{{myname}}</span>'
  })

  export class CupBuyComponent {
      @Input() myname: String;

      constructor(){
          console.log(this.myname);
      }
  }

Консоль JS говорит не определено. Как я могу получить переменные из файла .html для отправки его компоненту?