757 lines
22 KiB
HTML
757 lines
22 KiB
HTML
<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview" target="_self"><input type="hidden" name="files[app/app.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
moduleId: module.id,
|
|
selector: 'my-app',
|
|
templateUrl: './app.component.html'
|
|
})
|
|
export class AppComponent { }
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[app/app.module.ts]" value="import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
import { BrowserModule } from '@angular/platform-browser';
|
|
|
|
import { AppComponent } from './app.component';
|
|
import { AstronautComponent } from './astronaut.component';
|
|
import { CountdownLocalVarParentComponent, CountdownViewChildParentComponent } from './countdown-parent.component';
|
|
import { CountdownTimerComponent } from './countdown-timer.component';
|
|
import { HeroChildComponent } from './hero-child.component';
|
|
import { HeroParentComponent } from './hero-parent.component';
|
|
import { MissionControlComponent } from './missioncontrol.component';
|
|
import { NameChildComponent } from './name-child.component';
|
|
import { NameParentComponent } from './name-parent.component';
|
|
import { VersionChildComponent } from './version-child.component';
|
|
import { VersionParentComponent } from './version-parent.component';
|
|
import { VoterComponent } from './voter.component';
|
|
import { VoteTakerComponent } from './votetaker.component';
|
|
|
|
let directives: any[] = [
|
|
AppComponent,
|
|
AstronautComponent,
|
|
CountdownTimerComponent,
|
|
HeroChildComponent,
|
|
HeroParentComponent,
|
|
MissionControlComponent,
|
|
NameChildComponent,
|
|
NameParentComponent,
|
|
VersionChildComponent,
|
|
VersionParentComponent,
|
|
VoterComponent,
|
|
VoteTakerComponent
|
|
];
|
|
|
|
let schemas: any[] = [];
|
|
|
|
// Include Countdown examples
|
|
// unless in e2e tests which they break.
|
|
if (!/e2e/.test(location.search)) {
|
|
console.log('adding countdown timer examples');
|
|
directives.push(CountdownLocalVarParentComponent);
|
|
directives.push(CountdownViewChildParentComponent);
|
|
} else {
|
|
// In e2e test use CUSTOM_ELEMENTS_SCHEMA to supress unknown element errors
|
|
schemas.push(CUSTOM_ELEMENTS_SCHEMA);
|
|
}
|
|
|
|
@NgModule({
|
|
imports: [
|
|
BrowserModule
|
|
],
|
|
declarations: directives,
|
|
bootstrap: [ AppComponent ],
|
|
schemas: schemas
|
|
})
|
|
export class AppModule { }
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[app/astronaut.component.ts]" value="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();
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[app/countdown-parent.component.ts]" value="import { AfterViewInit, ViewChild } from '@angular/core';
|
|
import { Component } from '@angular/core';
|
|
import { CountdownTimerComponent } from './countdown-timer.component';
|
|
|
|
|
|
//// Local variable, #timer, version
|
|
@Component({
|
|
selector: '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>
|
|
<countdown-timer #timer></countdown-timer>
|
|
`,
|
|
styleUrls: ['demo.css']
|
|
})
|
|
export class CountdownLocalVarParentComponent { }
|
|
|
|
//// View Child version
|
|
@Component({
|
|
selector: '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>
|
|
<countdown-timer></countdown-timer>
|
|
`,
|
|
styleUrls: ['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(); }
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[app/countdown-timer.component.ts]" value="import { Component, OnDestroy, OnInit } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'countdown-timer',
|
|
template: '<p>{{message}}</p>'
|
|
})
|
|
export class CountdownTimerComponent implements OnInit, OnDestroy {
|
|
|
|
intervalId = 0;
|
|
message = '';
|
|
seconds = 11;
|
|
|
|
clearTimer() { clearInterval(this.intervalId); }
|
|
|
|
ngOnInit() { this.start(); }
|
|
ngOnDestroy() { this.clearTimer(); }
|
|
|
|
start() { this.countDown(); }
|
|
stop() {
|
|
this.clearTimer();
|
|
this.message = `Holding at T-${this.seconds} seconds`;
|
|
}
|
|
|
|
private countDown() {
|
|
this.clearTimer();
|
|
this.intervalId = window.setInterval(() => {
|
|
this.seconds -= 1;
|
|
if (this.seconds === 0) {
|
|
this.message = 'Blast off!';
|
|
} else {
|
|
if (this.seconds < 0) { this.seconds = 10; } // reset
|
|
this.message = `T-${this.seconds} seconds and counting`;
|
|
}
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[app/hero-child.component.ts]" value="import { Component, Input } from '@angular/core';
|
|
|
|
import { Hero } from './hero';
|
|
|
|
@Component({
|
|
selector: 'hero-child',
|
|
template: `
|
|
<h3>{{hero.name}} says:</h3>
|
|
<p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
|
|
`
|
|
})
|
|
export class HeroChildComponent {
|
|
@Input() hero: Hero;
|
|
@Input('master') masterName: string;
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[app/hero-parent.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
import { HEROES } from './hero';
|
|
|
|
@Component({
|
|
selector: 'hero-parent',
|
|
template: `
|
|
<h2>{{master}} controls {{heroes.length}} heroes</h2>
|
|
<hero-child *ngFor="let hero of heroes"
|
|
[hero]="hero"
|
|
[master]="master">
|
|
</hero-child>
|
|
`
|
|
})
|
|
export class HeroParentComponent {
|
|
heroes = HEROES;
|
|
master: string = 'Master';
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[app/hero.ts]" value="export class Hero {
|
|
name: string;
|
|
}
|
|
|
|
export const HEROES = [
|
|
{name: 'Mr. IQ'},
|
|
{name: 'Magneta'},
|
|
{name: 'Bombasto'}
|
|
];
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[app/mission.service.ts]" value="import { Injectable } from '@angular/core';
|
|
import { Subject } from 'rxjs/Subject';
|
|
|
|
@Injectable()
|
|
export class MissionService {
|
|
|
|
// Observable string sources
|
|
private missionAnnouncedSource = new Subject<string>();
|
|
private missionConfirmedSource = new Subject<string>();
|
|
|
|
// Observable string streams
|
|
missionAnnounced$ = this.missionAnnouncedSource.asObservable();
|
|
missionConfirmed$ = this.missionConfirmedSource.asObservable();
|
|
|
|
// Service message commands
|
|
announceMission(mission: string) {
|
|
this.missionAnnouncedSource.next(mission);
|
|
}
|
|
|
|
confirmMission(astronaut: string) {
|
|
this.missionConfirmedSource.next(astronaut);
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[app/missioncontrol.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
import { MissionService } from './mission.service';
|
|
|
|
@Component({
|
|
selector: 'mission-control',
|
|
template: `
|
|
<h2>Mission Control</h2>
|
|
<button (click)="announce()">Announce mission</button>
|
|
<my-astronaut *ngFor="let astronaut of astronauts"
|
|
[astronaut]="astronaut">
|
|
</my-astronaut>
|
|
<h3>History</h3>
|
|
<ul>
|
|
<li *ngFor="let event of history">{{event}}</li>
|
|
</ul>
|
|
`,
|
|
providers: [MissionService]
|
|
})
|
|
export class MissionControlComponent {
|
|
astronauts = ['Lovell', 'Swigert', 'Haise'];
|
|
history: string[] = [];
|
|
missions = ['Fly to the moon!',
|
|
'Fly to mars!',
|
|
'Fly to Vegas!'];
|
|
nextMission = 0;
|
|
|
|
constructor(private missionService: MissionService) {
|
|
missionService.missionConfirmed$.subscribe(
|
|
astronaut => {
|
|
this.history.push(`${astronaut} confirmed the mission`);
|
|
});
|
|
}
|
|
|
|
announce() {
|
|
let mission = this.missions[this.nextMission++];
|
|
this.missionService.announceMission(mission);
|
|
this.history.push(`Mission "${mission}" announced`);
|
|
if (this.nextMission >= this.missions.length) { this.nextMission = 0; }
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[app/name-child.component.ts]" value="import { Component, Input } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'name-child',
|
|
template: '<h3>"{{name}}"</h3>'
|
|
})
|
|
export class NameChildComponent {
|
|
private _name = '';
|
|
|
|
@Input()
|
|
set name(name: string) {
|
|
this._name = (name && name.trim()) || '<no name set>';
|
|
}
|
|
|
|
get name(): string { return this._name; }
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[app/name-parent.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'name-parent',
|
|
template: `
|
|
<h2>Master controls {{names.length}} names</h2>
|
|
<name-child *ngFor="let name of names" [name]="name"></name-child>
|
|
`
|
|
})
|
|
export class NameParentComponent {
|
|
// Displays 'Mr. IQ', '<no name set>', 'Bombasto'
|
|
names = ['Mr. IQ', ' ', ' Bombasto '];
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[app/version-child.component.ts]" value="/* tslint:disable:forin */
|
|
import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'version-child',
|
|
template: `
|
|
<h3>Version {{major}}.{{minor}}</h3>
|
|
<h4>Change log:</h4>
|
|
<ul>
|
|
<li *ngFor="let change of changeLog">{{change}}</li>
|
|
</ul>
|
|
`
|
|
})
|
|
export class VersionChildComponent implements OnChanges {
|
|
@Input() major: number;
|
|
@Input() minor: number;
|
|
changeLog: string[] = [];
|
|
|
|
ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
|
|
let log: string[] = [];
|
|
for (let propName in changes) {
|
|
let changedProp = changes[propName];
|
|
let to = JSON.stringify(changedProp.currentValue);
|
|
if (changedProp.isFirstChange()) {
|
|
log.push(`Initial value of ${propName} set to ${to}`);
|
|
} else {
|
|
let from = JSON.stringify(changedProp.previousValue);
|
|
log.push(`${propName} changed from ${from} to ${to}`);
|
|
}
|
|
}
|
|
this.changeLog.push(log.join(', '));
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[app/version-parent.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'version-parent',
|
|
template: `
|
|
<h2>Source code version</h2>
|
|
<button (click)="newMinor()">New minor version</button>
|
|
<button (click)="newMajor()">New major version</button>
|
|
<version-child [major]="major" [minor]="minor"></version-child>
|
|
`
|
|
})
|
|
export class VersionParentComponent {
|
|
major: number = 1;
|
|
minor: number = 23;
|
|
|
|
newMinor() {
|
|
this.minor++;
|
|
}
|
|
|
|
newMajor() {
|
|
this.major++;
|
|
this.minor = 0;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[app/voter.component.ts]" value="import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'my-voter',
|
|
template: `
|
|
<h4>{{name}}</h4>
|
|
<button (click)="vote(true)" [disabled]="voted">Agree</button>
|
|
<button (click)="vote(false)" [disabled]="voted">Disagree</button>
|
|
`
|
|
})
|
|
export class VoterComponent {
|
|
@Input() name: string;
|
|
@Output() onVoted = new EventEmitter<boolean>();
|
|
voted = false;
|
|
|
|
vote(agreed: boolean) {
|
|
this.onVoted.emit(agreed);
|
|
this.voted = true;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[app/votetaker.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'vote-taker',
|
|
template: `
|
|
<h2>Should mankind colonize the Universe?</h2>
|
|
<h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
|
|
<my-voter *ngFor="let voter of voters"
|
|
[name]="voter"
|
|
(onVoted)="onVoted($event)">
|
|
</my-voter>
|
|
`
|
|
})
|
|
export class VoteTakerComponent {
|
|
agreed = 0;
|
|
disagreed = 0;
|
|
voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
|
|
|
|
onVoted(agreed: boolean) {
|
|
agreed ? this.agreed++ : this.disagreed++;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[main.ts]" value="import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
|
|
import { AppModule } from './app/app.module';
|
|
|
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[demo.css]" value="/* Component Communication cookbook specific styles */
|
|
.seconds {
|
|
background-color: black;
|
|
color: red;
|
|
font-size: 3em;
|
|
margin: 0.3em 0;
|
|
text-align: center;
|
|
width: 1.5em;
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[styles.css]" value="/* Master Styles */
|
|
h1 {
|
|
color: #369;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 250%;
|
|
}
|
|
h2, h3 {
|
|
color: #444;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-weight: lighter;
|
|
}
|
|
body {
|
|
margin: 2em;
|
|
}
|
|
body, input[text], button {
|
|
color: #888;
|
|
font-family: Cambria, Georgia;
|
|
}
|
|
a {
|
|
cursor: pointer;
|
|
cursor: hand;
|
|
}
|
|
button {
|
|
font-family: Arial;
|
|
background-color: #eee;
|
|
border: none;
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
cursor: hand;
|
|
}
|
|
button:hover {
|
|
background-color: #cfd8dc;
|
|
}
|
|
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: #eee;
|
|
border-radius: 4px;
|
|
}
|
|
nav a:visited, a:link {
|
|
color: #607D8B;
|
|
}
|
|
nav a:hover {
|
|
color: #039be5;
|
|
background-color: #CFD8DC;
|
|
}
|
|
nav a.active {
|
|
color: #039be5;
|
|
}
|
|
|
|
/* items class */
|
|
.items {
|
|
margin: 0 0 2em 0;
|
|
list-style-type: none;
|
|
padding: 0;
|
|
width: 24em;
|
|
}
|
|
.items li {
|
|
cursor: pointer;
|
|
position: relative;
|
|
left: 0;
|
|
background-color: #EEE;
|
|
margin: .5em;
|
|
padding: .3em 0;
|
|
height: 1.6em;
|
|
border-radius: 4px;
|
|
}
|
|
.items li:hover {
|
|
color: #607D8B;
|
|
background-color: #DDD;
|
|
left: .1em;
|
|
}
|
|
.items li.selected {
|
|
background-color: #CFD8DC;
|
|
color: white;
|
|
}
|
|
.items li.selected:hover {
|
|
background-color: #BBD8DC;
|
|
}
|
|
.items .text {
|
|
position: relative;
|
|
top: -3px;
|
|
}
|
|
.items .badge {
|
|
display: inline-block;
|
|
font-size: small;
|
|
color: white;
|
|
padding: 0.8em 0.7em 0 0.7em;
|
|
background-color: #607D8B;
|
|
line-height: 1em;
|
|
position: relative;
|
|
left: -1px;
|
|
top: -4px;
|
|
height: 1.8em;
|
|
margin-right: .8em;
|
|
border-radius: 4px 0 0 4px;
|
|
}
|
|
/* everywhere else */
|
|
* {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
|
|
/*
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
*/"><input type="hidden" name="files[app/app.component.html]" value="<h1 id="top">Component Communication Cookbook</h1>
|
|
|
|
<a href="#parent-to-child">Pass data from parent to child with input binding ("Heroes")</a><br/>
|
|
<a href="#parent-to-child-setter">Intercept input property changes with a setter ("Master")</a><br/>
|
|
<a href="#parent-to-child-on-changes">Intercept input property changes with <i>ngOnChanges</i> ("Source code version")</a><br/>
|
|
<a href="#child-to-parent">Parent listens for child event ("Colonize Universe")</a><br/>
|
|
<a href="#parent-to-child-local-var">Parent to child via <i>local variable</i>("Countdown to Liftoff")</a><br/>
|
|
<a href="#parent-to-view-child">Parent calls <i>ViewChild</i>("Countdown to Liftoff")</a><br/>
|
|
<a href="#bidirectional-service">Parent and children communicate via a service ("Mission Control")</a><br/>
|
|
|
|
<div id="parent-to-child">
|
|
<hero-parent></hero-parent>
|
|
</div>
|
|
<a href="#top" class="to-top">Back to Top</a>
|
|
|
|
<hr>
|
|
<div id="parent-to-child-setter">
|
|
<name-parent></name-parent>
|
|
</div>
|
|
<a href="#top" class="to-top">Back to Top</a>
|
|
|
|
<hr>
|
|
<div id="parent-to-child-on-changes">
|
|
<version-parent></version-parent>
|
|
</div>
|
|
<a href="#top" class="to-top">Back to Top</a>
|
|
|
|
<hr>
|
|
<div id="child-to-parent">
|
|
<vote-taker></vote-taker>
|
|
</div>
|
|
<a href="#top" class="to-top">Back to Top</a>
|
|
<hr>
|
|
|
|
<div id="parent-to-child-local-var">
|
|
<countdown-parent-lv></countdown-parent-lv>
|
|
</div>
|
|
<a href="#top" class="to-top">Back to Top</a>
|
|
<hr>
|
|
|
|
<div id="parent-to-view-child">
|
|
<countdown-parent-vc></countdown-parent-vc>
|
|
</div>
|
|
<a href="#top" class="to-top">Back to Top</a>
|
|
<hr>
|
|
|
|
<div id="bidirectional-service">
|
|
<mission-control></mission-control>
|
|
</div>
|
|
<a href="#top" class="to-top">Back to Top</a>
|
|
<hr>
|
|
|
|
|
|
<!--
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
-->"><input type="hidden" name="files[index.html]" value="<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Passing information from parent to child</title>
|
|
<script>document.write('<base href="' + document.location + '" />');</script>
|
|
<style>
|
|
.to-top {margin-top: 8px; display: block;}
|
|
</style>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="demo.css">
|
|
|
|
<!-- Polyfills -->
|
|
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
|
|
|
|
<script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
|
|
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
|
|
|
|
<script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
|
|
<script>
|
|
System.import('main.js').catch(function(err){ console.error(err); });
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<my-app>loading...</my-app>
|
|
</body>
|
|
|
|
</html>
|
|
|
|
|
|
<!--
|
|
Copyright 2016 Google Inc. All Rights Reserved.
|
|
Use of this source code is governed by an MIT-style license that
|
|
can be found in the LICENSE file at http://angular.io/license
|
|
-->"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="cookbook"><input type="hidden" name="tags[3]" value="component"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Component Communication Cookbook samples"></form><script>document.getElementById("mainForm").submit();</script></body></html> |