1383 lines
43 KiB
HTML
1383 lines
43 KiB
HTML
<html lang="en"><head></head><body>
|
|
<form id="mainForm" method="post" action="https://run.stackblitz.com/api/angular/v1?file=src/app/app.component.html" target="_self"><input type="hidden" name="files[src/app/after-content-parent.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
import { LoggerService } from './logger.service';
|
|
|
|
@Component({
|
|
selector: 'after-content-parent',
|
|
template: `
|
|
<div class="parent">
|
|
<h2>AfterContent</h2>
|
|
|
|
<div *ngIf="show">` +
|
|
`<after-content>
|
|
<app-child></app-child>
|
|
</after-content>`
|
|
+ `</div>
|
|
|
|
<h4>-- AfterContent Logs --</h4>
|
|
<p><button (click)="reset()">Reset</button></p>
|
|
<div *ngFor="let msg of logger.logs">{{msg}}</div>
|
|
</div>
|
|
`,
|
|
styles: ['.parent {background: burlywood}'],
|
|
providers: [LoggerService]
|
|
})
|
|
export class AfterContentParentComponent {
|
|
show = true;
|
|
|
|
constructor(public logger: LoggerService) { }
|
|
|
|
reset() {
|
|
this.logger.clear();
|
|
// quickly remove and reload AfterContentComponent which recreates it
|
|
this.show = false;
|
|
this.logger.tick_then(() => this.show = true);
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/after-content.component.ts]" value="import { AfterContentChecked, AfterContentInit, Component, ContentChild } from '@angular/core';
|
|
|
|
import { ChildComponent } from './child.component';
|
|
import { LoggerService } from './logger.service';
|
|
|
|
@Component({
|
|
selector: 'after-content',
|
|
template: `
|
|
<div>-- projected content begins --</div>
|
|
<ng-content></ng-content>
|
|
<div>-- projected content ends --</div>`
|
|
+ `
|
|
<p *ngIf="comment" class="comment">
|
|
{{comment}}
|
|
</p>
|
|
`
|
|
})
|
|
export class AfterContentComponent implements AfterContentChecked, AfterContentInit {
|
|
private prevHero = '';
|
|
comment = '';
|
|
|
|
// Query for a CONTENT child of type `ChildComponent`
|
|
@ContentChild(ChildComponent) contentChild: ChildComponent;
|
|
|
|
constructor(private logger: LoggerService) {
|
|
this.logIt('AfterContent constructor');
|
|
}
|
|
|
|
ngAfterContentInit() {
|
|
// contentChild is set after the content has been initialized
|
|
this.logIt('AfterContentInit');
|
|
this.doSomething();
|
|
}
|
|
|
|
ngAfterContentChecked() {
|
|
// contentChild is updated after the content has been checked
|
|
if (this.prevHero === this.contentChild.hero) {
|
|
this.logIt('AfterContentChecked (no change)');
|
|
} else {
|
|
this.prevHero = this.contentChild.hero;
|
|
this.logIt('AfterContentChecked');
|
|
this.doSomething();
|
|
}
|
|
}
|
|
|
|
// This surrogate for real business logic sets the `comment`
|
|
private doSomething() {
|
|
this.comment = this.contentChild.hero.length > 10 ? `That's a long name` : '';
|
|
}
|
|
|
|
private logIt(method: string) {
|
|
const child = this.contentChild;
|
|
const message = `${method}: ${child ? child.hero : 'no'} child content`;
|
|
this.logger.log(message);
|
|
}
|
|
// ...
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/after-view-parent.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
import { LoggerService } from './logger.service';
|
|
|
|
@Component({
|
|
selector: 'after-view-parent',
|
|
template: `
|
|
<div class="parent">
|
|
<h2>AfterView</h2>
|
|
|
|
<after-view *ngIf="show"></after-view>
|
|
|
|
<h4>-- AfterView Logs --</h4>
|
|
<p><button (click)="reset()">Reset</button></p>
|
|
<div *ngFor="let msg of logger.logs">{{msg}}</div>
|
|
</div>
|
|
`,
|
|
styles: ['.parent {background: burlywood}'],
|
|
providers: [LoggerService]
|
|
})
|
|
export class AfterViewParentComponent {
|
|
show = true;
|
|
|
|
constructor(public logger: LoggerService) { }
|
|
|
|
reset() {
|
|
this.logger.clear();
|
|
// quickly remove and reload AfterViewComponent which recreates it
|
|
this.show = false;
|
|
this.logger.tick_then(() => this.show = true);
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/after-view.component.ts]" value="import { AfterViewChecked, AfterViewInit, Component, ViewChild } from '@angular/core';
|
|
|
|
import { ChildViewComponent } from './child-view.component';
|
|
import { LoggerService } from './logger.service';
|
|
|
|
@Component({
|
|
selector: 'after-view',
|
|
template: `
|
|
<div>-- child view begins --</div>
|
|
<app-child-view></app-child-view>
|
|
<div>-- child view ends --</div>`
|
|
+ `
|
|
<p *ngIf="comment" class="comment">
|
|
{{comment}}
|
|
</p>
|
|
`
|
|
})
|
|
export class AfterViewComponent implements AfterViewChecked, AfterViewInit {
|
|
comment = '';
|
|
private prevHero = '';
|
|
|
|
// Query for a VIEW child of type `ChildViewComponent`
|
|
@ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
|
|
|
|
constructor(private logger: LoggerService) {
|
|
this.logIt('AfterView constructor');
|
|
}
|
|
|
|
ngAfterViewInit() {
|
|
// viewChild is set after the view has been initialized
|
|
this.logIt('AfterViewInit');
|
|
this.doSomething();
|
|
}
|
|
|
|
ngAfterViewChecked() {
|
|
// viewChild is updated after the view has been checked
|
|
if (this.prevHero === this.viewChild.hero) {
|
|
this.logIt('AfterViewChecked (no change)');
|
|
} else {
|
|
this.prevHero = this.viewChild.hero;
|
|
this.logIt('AfterViewChecked');
|
|
this.doSomething();
|
|
}
|
|
}
|
|
|
|
// This surrogate for real business logic sets the `comment`
|
|
private doSomething() {
|
|
const c = this.viewChild.hero.length > 10 ? `That's a long name` : '';
|
|
if (c !== this.comment) {
|
|
// Wait a tick because the component's view has already been checked
|
|
this.logger.tick_then(() => this.comment = c);
|
|
}
|
|
}
|
|
|
|
private logIt(method: string) {
|
|
const child = this.viewChild;
|
|
const message = `${method}: ${child ? child.hero : 'no'} child view`;
|
|
this.logger.log(message);
|
|
}
|
|
// ...
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/app.component.ts]" value="import { Component } from '@angular/core';
|
|
@Component({
|
|
selector: 'app-root',
|
|
templateUrl: './app.component.html'
|
|
})
|
|
export class AppComponent { }
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/app.module.ts]" value="import { NgModule } from '@angular/core';
|
|
import { BrowserModule } from '@angular/platform-browser';
|
|
import { FormsModule } from '@angular/forms';
|
|
|
|
import { AppComponent } from './app.component';
|
|
|
|
import { AfterContentParentComponent } from './after-content-parent.component';
|
|
import { AfterContentComponent } from './after-content.component';
|
|
import { ChildComponent } from './child.component';
|
|
|
|
import { AfterViewParentComponent } from './after-view-parent.component';
|
|
import { AfterViewComponent } from './after-view.component';
|
|
import { ChildViewComponent } from './child-view.component';
|
|
|
|
import { CounterParentComponent } from './counter-parent.component';
|
|
import { MyCounterComponent } from './counter.component';
|
|
|
|
import { DoCheckParentComponent } from './do-check-parent.component';
|
|
import { DoCheckComponent } from './do-check.component';
|
|
|
|
import { OnChangesParentComponent } from './on-changes-parent.component';
|
|
import { OnChangesComponent } from './on-changes.component';
|
|
|
|
import { PeekABooParentComponent } from './peek-a-boo-parent.component';
|
|
import { PeekABooComponent } from './peek-a-boo.component';
|
|
|
|
import { SpyParentComponent } from './spy.component';
|
|
import { SpyDirective } from './spy.directive';
|
|
|
|
@NgModule({
|
|
imports: [
|
|
BrowserModule,
|
|
FormsModule
|
|
],
|
|
declarations: [
|
|
AppComponent,
|
|
AfterContentParentComponent,
|
|
AfterContentComponent,
|
|
ChildComponent,
|
|
AfterViewParentComponent,
|
|
AfterViewComponent,
|
|
ChildViewComponent,
|
|
CounterParentComponent,
|
|
MyCounterComponent,
|
|
DoCheckParentComponent,
|
|
DoCheckComponent,
|
|
OnChangesParentComponent,
|
|
OnChangesComponent,
|
|
PeekABooParentComponent,
|
|
PeekABooComponent,
|
|
SpyParentComponent,
|
|
SpyDirective
|
|
],
|
|
bootstrap: [ AppComponent ]
|
|
})
|
|
export class AppModule { }
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/child-view.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-child-view',
|
|
template: '<input [(ngModel)]="hero">'
|
|
})
|
|
export class ChildViewComponent {
|
|
hero = 'Magneta';
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/child.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-child',
|
|
template: '<input [(ngModel)]="hero">'
|
|
})
|
|
export class ChildComponent {
|
|
hero = 'Magneta';
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/counter-parent.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
import { LoggerService } from './logger.service';
|
|
|
|
@Component({
|
|
selector: 'counter-parent',
|
|
template: `
|
|
<div class="parent">
|
|
<h2>Counter Spy</h2>
|
|
|
|
<button (click)="updateCounter()">Update counter</button>
|
|
<button (click)="reset()">Reset Counter</button>
|
|
|
|
<app-counter [counter]="value"></app-counter>
|
|
|
|
<h4>-- Spy Lifecycle Hook Log --</h4>
|
|
<div *ngFor="let msg of spyLog">{{msg}}</div>
|
|
</div>
|
|
`,
|
|
styles: ['.parent {background: gold;}'],
|
|
providers: [LoggerService]
|
|
})
|
|
export class CounterParentComponent {
|
|
value: number;
|
|
spyLog: string[] = [];
|
|
|
|
private logger: LoggerService;
|
|
|
|
constructor(logger: LoggerService) {
|
|
this.logger = logger;
|
|
this.spyLog = logger.logs;
|
|
this.reset();
|
|
}
|
|
|
|
updateCounter() {
|
|
this.value += 1;
|
|
this.logger.tick();
|
|
}
|
|
|
|
reset() {
|
|
this.logger.log('-- reset --');
|
|
this.value = 0;
|
|
this.logger.tick();
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/counter.component.ts]" value="import {
|
|
Component, Input,
|
|
OnChanges, SimpleChanges,
|
|
} from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-counter',
|
|
template: `
|
|
<div class="counter">
|
|
Counter = {{counter}}
|
|
|
|
<h5>-- Counter Change Log --</h5>
|
|
<div *ngFor="let chg of changeLog" appSpy>{{chg}}</div>
|
|
</div>
|
|
`,
|
|
styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}']
|
|
})
|
|
export class MyCounterComponent implements OnChanges {
|
|
@Input() counter: number;
|
|
changeLog: string[] = [];
|
|
|
|
ngOnChanges(changes: SimpleChanges) {
|
|
|
|
// Empty the changeLog whenever counter goes to zero
|
|
// hint: this is a way to respond programmatically to external value changes.
|
|
if (this.counter === 0) {
|
|
this.changeLog = [];
|
|
}
|
|
|
|
// A change to `counter` is the only change we care about
|
|
const chng = changes.counter;
|
|
const cur = chng.currentValue;
|
|
const prev = JSON.stringify(chng.previousValue); // first time is {}; after is integer
|
|
this.changeLog.push(`counter: currentValue = ${cur}, previousValue = ${prev}`);
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/do-check-parent.component.ts]" value="import { Component, ViewChild } from '@angular/core';
|
|
|
|
import { DoCheckComponent } from './do-check.component';
|
|
import { Hero } from './hero';
|
|
|
|
@Component({
|
|
selector: 'do-check-parent',
|
|
templateUrl: './do-check-parent.component.html',
|
|
styles: ['.parent {background: Lavender}']
|
|
})
|
|
export class DoCheckParentComponent {
|
|
hero: Hero;
|
|
power: string;
|
|
title = 'DoCheck';
|
|
@ViewChild(DoCheckComponent) childView: DoCheckComponent;
|
|
|
|
constructor() {
|
|
this.reset();
|
|
}
|
|
|
|
reset() {
|
|
this.hero = new Hero('Windstorm');
|
|
this.power = 'sing';
|
|
if (this.childView) {
|
|
this.childView.reset();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/do-check.component.ts]" value="/* tslint:disable:forin */
|
|
import { Component, DoCheck, Input } from '@angular/core';
|
|
|
|
import { Hero } from './hero';
|
|
|
|
@Component({
|
|
selector: 'do-check',
|
|
template: `
|
|
<div class="hero">
|
|
<p>{{hero.name}} can {{power}}</p>
|
|
|
|
<h4>-- Change Log --</h4>
|
|
<div *ngFor="let chg of changeLog">{{chg}}</div>
|
|
</div>
|
|
`,
|
|
styles: [
|
|
'.hero {background: LightYellow; padding: 8px; margin-top: 8px}',
|
|
'p {background: Yellow; padding: 8px; margin-top: 8px}'
|
|
]
|
|
})
|
|
export class DoCheckComponent implements DoCheck {
|
|
@Input() hero: Hero;
|
|
@Input() power: string;
|
|
|
|
changeDetected = false;
|
|
changeLog: string[] = [];
|
|
oldHeroName = '';
|
|
oldPower = '';
|
|
oldLogLength = 0;
|
|
noChangeCount = 0;
|
|
|
|
ngDoCheck() {
|
|
|
|
if (this.hero.name !== this.oldHeroName) {
|
|
this.changeDetected = true;
|
|
this.changeLog.push(`DoCheck: Hero name changed to "${this.hero.name}" from "${this.oldHeroName}"`);
|
|
this.oldHeroName = this.hero.name;
|
|
}
|
|
|
|
if (this.power !== this.oldPower) {
|
|
this.changeDetected = true;
|
|
this.changeLog.push(`DoCheck: Power changed to "${this.power}" from "${this.oldPower}"`);
|
|
this.oldPower = this.power;
|
|
}
|
|
|
|
if (this.changeDetected) {
|
|
this.noChangeCount = 0;
|
|
} else {
|
|
// log that hook was called when there was no relevant change.
|
|
const count = this.noChangeCount += 1;
|
|
const noChangeMsg = `DoCheck called ${count}x when no change to hero or power`;
|
|
if (count === 1) {
|
|
// add new "no change" message
|
|
this.changeLog.push(noChangeMsg);
|
|
} else {
|
|
// update last "no change" message
|
|
this.changeLog[this.changeLog.length - 1] = noChangeMsg;
|
|
}
|
|
}
|
|
|
|
this.changeDetected = false;
|
|
}
|
|
|
|
reset() {
|
|
this.changeDetected = true;
|
|
this.changeLog = [];
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/hero.ts]" value="export class Hero {
|
|
constructor(public name: string) { }
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/logger.service.ts]" value="import { Injectable } from '@angular/core';
|
|
|
|
@Injectable()
|
|
export class LoggerService {
|
|
logs: string[] = [];
|
|
prevMsg = '';
|
|
prevMsgCount = 1;
|
|
|
|
log(msg: string) {
|
|
if (msg === this.prevMsg) {
|
|
// Repeat message; update last log entry with count.
|
|
this.logs[this.logs.length - 1] = msg + ` (${this.prevMsgCount += 1}x)`;
|
|
} else {
|
|
// New message; log it.
|
|
this.prevMsg = msg;
|
|
this.prevMsgCount = 1;
|
|
this.logs.push(msg);
|
|
}
|
|
}
|
|
|
|
clear() { this.logs = []; }
|
|
|
|
// schedules a view refresh to ensure display catches up
|
|
tick() { this.tick_then(() => { }); }
|
|
tick_then(fn: () => any) { setTimeout(fn, 0); }
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/on-changes-parent.component.ts]" value="import { Component, ViewChild } from '@angular/core';
|
|
|
|
import { Hero } from './hero';
|
|
import { OnChangesComponent } from './on-changes.component';
|
|
|
|
@Component({
|
|
selector: 'on-changes-parent',
|
|
templateUrl: './on-changes-parent.component.html',
|
|
styles: ['.parent {background: Lavender;}']
|
|
})
|
|
export class OnChangesParentComponent {
|
|
hero: Hero;
|
|
power: string;
|
|
title = 'OnChanges';
|
|
@ViewChild(OnChangesComponent) childView: OnChangesComponent;
|
|
|
|
constructor() {
|
|
this.reset();
|
|
}
|
|
|
|
reset() {
|
|
// new Hero object every time; triggers onChanges
|
|
this.hero = new Hero('Windstorm');
|
|
// setting power only triggers onChanges if this value is different
|
|
this.power = 'sing';
|
|
if (this.childView) {
|
|
this.childView.reset();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/on-changes.component.ts]" value="/* tslint:disable:forin */
|
|
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
|
|
|
|
import { Hero } from './hero';
|
|
|
|
@Component({
|
|
selector: 'on-changes',
|
|
template: `
|
|
<div class="hero">
|
|
<p>{{hero.name}} can {{power}}</p>
|
|
|
|
<h4>-- Change Log --</h4>
|
|
<div *ngFor="let chg of changeLog">{{chg}}</div>
|
|
</div>
|
|
`,
|
|
styles: [
|
|
'.hero {background: LightYellow; padding: 8px; margin-top: 8px}',
|
|
'p {background: Yellow; padding: 8px; margin-top: 8px}'
|
|
]
|
|
})
|
|
export class OnChangesComponent implements OnChanges {
|
|
@Input() hero: Hero;
|
|
@Input() power: string;
|
|
|
|
changeLog: string[] = [];
|
|
|
|
ngOnChanges(changes: SimpleChanges) {
|
|
for (const propName in changes) {
|
|
const chng = changes[propName];
|
|
const cur = JSON.stringify(chng.currentValue);
|
|
const prev = JSON.stringify(chng.previousValue);
|
|
this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
|
|
}
|
|
}
|
|
|
|
reset() { this.changeLog = []; }
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/peek-a-boo-parent.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
import { LoggerService } from './logger.service';
|
|
|
|
@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>
|
|
<div *ngFor="let msg of hookLog">{{msg}}</div>
|
|
</div>
|
|
`,
|
|
styles: ['.parent {background: moccasin}'],
|
|
providers: [ LoggerService ]
|
|
})
|
|
export class PeekABooParentComponent {
|
|
|
|
hasChild = false;
|
|
hookLog: string[];
|
|
|
|
heroName = 'Windstorm';
|
|
private logger: LoggerService;
|
|
|
|
constructor(logger: LoggerService) {
|
|
this.logger = logger;
|
|
this.hookLog = logger.logs;
|
|
}
|
|
|
|
toggleChild() {
|
|
this.hasChild = !this.hasChild;
|
|
if (this.hasChild) {
|
|
this.heroName = 'Windstorm';
|
|
this.logger.clear(); // clear log on create
|
|
}
|
|
this.hookLog = this.logger.logs;
|
|
this.logger.tick();
|
|
}
|
|
|
|
updateHero() {
|
|
this.heroName += '!';
|
|
this.logger.tick();
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/peek-a-boo.component.ts]" value="// tslint:disable: no-conflicting-lifecycle
|
|
import {
|
|
AfterContentChecked,
|
|
AfterContentInit,
|
|
AfterViewChecked,
|
|
AfterViewInit,
|
|
Component,
|
|
DoCheck,
|
|
Input,
|
|
OnChanges,
|
|
OnDestroy,
|
|
OnInit,
|
|
SimpleChanges
|
|
} from '@angular/core';
|
|
|
|
import { LoggerService } from './logger.service';
|
|
import { PeekABooDirective } from './peek-a-boo.directive';
|
|
|
|
@Component({
|
|
selector: 'peek-a-boo',
|
|
template: '<p>Now you see my hero, {{name}}</p>',
|
|
styles: ['p {background: LightYellow; padding: 8px}']
|
|
})
|
|
// Don't HAVE to mention the Lifecycle Hook interfaces
|
|
// unless we want typing and tool support.
|
|
export class PeekABooComponent extends PeekABooDirective implements
|
|
OnChanges, OnInit, DoCheck,
|
|
AfterContentInit, AfterContentChecked,
|
|
AfterViewInit, AfterViewChecked,
|
|
OnDestroy {
|
|
@Input() name: string;
|
|
|
|
private verb = 'initialized';
|
|
|
|
constructor(logger: LoggerService) {
|
|
super(logger);
|
|
|
|
const is = this.name ? 'is' : 'is not';
|
|
this.logIt(`name ${is} known at construction`);
|
|
}
|
|
|
|
// only called for/if there is an @input variable set by parent.
|
|
ngOnChanges(changes: SimpleChanges) {
|
|
const changesMsgs: string[] = [];
|
|
for (const propName in changes) {
|
|
if (propName === 'name') {
|
|
const name = changes.name.currentValue;
|
|
changesMsgs.push(`name ${this.verb} to "${name}"`);
|
|
} else {
|
|
changesMsgs.push(propName + ' ' + this.verb);
|
|
}
|
|
}
|
|
this.logIt(`OnChanges: ${changesMsgs.join('; ')}`);
|
|
this.verb = 'changed'; // next time it will be a change
|
|
}
|
|
|
|
// Beware! Called frequently!
|
|
// Called in every change detection cycle anywhere on the page
|
|
ngDoCheck() { this.logIt(`DoCheck`); }
|
|
|
|
ngAfterContentInit() { this.logIt(`AfterContentInit`); }
|
|
|
|
// Beware! Called frequently!
|
|
// Called in every change detection cycle anywhere on the page
|
|
ngAfterContentChecked() { this.logIt(`AfterContentChecked`); }
|
|
|
|
ngAfterViewInit() { this.logIt(`AfterViewInit`); }
|
|
|
|
// Beware! Called frequently!
|
|
// Called in every change detection cycle anywhere on the page
|
|
ngAfterViewChecked() { this.logIt(`AfterViewChecked`); }
|
|
|
|
ngOnDestroy() { this.logIt(`OnDestroy`); }
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/peek-a-boo.directive.ts]" value="import { Directive, OnInit } from '@angular/core';
|
|
|
|
import { LoggerService } from './logger.service';
|
|
|
|
let nextId = 1;
|
|
|
|
@Directive()
|
|
export class PeekABooDirective implements OnInit {
|
|
constructor(private logger: LoggerService) { }
|
|
|
|
// implement OnInit's `ngOnInit` method
|
|
ngOnInit() {
|
|
this.logIt(`OnInit`);
|
|
}
|
|
|
|
logIt(msg: string) {
|
|
this.logger.log(`#${nextId++} ${msg}`);
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/spy.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
import { LoggerService } from './logger.service';
|
|
|
|
@Component({
|
|
selector: 'spy-parent',
|
|
templateUrl: './spy.component.html',
|
|
styles: [
|
|
'.parent {background: khaki;}',
|
|
'.heroes {background: LightYellow; padding: 0 8px}'
|
|
],
|
|
providers: [LoggerService]
|
|
})
|
|
export class SpyParentComponent {
|
|
newName = 'Herbie';
|
|
heroes: string[] = ['Windstorm', 'Magneta'];
|
|
|
|
constructor(public logger: LoggerService) {
|
|
}
|
|
|
|
addHero() {
|
|
if (this.newName.trim()) {
|
|
this.heroes.push(this.newName.trim());
|
|
this.newName = '';
|
|
this.logger.tick();
|
|
}
|
|
}
|
|
removeHero(hero: string) {
|
|
this.heroes.splice(this.heroes.indexOf(hero), 1);
|
|
this.logger.tick();
|
|
}
|
|
reset() {
|
|
this.logger.log('-- reset --');
|
|
this.heroes = [];
|
|
this.logger.tick();
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/spy.directive.ts]" value="import { Directive, OnInit, OnDestroy } from '@angular/core';
|
|
|
|
import { LoggerService } from './logger.service';
|
|
|
|
let nextId = 1;
|
|
|
|
// Spy on any element to which it is applied.
|
|
// Usage: <div appSpy>...</div>
|
|
@Directive({selector: '[appSpy]'})
|
|
export class SpyDirective implements OnInit, OnDestroy {
|
|
private id = nextId++;
|
|
|
|
constructor(private logger: LoggerService) { }
|
|
|
|
ngOnInit() {
|
|
this.logger.log(`Spy #${this.id} onInit`);
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.logger.log(`Spy #${this.id} onDestroy`);
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/environments/environment.prod.ts]" value="export const environment = {
|
|
production: true
|
|
};
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/environments/environment.ts]" value="// This file can be replaced during build by using the `fileReplacements` array.
|
|
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
|
|
// The list of file replacements can be found in `angular.json`.
|
|
|
|
export const environment = {
|
|
production: false
|
|
};
|
|
|
|
/*
|
|
* For easier debugging in development mode, you can import the following file
|
|
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
|
|
*
|
|
* This import should be commented out in production mode because it will have a negative impact
|
|
* on performance if an error is thrown.
|
|
*/
|
|
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/main.ts]" value="import { enableProdMode } from '@angular/core';
|
|
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
|
|
import { AppModule } from './app/app.module';
|
|
import { environment } from './environments/environment';
|
|
|
|
if (environment.production) {
|
|
enableProdMode();
|
|
}
|
|
|
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/polyfills.ts]" value="/**
|
|
* This file includes polyfills needed by Angular and is loaded before the app.
|
|
* You can add your own extra polyfills to this file.
|
|
*
|
|
* This file is divided into 2 sections:
|
|
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
|
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
|
* file.
|
|
*
|
|
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
|
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
|
|
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
|
|
*
|
|
* Learn more in https://angular.io/guide/browser-support
|
|
*/
|
|
|
|
/***************************************************************************************************
|
|
* BROWSER POLYFILLS
|
|
*/
|
|
|
|
/** IE11 requires the following for NgClass support on SVG elements */
|
|
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
|
|
|
/**
|
|
* Web Animations `@angular/platform-browser/animations`
|
|
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
|
|
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
|
|
*/
|
|
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
|
|
|
/**
|
|
* By default, zone.js will patch all possible macroTask and DomEvents
|
|
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
|
* because those flags need to be set before `zone.js` being loaded, and webpack
|
|
* will put import in the top of bundle, so user need to create a separate file
|
|
* in this directory (for example: zone-flags.ts), and put the following flags
|
|
* into that file, and then add the following code before importing zone.js.
|
|
* import './zone-flags';
|
|
*
|
|
* The flags allowed in zone-flags.ts are listed here.
|
|
*
|
|
* The following flags will work for all browsers.
|
|
*
|
|
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch
|
|
* requestAnimationFrame
|
|
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
|
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch
|
|
* specified eventNames
|
|
*
|
|
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
|
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
|
*
|
|
* (window as any).__Zone_enable_cross_context_check = true;
|
|
*
|
|
*/
|
|
|
|
/***************************************************************************************************
|
|
* Zone JS is required by default for Angular itself.
|
|
*/
|
|
import 'zone.js'; // Included with Angular CLI.
|
|
|
|
/***************************************************************************************************
|
|
* APPLICATION IMPORTS
|
|
*/
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/assets/sample.css]" value=".parent {
|
|
color: #666;
|
|
margin: 14px 0;
|
|
padding: 8px;
|
|
}
|
|
input {
|
|
margin: 4px;
|
|
padding: 4px;
|
|
}
|
|
.comment {
|
|
color: red;
|
|
font-style: italic;
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/styles.css]" value="/* Global Styles */
|
|
* {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
h1 {
|
|
color: #264D73;
|
|
font-size: 2.5rem;
|
|
}
|
|
h2, h3 {
|
|
color: #444;
|
|
font-weight: lighter;
|
|
}
|
|
h3 {
|
|
font-size: 1.3rem;
|
|
}
|
|
body {
|
|
padding: .5rem;
|
|
max-width: 1000px;
|
|
margin: auto;
|
|
}
|
|
@media (min-width: 600px) {
|
|
body {
|
|
padding: 2rem;
|
|
}
|
|
}
|
|
body, input[text] {
|
|
color: #333;
|
|
font-family: Cambria, Georgia, serif;
|
|
}
|
|
a {
|
|
cursor: pointer;
|
|
}
|
|
button {
|
|
background-color: #eee;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
color: black;
|
|
font-size: 1.2rem;
|
|
padding: 1rem;
|
|
margin-right: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
button:hover {
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
button:disabled {
|
|
background-color: #eee;
|
|
color: #aaa;
|
|
cursor: auto;
|
|
}
|
|
|
|
/* Navigation link styles */
|
|
nav a {
|
|
padding: 5px 10px;
|
|
text-decoration: none;
|
|
margin-right: 10px;
|
|
margin-top: 10px;
|
|
display: inline-block;
|
|
background-color: #e8e8e8;
|
|
color: #3d3d3d;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
nav a:hover {
|
|
color: white;
|
|
background-color: #42545C;
|
|
}
|
|
nav a.active {
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
hr {
|
|
margin: 1.5rem 0;
|
|
}
|
|
input[type="text"] {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: .5rem;
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
*/"><input type="hidden" name="files[src/app/app.component.html]" value="<a id="top"></a>
|
|
<h1>Component Lifecycle Hooks</h1>
|
|
<a href="#hooks">Peek-a-boo: (most) lifecycle hooks</a><br>
|
|
<a href="#spy">Spy: directive with OnInit & OnDestroy</a><br>
|
|
<a href="#onchanges">OnChanges</a><br>
|
|
<a href="#docheck">DoCheck</a><br>
|
|
<a href="#after-view">AfterViewInit & AfterViewChecked</a><br>
|
|
<a href="#after-content">AfterContentInit & AfterContentChecked</a><br>
|
|
<a href="#counter">Counter: OnChanges + Spy directive</a><br>
|
|
|
|
<a id="hooks"></a>
|
|
<peek-a-boo-parent></peek-a-boo-parent>
|
|
<a href="#top">back to top</a>
|
|
|
|
<a id="spy"></a>
|
|
<spy-parent></spy-parent>
|
|
<a href="#top">back to top</a>
|
|
|
|
<a id="onchanges"></a>
|
|
<on-changes-parent></on-changes-parent>
|
|
<a href="#top">back to top</a>
|
|
|
|
<a id="docheck"></a>
|
|
<do-check-parent></do-check-parent>
|
|
<a href="#top">back to top</a>
|
|
|
|
<a id="after-view"></a>
|
|
<after-view-parent></after-view-parent>
|
|
<a href="#top">back to top</a>
|
|
|
|
<a id="after-content"></a>
|
|
<after-content-parent></after-content-parent>
|
|
<a href="#top">back to top</a>
|
|
|
|
<a id="counter"></a>
|
|
<counter-parent></counter-parent>
|
|
<a href="#top">back to top</a>
|
|
|
|
|
|
<!--
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
-->"><input type="hidden" name="files[src/app/do-check-parent.component.html]" value="<div class="parent">
|
|
<h2>{{title}}</h2>
|
|
|
|
<table>
|
|
<tr><td>Power: </td><td><input [(ngModel)]="power"></td></tr>
|
|
<tr><td>Hero.name: </td><td><input [(ngModel)]="hero.name"></td></tr>
|
|
</table>
|
|
<p><button (click)="reset()">Reset Log</button></p>
|
|
|
|
<do-check [hero]="hero" [power]="power"></do-check>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
-->"><input type="hidden" name="files[src/app/on-changes-parent.component.html]" value="<div class="parent">
|
|
<h2>{{title}}</h2>
|
|
|
|
<table>
|
|
<tr><td>Power: </td><td><input [(ngModel)]="power"></td></tr>
|
|
<tr><td>Hero.name: </td><td><input [(ngModel)]="hero.name"></td></tr>
|
|
</table>
|
|
<p><button (click)="reset()">Reset Log</button></p>
|
|
|
|
<on-changes [hero]="hero" [power]="power"></on-changes>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
-->"><input type="hidden" name="files[src/app/spy.component.html]" value="<div class="parent">
|
|
<h2>Spy Directive</h2>
|
|
|
|
<input [(ngModel)]="newName" (keyup.enter)="addHero()">
|
|
<button (click)="addHero()">Add Hero</button>
|
|
<button (click)="reset()">Reset Heroes</button>
|
|
|
|
<p></p>
|
|
<div *ngFor="let hero of heroes" appSpy class="heroes">
|
|
{{hero}}
|
|
</div>
|
|
<h4>-- Spy Lifecycle Hook Log --</h4>
|
|
<div *ngFor="let msg of logger.logs">{{msg}}</div>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
-->"><input type="hidden" name="files[src/index.html]" value="<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Angular Lifecycle Hooks</title>
|
|
<base href="/">
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="assets/sample.css">
|
|
</head>
|
|
|
|
<body>
|
|
<app-root></app-root>
|
|
</body>
|
|
|
|
</html>
|
|
|
|
|
|
<!--
|
|
Copyright Google LLC. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at https://angular.io/license
|
|
-->"><input type="hidden" name="files[angular.json]" value="{
|
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
|
"version": 1,
|
|
"newProjectRoot": "projects",
|
|
"projects": {
|
|
"angular.io-example": {
|
|
"projectType": "application",
|
|
"schematics": {
|
|
"@schematics/angular:application": {
|
|
"strict": true
|
|
}
|
|
},
|
|
"root": "",
|
|
"sourceRoot": "src",
|
|
"prefix": "app",
|
|
"architect": {
|
|
"build": {
|
|
"builder": "@angular-devkit/build-angular:browser",
|
|
"options": {
|
|
"outputPath": "dist",
|
|
"index": "src/index.html",
|
|
"main": "src/main.ts",
|
|
"polyfills": "src/polyfills.ts",
|
|
"tsConfig": "tsconfig.app.json",
|
|
"aot": true,
|
|
"assets": [
|
|
"src/favicon.ico",
|
|
"src/assets"
|
|
],
|
|
"styles": [
|
|
"src/styles.css"
|
|
],
|
|
"scripts": []
|
|
},
|
|
"configurations": {
|
|
"production": {
|
|
"fileReplacements": [
|
|
{
|
|
"replace": "src/environments/environment.ts",
|
|
"with": "src/environments/environment.prod.ts"
|
|
}
|
|
],
|
|
"optimization": true,
|
|
"outputHashing": "all",
|
|
"sourceMap": false,
|
|
"namedChunks": false,
|
|
"extractLicenses": true,
|
|
"vendorChunk": false,
|
|
"buildOptimizer": true,
|
|
"budgets": [
|
|
{
|
|
"type": "initial",
|
|
"maximumWarning": "500kb",
|
|
"maximumError": "1mb"
|
|
},
|
|
{
|
|
"type": "anyComponentStyle",
|
|
"maximumWarning": "2kb",
|
|
"maximumError": "4kb"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"serve": {
|
|
"builder": "@angular-devkit/build-angular:dev-server",
|
|
"options": {
|
|
"browserTarget": "angular.io-example:build"
|
|
},
|
|
"configurations": {
|
|
"production": {
|
|
"browserTarget": "angular.io-example:build:production"
|
|
}
|
|
}
|
|
},
|
|
"extract-i18n": {
|
|
"builder": "@angular-devkit/build-angular:extract-i18n",
|
|
"options": {
|
|
"browserTarget": "angular.io-example:build"
|
|
}
|
|
},
|
|
"test": {
|
|
"builder": "@angular-devkit/build-angular:karma",
|
|
"options": {
|
|
"main": "src/test.ts",
|
|
"polyfills": "src/polyfills.ts",
|
|
"tsConfig": "tsconfig.spec.json",
|
|
"karmaConfig": "karma.conf.js",
|
|
"assets": [
|
|
"src/favicon.ico",
|
|
"src/assets"
|
|
],
|
|
"styles": [
|
|
"src/styles.css"
|
|
],
|
|
"scripts": []
|
|
}
|
|
},
|
|
"lint": {
|
|
"builder": "@angular-devkit/build-angular:tslint",
|
|
"options": {
|
|
"tsConfig": [
|
|
"tsconfig.app.json",
|
|
"tsconfig.spec.json",
|
|
"e2e/tsconfig.json"
|
|
],
|
|
"exclude": [
|
|
"**/node_modules/**"
|
|
]
|
|
}
|
|
},
|
|
"e2e": {
|
|
"builder": "@angular-devkit/build-angular:protractor",
|
|
"options": {
|
|
"protractorConfig": "e2e/protractor.conf.js",
|
|
"devServerTarget": "angular.io-example:serve"
|
|
},
|
|
"configurations": {
|
|
"production": {
|
|
"devServerTarget": "angular.io-example:serve:production"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"defaultProject": "angular.io-example"
|
|
}
|
|
"><input type="hidden" name="files[tsconfig.json]" value="{
|
|
"compileOnSave": false,
|
|
"compilerOptions": {
|
|
"baseUrl": "./",
|
|
"outDir": "./dist/out-tsc",
|
|
"forceConsistentCasingInFileNames": true,
|
|
"noImplicitReturns": true,
|
|
"noFallthroughCasesInSwitch": true,
|
|
"sourceMap": true,
|
|
"declaration": false,
|
|
"downlevelIteration": true,
|
|
"experimentalDecorators": true,
|
|
"moduleResolution": "node",
|
|
"importHelpers": true,
|
|
"target": "es2015",
|
|
"module": "es2020",
|
|
"lib": [
|
|
"es2018",
|
|
"dom"
|
|
]
|
|
},
|
|
"angularCompilerOptions": {
|
|
"strictInjectionParameters": true,
|
|
"strictInputAccessModifiers": true,
|
|
"strictTemplates": true,
|
|
"enableIvy": true
|
|
}
|
|
}"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="lifecycle"><input type="hidden" name="tags[3]" value="hooks"><input type="hidden" name="tags[4]" value="OnInit"><input type="hidden" name="tags[5]" value="OnDestroy"><input type="hidden" name="tags[6]" value="OnChange"><input type="hidden" name="tags[7]" value="DoCheck"><input type="hidden" name="tags[8]" value="AfterContentInit"><input type="hidden" name="tags[9]" value="AfterContentChecked"><input type="hidden" name="tags[10]" value="AfterViewInit"><input type="hidden" name="tags[11]" value="AfterViewChecked"><input type="hidden" name="description" value="Angular Example - Lifecycle Hooks"><input type="hidden" name="dependencies" value="{"@angular/animations":"~11.0.1","@angular/common":"~11.0.1","@angular/compiler":"~11.0.1","@angular/core":"~11.0.1","@angular/forms":"~11.0.1","@angular/platform-browser":"~11.0.1","@angular/platform-browser-dynamic":"~11.0.1","@angular/router":"~11.0.1","angular-in-memory-web-api":"~0.11.0","rxjs":"~6.6.0","tslib":"^2.0.0","zone.js":"~0.11.4","jasmine-core":"~3.6.0","jasmine-marbles":"~0.6.0"}"></form>
|
|
<script>
|
|
var embedded = 'ctl=1';
|
|
var isEmbedded = window.location.search.indexOf(embedded) > -1;
|
|
|
|
if (isEmbedded) {
|
|
var form = document.getElementById('mainForm');
|
|
var action = form.action;
|
|
var actionHasParams = action.indexOf('?') > -1;
|
|
var symbol = actionHasParams ? '&' : '?'
|
|
form.action = form.action + symbol + embedded;
|
|
}
|
|
document.getElementById("mainForm").submit();
|
|
</script>
|
|
</body></html> |