astronaut.component.ts

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

import { MissionService } from './mission.service';

import { DestroyableComponent, componentDestroyed } from 'ng2-rx-destroyable-component';

@DestroyableComponent
@Component({
  selector: 'my-astronaut',
  template: `
    <p>
      {{astronaut}}: <strong>{{mission}}</strong>
      <button
        (click)="confirm()"
        [disabled]="!announced || confirmed">
        Confirm
      </button>
    </p>
  `
})
export class AstronautComponent implements OnInit {
  @Input() astronaut: string;
  mission = '<no mission announced>';
  confirmed = false;
  announced = false;

  constructor(private _missionService: MissionService) {
  }

  ngOnInit() {
    this._missionService.missionAnnounced$
      .takeUntil(componentDestroyed(this))
      .subscribe(
        mission => {
          this.mission = mission;
          this.announced = true;
          this.confirmed = false;
        });
  }

  confirm() {
    this.confirmed = true;
    this._missionService.confirmMission(this.astronaut);
  }
}