58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
// #docplaster
|
|
// #docregion vc
|
|
import { AfterViewInit, ViewChild } from '@angular/core';
|
|
// #docregion lv
|
|
import { Component } from '@angular/core';
|
|
import { CountdownTimerComponent } from './countdown-timer.component';
|
|
|
|
// #enddocregion lv
|
|
// #enddocregion vc
|
|
|
|
//// Local variable, #timer, version
|
|
// #docregion lv
|
|
@Component({
|
|
selector: 'app-countdown-parent-lv',
|
|
template: `
|
|
<h3>Countdown to Liftoff (via local variable)</h3>
|
|
<button (click)="timer.start()">Start</button>
|
|
<button (click)="timer.stop()">Stop</button>
|
|
<div class="seconds">{{timer.seconds}}</div>
|
|
<app-countdown-timer #timer></app-countdown-timer>
|
|
`,
|
|
styleUrls: ['../assets/demo.css']
|
|
})
|
|
export class CountdownLocalVarParentComponent { }
|
|
// #enddocregion lv
|
|
|
|
//// View Child version
|
|
// #docregion vc
|
|
@Component({
|
|
selector: 'app-countdown-parent-vc',
|
|
template: `
|
|
<h3>Countdown to Liftoff (via ViewChild)</h3>
|
|
<button (click)="start()">Start</button>
|
|
<button (click)="stop()">Stop</button>
|
|
<div class="seconds">{{ seconds() }}</div>
|
|
<app-countdown-timer></app-countdown-timer>
|
|
`,
|
|
styleUrls: ['../assets/demo.css']
|
|
})
|
|
export class CountdownViewChildParentComponent implements AfterViewInit {
|
|
|
|
@ViewChild(CountdownTimerComponent)
|
|
private timerComponent: CountdownTimerComponent;
|
|
|
|
seconds() { return 0; }
|
|
|
|
ngAfterViewInit() {
|
|
// Redefine `seconds()` to get from the `CountdownTimerComponent.seconds` ...
|
|
// but wait a tick first to avoid one-time devMode
|
|
// unidirectional-data-flow-violation error
|
|
setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0);
|
|
}
|
|
|
|
start() { this.timerComponent.start(); }
|
|
stop() { this.timerComponent.stop(); }
|
|
}
|
|
// #enddocregion vc
|