47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
// #docregion
|
|
import { Component, Input, OnDestroy } from '@angular/core';
|
|
|
|
import { MissionService } from './mission.service';
|
|
import { Subscription } from 'rxjs/Subscription';
|
|
|
|
@Component({
|
|
selector: 'my-astronaut',
|
|
template: `
|
|
<p>
|
|
{{astronaut}}: <strong>{{mission}}</strong>
|
|
<button
|
|
(click)="confirm()"
|
|
[disabled]="!announced || confirmed">
|
|
Confirm
|
|
</button>
|
|
</p>
|
|
`
|
|
})
|
|
export class AstronautComponent implements OnDestroy {
|
|
@Input() astronaut: string;
|
|
mission = '<no mission announced>';
|
|
confirmed = false;
|
|
announced = false;
|
|
subscription: Subscription;
|
|
|
|
constructor(private missionService: MissionService) {
|
|
this.subscription = missionService.missionAnnounced$.subscribe(
|
|
mission => {
|
|
this.mission = mission;
|
|
this.announced = true;
|
|
this.confirmed = false;
|
|
});
|
|
}
|
|
|
|
confirm() {
|
|
this.confirmed = true;
|
|
this.missionService.confirmMission(this.astronaut);
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
// prevent memory leak when component destroyed
|
|
this.subscription.unsubscribe();
|
|
}
|
|
}
|
|
// #enddocregion
|