2015-11-21 14:23:40 -05:00
|
|
|
// #docregion
|
2016-05-03 08:06:32 -04:00
|
|
|
import { Component } from '@angular/core';
|
|
|
|
|
|
|
|
import { LoggerService } from './logger.service';
|
2015-11-21 14:23:40 -05:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'peek-a-boo-parent',
|
|
|
|
template: `
|
|
|
|
<div class="parent">
|
|
|
|
<h2>Peek-A-Boo</h2>
|
|
|
|
|
|
|
|
<button (click)="toggleChild()">
|
|
|
|
{{hasChild ? 'Destroy' : 'Create'}} PeekABooComponent
|
|
|
|
</button>
|
|
|
|
<button (click)="updateHero()" [hidden]="!hasChild">Update Hero</button>
|
|
|
|
|
|
|
|
<peek-a-boo *ngIf="hasChild" [name]="heroName">
|
|
|
|
</peek-a-boo>
|
|
|
|
|
|
|
|
<h4>-- Lifecycle Hook Log --</h4>
|
2016-04-28 20:36:35 -04:00
|
|
|
<div *ngFor="let msg of hookLog">{{msg}}</div>
|
2015-11-21 14:23:40 -05:00
|
|
|
</div>
|
|
|
|
`,
|
2016-01-23 13:21:09 -05:00
|
|
|
styles: ['.parent {background: moccasin}'],
|
2016-08-09 12:38:25 -04:00
|
|
|
providers: [ LoggerService ]
|
2015-11-21 14:23:40 -05:00
|
|
|
})
|
|
|
|
export class PeekABooParentComponent {
|
|
|
|
|
|
|
|
hasChild = false;
|
2016-04-27 14:28:22 -04:00
|
|
|
hookLog: string[];
|
2015-11-21 14:23:40 -05:00
|
|
|
|
|
|
|
heroName = 'Windstorm';
|
2016-05-03 08:06:32 -04:00
|
|
|
private logger: LoggerService;
|
2015-11-21 14:23:40 -05:00
|
|
|
|
2016-04-27 14:28:22 -04:00
|
|
|
constructor(logger: LoggerService) {
|
2016-05-03 08:06:32 -04:00
|
|
|
this.logger = logger;
|
2015-11-21 14:23:40 -05:00
|
|
|
this.hookLog = logger.logs;
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleChild() {
|
|
|
|
this.hasChild = !this.hasChild;
|
|
|
|
if (this.hasChild) {
|
|
|
|
this.heroName = 'Windstorm';
|
2016-05-03 08:06:32 -04:00
|
|
|
this.logger.clear(); // clear log on create
|
2015-11-21 14:23:40 -05:00
|
|
|
}
|
2016-05-03 08:06:32 -04:00
|
|
|
this.logger.tick();
|
2015-11-21 14:23:40 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
updateHero() {
|
|
|
|
this.heroName += '!';
|
2016-05-03 08:06:32 -04:00
|
|
|
this.logger.tick();
|
2015-11-21 14:23:40 -05:00
|
|
|
}
|
|
|
|
}
|