1414 lines
78 KiB
HTML
1414 lines
78 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="/* tslint:disable:forin member-ordering */
|
|
|
|
import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren } from '@angular/core';
|
|
|
|
import { Hero } from './hero';
|
|
|
|
// Alerter fn: monkey patch during test
|
|
export function alerter(msg?: string) {
|
|
window.alert(msg);
|
|
}
|
|
|
|
export enum Color {Red, Green, Blue};
|
|
|
|
/**
|
|
* Giant grab bag of stuff to drive the chapter
|
|
*/
|
|
@Component({
|
|
moduleId: module.id,
|
|
selector: 'my-app',
|
|
templateUrl: './app.component.html',
|
|
styleUrls: [ './app.component.css' ]
|
|
})
|
|
export class AppComponent implements AfterViewInit, OnInit {
|
|
|
|
ngOnInit() {
|
|
this.resetHeroes();
|
|
this.setCurrentClasses();
|
|
this.setCurrentStyles();
|
|
}
|
|
|
|
ngAfterViewInit() {
|
|
// Detect effects of NgForTrackBy
|
|
trackChanges(this.heroesNoTrackBy, () => this.heroesNoTrackByCount += 1);
|
|
trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount += 1);
|
|
}
|
|
|
|
@ViewChildren('noTrackBy') heroesNoTrackBy: QueryList<ElementRef>;
|
|
@ViewChildren('withTrackBy') heroesWithTrackBy: QueryList<ElementRef>;
|
|
|
|
actionName = 'Go for it';
|
|
alert = alerter;
|
|
badCurly = 'bad curly';
|
|
classes = 'special';
|
|
|
|
callFax(value: string) {this.alert(`Faxing ${value} ...`); }
|
|
callPhone(value: string) {this.alert(`Calling ${value} ...`); }
|
|
canSave = true;
|
|
|
|
changeIds() {
|
|
this.resetHeroes();
|
|
this.heroes.forEach(h => h.id += 10 * this.heroIdIncrement++);
|
|
this.heroesWithTrackByCountReset = -1;
|
|
}
|
|
|
|
clearTrackByCounts() {
|
|
const trackByCountReset = this.heroesWithTrackByCountReset;
|
|
this.resetHeroes();
|
|
this.heroesNoTrackByCount = -1;
|
|
this.heroesWithTrackByCount = trackByCountReset;
|
|
this.heroIdIncrement = 1;
|
|
}
|
|
|
|
clicked = '';
|
|
clickMessage = '';
|
|
clickMessage2 = '';
|
|
|
|
Color = Color;
|
|
color = Color.Red;
|
|
colorToggle() {this.color = (this.color === Color.Red) ? Color.Blue : Color.Red; }
|
|
|
|
currentHero: Hero;
|
|
|
|
deleteHero(hero: Hero) {
|
|
this.alert(`Delete ${hero ? hero.name : 'the hero'}.`);
|
|
}
|
|
|
|
evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';
|
|
|
|
fontSizePx = 16;
|
|
|
|
title = 'Template Syntax';
|
|
|
|
getStyles(el: Element) {
|
|
let styles = window.getComputedStyle(el);
|
|
let showStyles = {};
|
|
for (let p in this.currentStyles) { // only interested in these styles
|
|
showStyles[p] = styles[p];
|
|
}
|
|
return JSON.stringify(showStyles);
|
|
}
|
|
|
|
getVal() { return this.val; }
|
|
|
|
hero: Hero; // defined to demonstrate template context precedence
|
|
heroes: Hero[];
|
|
|
|
// trackBy change counting
|
|
heroesNoTrackByCount = 0;
|
|
heroesWithTrackByCount = 0;
|
|
heroesWithTrackByCountReset = 0;
|
|
|
|
heroIdIncrement = 1;
|
|
|
|
// heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
|
|
// Public Domain terms of use: http://www.wpclipart.com/terms.html
|
|
heroImageUrl = 'images/hero.png';
|
|
|
|
iconUrl = 'images/ng-logo.png';
|
|
isActive = false;
|
|
isSpecial = true;
|
|
isUnchanged = true;
|
|
|
|
nullHero: Hero = null;
|
|
|
|
onCancel(event: KeyboardEvent) {
|
|
let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).innerHTML : '';
|
|
this.alert('Canceled.' + evtMsg);
|
|
}
|
|
|
|
onClickMe(event: KeyboardEvent) {
|
|
let evtMsg = event ? ' Event target class is ' + (<HTMLElement>event.target).className : '';
|
|
this.alert('Click me.' + evtMsg);
|
|
}
|
|
|
|
onSave(event: KeyboardEvent) {
|
|
let evtMsg = event ? ' Event target is ' + (<HTMLElement>event.target).innerText : '';
|
|
this.alert('Saved.' + evtMsg);
|
|
}
|
|
|
|
onSubmit() { /* referenced but not used */}
|
|
|
|
product = {
|
|
name: 'frimfram',
|
|
price: 42
|
|
};
|
|
|
|
// updates with fresh set of cloned heroes
|
|
resetHeroes() {
|
|
this.heroes = Hero.heroes.map(hero => hero.clone());
|
|
this.currentHero = this.heroes[0];
|
|
this.heroesWithTrackByCountReset = 0;
|
|
}
|
|
|
|
private samenessCount = 5;
|
|
moreOfTheSame() { this.samenessCount++; };
|
|
get sameAsItEverWas() {
|
|
let result: string[] = Array(this.samenessCount);
|
|
for ( let i = result.length; i-- > 0; ) { result[i] = 'same as it ever was ...'; }
|
|
return result;
|
|
// return [1,2,3,4,5].map(id => {
|
|
// return {id:id, text: 'same as it ever was ...'};
|
|
// });
|
|
}
|
|
|
|
setUppercaseName(name: string) {
|
|
this.currentHero.name = name.toUpperCase();
|
|
}
|
|
|
|
currentClasses: {};
|
|
setCurrentClasses() {
|
|
// CSS classes: added/removed per current state of component properties
|
|
this.currentClasses = {
|
|
saveable: this.canSave,
|
|
modified: !this.isUnchanged,
|
|
special: this.isSpecial
|
|
};
|
|
}
|
|
|
|
currentStyles: {};
|
|
setCurrentStyles() {
|
|
this.currentStyles = {
|
|
// CSS styles: set per current state of component properties
|
|
'font-style': this.canSave ? 'italic' : 'normal',
|
|
'font-weight': !this.isUnchanged ? 'bold' : 'normal',
|
|
'font-size': this.isSpecial ? '24px' : '12px'
|
|
};
|
|
}
|
|
|
|
trackByHeroes(index: number, hero: Hero): number { return hero.id; }
|
|
|
|
trackById(index: number, item: any): number { return item['id']; }
|
|
|
|
val = 2;
|
|
// villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png'
|
|
// Public Domain terms of use http://www.clker.com/disclaimer.html
|
|
villainImageUrl = 'images/villain.png';
|
|
}
|
|
|
|
// helper to track changes to viewChildren
|
|
function trackChanges(views: QueryList<ElementRef>, changed: () => void) {
|
|
let oldRefs = views.toArray();
|
|
views.changes.subscribe((changes: QueryList<ElementRef>) => {
|
|
const changedRefs = changes.toArray();
|
|
// Is every changed ElemRef the same as old and in the same position
|
|
const isSame = oldRefs.every((v, i) => v === changedRefs[i]);
|
|
if (!isSame) {
|
|
oldRefs = changedRefs;
|
|
// wait a tick because called after views are constructed
|
|
setTimeout(changed, 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/app.module.1.ts]" value="import { NgModule } from '@angular/core';
|
|
import { BrowserModule } from '@angular/platform-browser';
|
|
import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular
|
|
|
|
/* Other imports */
|
|
|
|
@NgModule({
|
|
imports: [
|
|
BrowserModule,
|
|
FormsModule // <--- import into the NgModule
|
|
],
|
|
/* Other module metadata */
|
|
})
|
|
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/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 { BigHeroDetailComponent, HeroDetailComponent } from './hero-detail.component';
|
|
import { ClickDirective, ClickDirective2 } from './click.directive';
|
|
import { HeroFormComponent } from './hero-form.component';
|
|
import { heroSwitchComponents } from './hero-switch.components';
|
|
import { SizerComponent } from './sizer.component';
|
|
|
|
@NgModule({
|
|
imports: [
|
|
BrowserModule,
|
|
FormsModule
|
|
],
|
|
declarations: [
|
|
AppComponent,
|
|
BigHeroDetailComponent,
|
|
HeroDetailComponent,
|
|
HeroFormComponent,
|
|
heroSwitchComponents,
|
|
ClickDirective,
|
|
ClickDirective2,
|
|
SizerComponent
|
|
],
|
|
bootstrap: [ AppComponent ]
|
|
})
|
|
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/click.directive.ts]" value="/* tslint:disable use-output-property-decorator */
|
|
import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
|
|
|
|
@Directive({selector: '[myClick]'})
|
|
export class ClickDirective {
|
|
@Output('myClick') clicks = new EventEmitter<string>(); // @Output(alias) propertyName = ...
|
|
|
|
toggle = false;
|
|
|
|
constructor(el: ElementRef) {
|
|
el.nativeElement
|
|
.addEventListener('click', (event: Event) => {
|
|
this.toggle = !this.toggle;
|
|
this.clicks.emit(this.toggle ? 'Click!' : '');
|
|
});
|
|
}
|
|
}
|
|
|
|
@Directive({
|
|
selector: '[myClick2]',
|
|
outputs: ['clicks:myClick'] // propertyName:alias
|
|
})
|
|
export class ClickDirective2 {
|
|
clicks = new EventEmitter<string>();
|
|
toggle = false;
|
|
|
|
constructor(el: ElementRef) {
|
|
el.nativeElement
|
|
.addEventListener('click', (event: Event) => {
|
|
this.toggle = !this.toggle;
|
|
this.clicks.emit(this.toggle ? 'Click2!' : '');
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
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-detail.component.ts]" value="/* tslint:disable use-input-property-decorator use-output-property-decorator */
|
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
|
|
import { Hero } from './hero';
|
|
|
|
@Component({
|
|
selector: 'hero-detail',
|
|
inputs: ['hero'],
|
|
outputs: ['deleteRequest'],
|
|
styles: ['button { margin-left: 8px} div {margin: 8px 0} img {height:24px}'],
|
|
template: `
|
|
<div>
|
|
<img src="{{heroImageUrl}}">
|
|
<span [style.text-decoration]="lineThrough">
|
|
{{prefix}} {{hero?.name}}
|
|
</span>
|
|
<button (click)="delete()">Delete</button>
|
|
</div>`
|
|
})
|
|
export class HeroDetailComponent {
|
|
hero: Hero = new Hero(-1, '', 'Zzzzzzzz'); // default sleeping hero
|
|
// heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
|
|
// Public Domain terms of use: http://www.wpclipart.com/terms.html
|
|
heroImageUrl = 'images/hero.png';
|
|
lineThrough = '';
|
|
@Input() prefix = '';
|
|
|
|
// This component make a request but it can't actually delete a hero.
|
|
deleteRequest = new EventEmitter<Hero>();
|
|
|
|
delete() {
|
|
this.deleteRequest.emit(this.hero);
|
|
this.lineThrough = this.lineThrough ? '' : 'line-through';
|
|
}
|
|
}
|
|
|
|
@Component({
|
|
selector: 'big-hero-detail',
|
|
template: `
|
|
<div class="detail">
|
|
<img src="{{heroImageUrl}}">
|
|
<div><b>{{hero?.name}}</b></div>
|
|
<div>Name: {{hero?.name}}</div>
|
|
<div>Emotion: {{hero?.emotion}}</div>
|
|
<div>Birthdate: {{hero?.birthdate | date:'longDate'}}</div>
|
|
<div>Web: <a href="{{hero?.url}}" target="_blank">{{hero?.url}}</a></div>
|
|
<div>Rate/hr: {{hero?.rate | currency:'EUR'}}</div>
|
|
<br clear="all">
|
|
<button (click)="delete()">Delete</button>
|
|
</div>
|
|
`,
|
|
styles: [`
|
|
.detail { border: 1px solid black; padding: 4px; max-width: 450px; }
|
|
img { float: left; margin-right: 8px; height: 100px; }
|
|
`]
|
|
})
|
|
export class BigHeroDetailComponent extends HeroDetailComponent {
|
|
|
|
@Input() hero: Hero;
|
|
@Output() deleteRequest = new EventEmitter<Hero>();
|
|
|
|
delete() {
|
|
this.deleteRequest.emit(this.hero);
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
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-form.component.ts]" value="import { Component, Input, ViewChild } from '@angular/core';
|
|
import { NgForm } from '@angular/forms';
|
|
|
|
import { Hero } from './hero';
|
|
|
|
@Component({
|
|
moduleId: module.id,
|
|
selector: 'hero-form',
|
|
templateUrl: './hero-form.component.html',
|
|
styles: [`
|
|
button { margin: 6px 0; }
|
|
#heroForm { border: 1px solid black; margin: 20px 0; padding: 8px; max-width: 350px; }
|
|
`]
|
|
})
|
|
export class HeroFormComponent {
|
|
@Input() hero: Hero;
|
|
@ViewChild('heroForm') form: NgForm;
|
|
|
|
private _submitMessage = '';
|
|
|
|
get submitMessage() {
|
|
if (!this.form.valid) {
|
|
this._submitMessage = '';
|
|
}
|
|
return this._submitMessage;
|
|
}
|
|
|
|
onSubmit(form: NgForm) {
|
|
this._submitMessage = 'Submitted. form value is ' + JSON.stringify(form.value);
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
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-switch.components.ts]" value="import { Component, Input } from '@angular/core';
|
|
import { Hero } from './hero';
|
|
|
|
@Component({
|
|
selector: 'happy-hero',
|
|
template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
|
|
})
|
|
export class HappyHeroComponent {
|
|
@Input() hero: Hero;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'sad-hero',
|
|
template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
|
|
})
|
|
export class SadHeroComponent {
|
|
@Input() hero: Hero;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'confused-hero',
|
|
template: `Are you as confused as {{hero.name}}?`
|
|
})
|
|
export class ConfusedHeroComponent {
|
|
@Input() hero: Hero;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'unknown-hero',
|
|
template: `{{message}}`
|
|
})
|
|
export class UnknownHeroComponent {
|
|
@Input() hero: Hero;
|
|
get message() {
|
|
return this.hero && this.hero.name ?
|
|
`${this.hero.name} is strange and mysterious.` :
|
|
'Are you feeling indecisive?';
|
|
}
|
|
}
|
|
|
|
export const heroSwitchComponents =
|
|
[ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ];
|
|
|
|
|
|
/*
|
|
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 {
|
|
static nextId = 1;
|
|
|
|
static heroes: Hero[] = [
|
|
new Hero(
|
|
325,
|
|
'Hercules',
|
|
'happy',
|
|
new Date(1970, 1, 25),
|
|
'http://www.imdb.com/title/tt0065832/'
|
|
),
|
|
new Hero(1, 'Mr. Nice', 'happy'),
|
|
new Hero(2, 'Narco', 'sad' ),
|
|
new Hero(3, 'Windstorm', 'confused' ),
|
|
new Hero(4, 'Magneta')
|
|
];
|
|
|
|
|
|
constructor(
|
|
public id?: number,
|
|
public name?: string,
|
|
public emotion?: string,
|
|
public birthdate?: Date,
|
|
public url?: string,
|
|
public rate = 100,
|
|
) {
|
|
this.id = id ? id : Hero.nextId++;
|
|
}
|
|
|
|
clone(): Hero {
|
|
return Object.assign(new Hero(), this);
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
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/sizer.component.ts]" value="import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'my-sizer',
|
|
template: `
|
|
<div>
|
|
<button (click)="dec()" title="smaller">-</button>
|
|
<button (click)="inc()" title="bigger">+</button>
|
|
<label [style.font-size.px]="size">FontSize: {{size}}px</label>
|
|
</div>`
|
|
})
|
|
export class SizerComponent {
|
|
@Input() size: number | string;
|
|
@Output() sizeChange = new EventEmitter<number>();
|
|
|
|
dec() { this.resize(-1); }
|
|
inc() { this.resize(+1); }
|
|
|
|
resize(delta: number) {
|
|
this.size = Math.min(40, Math.max(8, +this.size + delta));
|
|
this.sizeChange.emit(this.size);
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
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[app/app.component.css]" value="a.to-toc { margin: 30px 0; }
|
|
button { font-size: 100%; margin: 0 2px; }
|
|
div[clickable] {cursor: pointer; max-width: 200px; margin: 16px 0}
|
|
#noTrackByCnt, #withTrackByCnt {color: darkred; max-width: 450px; margin: 4px;}
|
|
img {height: 100px;}
|
|
.box {border: 1px solid black; padding: 6px; max-width: 450px;}
|
|
.child-div {margin-left: 1em; font-weight: normal}
|
|
.context {margin-left: 1em;}
|
|
.hidden {display: none}
|
|
.parent-div {margin-top: 1em; font-weight: bold}
|
|
.special {font-weight:bold; font-size: x-large}
|
|
.bad {color: red;}
|
|
.saveable {color: limegreen;}
|
|
.curly, .modified {font-family: "Brush Script MT"}
|
|
.toe {margin-left: 1em; font-style: italic;}
|
|
little-hero {color:blue; font-size: smaller; background-color: Turquoise }
|
|
.to-toc {margin-top: 10px; display: block}
|
|
|
|
|
|
/*
|
|
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[template-syntax.css]" value="fieldset {border-style:none}
|
|
img {height: 100px;}
|
|
.box {border: 1px solid black; padding:3px}
|
|
.child-div {margin-left: 1em; font-weight: normal}
|
|
.hidden {display: none}
|
|
.parent-div {margin-top: 1em; font-weight: bold}
|
|
.special {font-weight:bold; font-size: x-large}
|
|
.bad {color: red;}
|
|
.saveable {color: limegreen;}
|
|
.curly, .modified {font-family: "Brush Script MT"}
|
|
.toe {margin-left: 1em; font-style: italic;}
|
|
little-hero {color:blue; font-size: smaller; background-color: Turquoise }
|
|
.to-toc {margin-top: 10px; display: block}
|
|
|
|
|
|
/*
|
|
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="<a id="toc"></a>
|
|
<h1>Template Syntax</h1>
|
|
<a href="#interpolation">Interpolation</a><br>
|
|
<a href="#expression-context">Expression context</a><br>
|
|
<a href="#statement-context">Statement context</a><br>
|
|
<a href="#mental-model">Mental Model</a><br>
|
|
<a href="#buttons">Buttons</a><br>
|
|
<a href="#prop-vs-attrib">Properties vs. Attributes</a><br>
|
|
<br>
|
|
<a href="#property-binding">Property Binding</a><br>
|
|
<div style="margin-left:8px">
|
|
<a href="#attribute-binding">Attribute Binding</a><br>
|
|
<a href="#class-binding">Class Binding</a><br>
|
|
<a href="#style-binding">Style Binding</a><br>
|
|
</div>
|
|
<br>
|
|
<a href="#event-binding">Event Binding</a><br>
|
|
<a href="#two-way">Two-way Binding</a><br>
|
|
<br>
|
|
<div>Directives</div>
|
|
<div style="margin-left:8px">
|
|
<a href="#ngModel">NgModel (two-way) Binding</a><br>
|
|
<a href="#ngClass">NgClass Binding</a><br>
|
|
<a href="#ngStyle">NgStyle Binding</a><br>
|
|
<a href="#ngIf">NgIf</a><br>
|
|
<a href="#ngFor">NgFor</a><br>
|
|
<div style="margin-left:8px">
|
|
<a href="#ngFor-index">NgFor with index</a><br>
|
|
<a href="#ngFor-trackBy">NgFor with trackBy</a><br>
|
|
</div>
|
|
<a href="#ngSwitch">NgSwitch</a><br>
|
|
</div>
|
|
<br>
|
|
<a href="#ref-vars">Template reference variables</a><br>
|
|
<a href="#inputs-and-outputs">Inputs and outputs</a><br>
|
|
<a href="#pipes">Pipes</a><br>
|
|
<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
|
|
<a href="#enums">Enums</a><br>
|
|
|
|
<!-- Interpolation and expressions -->
|
|
<hr><h2 id="interpolation">Interpolation</h2>
|
|
|
|
<p>My current hero is {{currentHero.name}}</p>
|
|
|
|
<h3>
|
|
{{title}}
|
|
<img src="{{heroImageUrl}}" style="height:30px">
|
|
</h3>
|
|
|
|
<!-- "The sum of 1 + 1 is 2" -->
|
|
<p>The sum of 1 + 1 is {{1 + 1}}</p>
|
|
|
|
<!-- "The sum of 1 + 1 is not 4" -->
|
|
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<hr><h2 id="expression-context">Expression context</h2>
|
|
|
|
<p>Component expression context (&#123;&#123;title&#125;&#125;, [hidden]="isUnchanged")</p>
|
|
<div class="context">
|
|
{{title}}
|
|
<span [hidden]="isUnchanged">changed</span>
|
|
</div>
|
|
|
|
|
|
<p>Template input variable expression context (let hero)</p>
|
|
<!-- template hides the following; plenty of examples later -->
|
|
<template>
|
|
<div *ngFor="let hero of heroes">{{hero.name}}</div>
|
|
</template>
|
|
|
|
<p>Template reference variable expression context (#heroInput)</p>
|
|
<div (keyup)="0" class="context">
|
|
Type something:
|
|
<input #heroInput> {{heroInput.value}}
|
|
</div>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<hr><h2 id="statement-context">Statement context</h2>
|
|
|
|
<p>Component statement context ( (click)="onSave() )
|
|
<div class="context">
|
|
<button (click)="deleteHero()">Delete hero</button>
|
|
</div>
|
|
|
|
<p>Template $event statement context</p>
|
|
<div class="context">
|
|
<button (click)="onSave($event)">Save</button>
|
|
</div>
|
|
|
|
<p>Template input variable statement context (let hero)</p>
|
|
<!-- template hides the following; plenty of examples later -->
|
|
<div class="context">
|
|
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
|
|
</div>
|
|
|
|
<p>Template reference variable statement context (#heroForm)</p>
|
|
<div class="context">
|
|
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
|
|
</div>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- New Mental Model -->
|
|
<hr><h2 id="mental-model">New Mental Model</h2>
|
|
|
|
<!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
|
|
<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
|
|
<div class="special">Mental Model</div>
|
|
<img src="images/hero.png">
|
|
<button disabled>Save</button>
|
|
<br><br>
|
|
|
|
<div>
|
|
<!-- Normal HTML -->
|
|
<div class="special">Mental Model</div>
|
|
<!-- Wow! A new element! -->
|
|
<hero-detail></hero-detail>
|
|
</div>
|
|
<br><br>
|
|
|
|
<div>
|
|
<!-- Bind button disabled state to `isUnchanged` property -->
|
|
<button [disabled]="isUnchanged">Save</button>
|
|
</div>
|
|
<br><br>
|
|
|
|
<div>
|
|
<img [src] = "heroImageUrl">
|
|
<hero-detail [hero]="currentHero"></hero-detail>
|
|
<div [ngClass] = "{selected: isSelected}"></div>
|
|
</div>
|
|
<br><br>
|
|
|
|
<button (click) = "onSave()">Save</button>
|
|
<hero-detail (deleteRequest)="deleteHero()"></hero-detail>
|
|
<div (myClick)="clicked=$event" clickable>click me</div>
|
|
{{clicked}}
|
|
<br><br>
|
|
|
|
<div>
|
|
Hero Name:
|
|
<input [(ngModel)]="heroName">
|
|
{{heroName}}
|
|
</div>
|
|
<br><br>
|
|
|
|
<button [attr.aria-label]="help">help</button>
|
|
<br><br>
|
|
|
|
<div [class.special]="isSpecial">Special</div>
|
|
<br><br>
|
|
|
|
<button [style.color] = "isSpecial ? 'red' : 'green'">
|
|
button</button>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- property vs. attribute -->
|
|
<hr><h2 id="prop-vs-attrib">Property vs. Attribute (img examples)</h2>
|
|
<!-- examine the following <img> tag in the browser tools -->
|
|
<img src="images/ng-logo.png"
|
|
[src]="heroImageUrl">
|
|
|
|
<br><br>
|
|
|
|
<img [src]="iconUrl"/>
|
|
<img bind-src="heroImageUrl"/>
|
|
<img [attr.src]="villainImageUrl"/>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- buttons -->
|
|
<hr><h2 id="buttons">Buttons</h2>
|
|
|
|
<button>Enabled (but does nothing)</button>
|
|
<button disabled>Disabled</button>
|
|
<button disabled=false>Still disabled</button>
|
|
<br><br>
|
|
<button disabled>disabled by attribute</button>
|
|
<button [disabled]="isUnchanged">disabled by property binding</button>
|
|
<br><br>
|
|
<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
|
|
<button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- property binding -->
|
|
<hr><h2 id="property-binding">Property Binding</h2>
|
|
|
|
<img [src]="heroImageUrl">
|
|
<button [disabled]="isUnchanged">Cancel is disabled</button>
|
|
<div [ngClass]="classes">[ngClass] binding to the classes property</div>
|
|
<hero-detail [hero]="currentHero"></hero-detail>
|
|
<img bind-src="heroImageUrl">
|
|
|
|
<!-- ERROR: HeroDetailComponent.hero expects a
|
|
Hero object, not the string "currentHero" -->
|
|
<div *ngIf="false">
|
|
<hero-detail hero="currentHero"></hero-detail>
|
|
</div>
|
|
<hero-detail prefix="You are my" [hero]="currentHero"></hero-detail>
|
|
|
|
<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
|
|
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>
|
|
|
|
<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
|
|
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
|
|
|
|
<!--
|
|
Angular generates warnings for these two lines as it sanitizes them
|
|
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
|
|
-->
|
|
<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
|
|
<p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- attribute binding -->
|
|
<hr><h2 id="attribute-binding">Attribute Binding</h2>
|
|
|
|
<!-- create and set a colspan attribute -->
|
|
<table border=1>
|
|
<!-- expression calculates colspan=2 -->
|
|
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
|
|
|
|
<!-- ERROR: There is no `colspan` property to set!
|
|
<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
|
|
-->
|
|
|
|
<tr><td>Five</td><td>Six</td></tr>
|
|
</table>
|
|
|
|
<br>
|
|
<!-- create and set an aria attribute for assistive technology -->
|
|
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
|
|
<br><br>
|
|
|
|
<!-- The following effects are not discussed in the chapter -->
|
|
<div>
|
|
<!-- any use of [attr.disabled] creates the disabled attribute -->
|
|
<button [attr.disabled]="isUnchanged">Disabled</button>
|
|
|
|
<button [attr.disabled]="!isUnchanged">Disabled as well</button>
|
|
|
|
<!-- we'd have to remove it with property binding -->
|
|
<button disabled [disabled]="false">Enabled (but inert)</button>
|
|
</div>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- class binding -->
|
|
<hr><h2 id="class-binding">Class Binding</h2>
|
|
|
|
<!-- standard class attribute setting -->
|
|
<div class="bad curly special">Bad curly special</div>
|
|
|
|
<!-- reset/override all class names with a binding -->
|
|
<div class="bad curly special"
|
|
[class]="badCurly">Bad curly</div>
|
|
|
|
<!-- toggle the "special" class on/off with a property -->
|
|
<div [class.special]="isSpecial">The class binding is special</div>
|
|
|
|
<!-- binding to `class.special` trumps the class attribute -->
|
|
<div class="special"
|
|
[class.special]="!isSpecial">This one is not so special</div>
|
|
|
|
<div bind-class.special="isSpecial">This class binding is special too</div>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!--style binding -->
|
|
<hr><h2 id="style-binding">Style Binding</h2>
|
|
|
|
<button [style.color] = "isSpecial ? 'red': 'green'">Red</button>
|
|
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
|
|
|
|
<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
|
|
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- event binding -->
|
|
<hr><h2 id="event-binding">Event Binding</h2>
|
|
|
|
<button (click)="onSave()">Save</button>
|
|
|
|
<button on-click="onSave()">On Save</button>
|
|
|
|
<div>
|
|
<!-- `myClick` is an event on the custom `ClickDirective` -->
|
|
<div (myClick)="clickMessage=$event" clickable>click with myClick</div>
|
|
{{clickMessage}}
|
|
</div>
|
|
|
|
|
|
<!-- binding to a nested component -->
|
|
<hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></hero-detail>
|
|
<br>
|
|
|
|
<big-hero-detail
|
|
(deleteRequest)="deleteHero($event)"
|
|
[hero]="currentHero">
|
|
</big-hero-detail>
|
|
|
|
<div class="parent-div" (click)="onClickMe($event)" clickable>Click me
|
|
<div class="child-div">Click me too!</div>
|
|
</div>
|
|
|
|
<!-- Will save only once -->
|
|
<div (click)="onSave()" clickable>
|
|
<button (click)="onSave()">Save, no propagation</button>
|
|
</div>
|
|
|
|
<!-- Will save twice -->
|
|
<div (click)="onSave()" clickable>
|
|
<button (click)="onSave() || true">Save w/ propagation</button>
|
|
</div>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<hr><h2 id="two-way">Two-way Binding</h2>
|
|
<div id="two-way-1">
|
|
<my-sizer [(size)]="fontSizePx"></my-sizer>
|
|
<div [style.font-size.px]="fontSizePx">Resizable Text</div>
|
|
<label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
|
|
</div>
|
|
<br>
|
|
<div id="two-way-2">
|
|
<h3>De-sugared two-way binding</h3>
|
|
<my-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></my-sizer>
|
|
</div>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- Two way data binding unwound;
|
|
passing the changed display value to the event handler via `$event` -->
|
|
<hr><h2 id="ngModel">NgModel (two-way) Binding</h2>
|
|
|
|
<h3>Result: {{currentHero.name}}</h3>
|
|
|
|
<input [value]="currentHero.name"
|
|
(input)="currentHero.name=$event.target.value" >
|
|
without NgModel
|
|
<br>
|
|
<input [(ngModel)]="currentHero.name">
|
|
[(ngModel)]
|
|
<br>
|
|
<input bindon-ngModel="currentHero.name">
|
|
bindon-ngModel
|
|
<br>
|
|
<input
|
|
[ngModel]="currentHero.name"
|
|
(ngModelChange)="currentHero.name=$event">
|
|
(ngModelChange) = "...name=$event"
|
|
<br>
|
|
<input
|
|
[ngModel]="currentHero.name"
|
|
(ngModelChange)="setUppercaseName($event)">
|
|
(ngModelChange) = "setUppercaseName($event)"
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- NgClass binding -->
|
|
<hr><h2 id="ngClass">NgClass Binding</h2>
|
|
|
|
<p>currentClasses returns {{currentClasses | json}}</p>
|
|
<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>
|
|
|
|
<!-- not used in chapter -->
|
|
<br>
|
|
<label>saveable <input type="checkbox" [(ngModel)]="canSave"></label> |
|
|
<label>modified: <input type="checkbox" [value]="!isUnchanged" (change)="isUnchanged=!isUnchanged"></label> |
|
|
<label>special: <input type="checkbox" [(ngModel)]="isSpecial"></label>
|
|
<button (click)="setCurrentClasses()">Refresh currentClasses</button>
|
|
<br><br>
|
|
<div [ngClass]="currentClasses">
|
|
This div should be {{ canSave ? "": "not"}} saveable,
|
|
{{ isUnchanged ? "unchanged" : "modified" }} and,
|
|
{{ isSpecial ? "": "not"}} special after clicking "refresh".</div>
|
|
<br><br>
|
|
|
|
<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
|
|
|
|
<div class="bad curly special">Bad curly special</div>
|
|
<div [ngClass]="{bad:false, curly:true, special:true}">Curly special</div>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- NgStyle binding -->
|
|
<hr><h2 id="ngStyle">NgStyle Binding</h2>
|
|
|
|
<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
|
|
This div is x-large.
|
|
</div>
|
|
|
|
<h3>[ngStyle] binding to `currentStyles` - CSS property names</h3>
|
|
<p>currentStyles returns {{currentStyles | json}}</p>
|
|
<div [ngStyle]="currentStyles">
|
|
This div is initially italic, normal weight, and extra large (24px).
|
|
</div>
|
|
|
|
<!-- not used in chapter -->
|
|
<br>
|
|
<label>italic: <input type="checkbox" [(ngModel)]="canSave"></label> |
|
|
<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"></label> |
|
|
<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"></label>
|
|
<button (click)="setCurrentStyles()">Refresh currentStyles</button>
|
|
<br><br>
|
|
<div [ngStyle]="currentStyles">
|
|
This div should be {{ canSave ? "italic": "plain"}},
|
|
{{ isUnchanged ? "normal weight" : "bold" }} and,
|
|
{{ isSpecial ? "extra large": "normal size"}} after clicking "refresh".</div>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- NgIf binding -->
|
|
<hr><h2 id="ngIf">NgIf Binding</h2>
|
|
|
|
<hero-detail *ngIf="isActive"></hero-detail>
|
|
|
|
<div *ngIf="currentHero">Hello, {{currentHero.name}}</div>
|
|
<div *ngIf="nullHero">Hello, {{nullHero.name}}</div>
|
|
|
|
<!-- NgIf binding with template (no *) -->
|
|
|
|
<template [ngIf]="currentHero">Add {{currentHero.name}} with template</template>
|
|
|
|
<!-- Does not show because isActive is false! -->
|
|
<div>Hero Detail removed from DOM (via template) because isActive is false</div>
|
|
<template [ngIf]="isActive">
|
|
<hero-detail></hero-detail>
|
|
</template>
|
|
|
|
<!-- isSpecial is true -->
|
|
<div [class.hidden]="!isSpecial">Show with class</div>
|
|
<div [class.hidden]="isSpecial">Hide with class</div>
|
|
|
|
<!-- HeroDetail is in the DOM but hidden -->
|
|
<hero-detail [class.hidden]="isSpecial"></hero-detail>
|
|
|
|
<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
|
|
<div [style.display]="isSpecial ? 'none' : 'block'">Hide with style</div>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- NgFor binding -->
|
|
<hr><h2 id="ngFor">NgFor Binding</h2>
|
|
|
|
<div class="box">
|
|
<div *ngFor="let hero of heroes">{{hero.name}}</div>
|
|
</div>
|
|
<br>
|
|
|
|
<div class="box">
|
|
<!-- *ngFor w/ hero-detail Component -->
|
|
<hero-detail *ngFor="let hero of heroes" [hero]="hero"></hero-detail>
|
|
</div>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<h4 id="ngFor-index">*ngFor with index</h4>
|
|
<p>with <i>semi-colon</i> separator</p>
|
|
<div class="box">
|
|
<div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
|
|
</div>
|
|
|
|
<p>with <i>comma</i> separator</p>
|
|
<div class="box">
|
|
<!-- Ex: "1 - Hercules" -->
|
|
<div *ngFor="let hero of heroes, let i=index">{{i + 1}} - {{hero.name}}</div>
|
|
</div>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<h4 id="ngFor-trackBy">*ngFor trackBy</h4>
|
|
<button (click)="resetHeroes()">Reset heroes</button>
|
|
<button (click)="changeIds()">Change ids</button>
|
|
<button (click)="clearTrackByCounts()">Clear counts</button>
|
|
|
|
<p><i>without</i> trackBy</p>
|
|
<div class="box">
|
|
<div #noTrackBy *ngFor="let hero of heroes">({{hero.id}}) {{hero.name}}</div>
|
|
|
|
<div id="noTrackByCnt" *ngIf="heroesNoTrackByCount" >
|
|
Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
|
|
</div>
|
|
</div>
|
|
|
|
<p>with trackBy</p>
|
|
<div class="box">
|
|
<div #withTrackBy *ngFor="let hero of heroes; trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
|
|
|
|
<div id="withTrackByCnt" *ngIf="heroesWithTrackByCount">
|
|
Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
|
|
</div>
|
|
</div>
|
|
|
|
<br><br><br>
|
|
|
|
<p>with trackBy and <i>semi-colon</i> separator</p>
|
|
<div class="box">
|
|
<div *ngFor="let hero of heroes; trackBy: trackByHeroes">
|
|
({{hero.id}}) {{hero.name}}
|
|
</div>
|
|
</div>
|
|
|
|
<p>with trackBy and <i>comma</i> separator</p>
|
|
<div class="box">
|
|
<div *ngFor="let hero of heroes, trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
|
|
</div>
|
|
|
|
<p>with trackBy and <i>space</i> separator</p>
|
|
<div class="box">
|
|
<div *ngFor="let hero of heroes trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
|
|
</div>
|
|
|
|
<p>with <i>generic</i> trackById function</p>
|
|
<div class="box">
|
|
<div *ngFor="let hero of heroes, trackBy: trackById">({{hero.id}}) {{hero.name}}</div>
|
|
</div>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- NgSwitch binding -->
|
|
<hr><h2 id="ngSwitch">NgSwitch Binding</h2>
|
|
|
|
<div>Pick your favorite hero</div>
|
|
<p>
|
|
<ng-container *ngFor="let h of heroes">
|
|
<label>
|
|
<input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
|
|
</label>
|
|
</ng-container>
|
|
</p>
|
|
|
|
<div [ngSwitch]="currentHero.emotion">
|
|
<happy-hero *ngSwitchCase="'happy'" [hero]="currentHero"></happy-hero>
|
|
<sad-hero *ngSwitchCase="'sad'" [hero]="currentHero"></sad-hero>
|
|
<confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></confused-hero>
|
|
<div *ngSwitchCase="'confused'">Are you as confused as {{currentHero.name}}?</div>
|
|
<unknown-hero *ngSwitchDefault [hero]="currentHero"></unknown-hero>
|
|
</div>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- template reference variable -->
|
|
<hr><h2 id="ref-vars">Template reference variables</h2>
|
|
|
|
<input #phone placeholder="phone number">
|
|
|
|
<!-- lots of other elements -->
|
|
|
|
<!-- phone refers to the input element; pass its `value` to an event handler -->
|
|
<button (click)="callPhone(phone.value)">Call</button>
|
|
|
|
<input ref-fax placeholder="fax number">
|
|
<button (click)="callFax(fax.value)">Fax</button>
|
|
|
|
<!-- btn refers to the button element; show its disabled state -->
|
|
<button #btn disabled [innerHTML]="'disabled by attribute: '+btn.disabled"></button>
|
|
|
|
<h4>Example Form</h4>
|
|
<hero-form [hero]="currentHero"></hero-form>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- inputs and output -->
|
|
<hr><h2 id="inputs-and-outputs">Inputs and Outputs</h2>
|
|
|
|
<img [src]="iconUrl"/>
|
|
<button (click)="onSave()">Save</button>
|
|
|
|
<hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
|
|
</hero-detail>
|
|
|
|
<div (myClick)="clickMessage2=$event" clickable>myClick2</div>
|
|
{{clickMessage2}}
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- Pipes -->
|
|
<hr><h2 id="pipes">Pipes</h2>
|
|
|
|
<div>Title through uppercase pipe: {{title | uppercase}}</div>
|
|
|
|
<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
|
|
<div>
|
|
Title through a pipe chain:
|
|
{{title | uppercase | lowercase}}
|
|
</div>
|
|
|
|
<!-- pipe with configuration argument => "February 25, 1970" -->
|
|
<div>Birthdate: {{currentHero?.birthdate | date:'longDate'}}</div>
|
|
|
|
<div>{{currentHero | json}}</div>
|
|
|
|
<div>Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}</div>
|
|
|
|
<div>
|
|
<!-- pipe price to USD and display the $ symbol -->
|
|
<label>Price: </label>{{product.price | currency:'USD':true}}
|
|
</div>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- Null values and the safe navigation operator -->
|
|
<hr><h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>
|
|
|
|
<div>
|
|
The title is {{title}}
|
|
</div>
|
|
|
|
<div>
|
|
The current hero's name is {{currentHero?.name}}
|
|
</div>
|
|
|
|
<div>
|
|
The current hero's name is {{currentHero.name}}
|
|
</div>
|
|
|
|
|
|
<!--
|
|
The null hero's name is {{nullHero.name}}
|
|
|
|
See console log:
|
|
TypeError: Cannot read property 'name' of null in [null]
|
|
-->
|
|
|
|
<!--No hero, div not displayed, no error -->
|
|
<div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>
|
|
|
|
<div>
|
|
The null hero's name is {{nullHero && nullHero.name}}
|
|
</div>
|
|
|
|
<div>
|
|
<!-- No hero, no problem! -->
|
|
The null hero's name is {{nullHero?.name}}
|
|
</div>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
<!-- TODO: discuss this in the Style binding section -->
|
|
<!-- enums in bindings -->
|
|
<hr><h2 id="enums">Enums in binding</h2>
|
|
|
|
<p>
|
|
The name of the Color.Red enum is {{Color[Color.Red]}}.<br>
|
|
The current color is {{Color[color]}} and its number is {{color}}.<br>
|
|
<button [style.color]="Color[color]" (click)="colorToggle()">Enum Toggle</button>
|
|
</p>
|
|
|
|
<a class="to-toc" href="#toc">top</a>
|
|
|
|
|
|
<!--
|
|
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-form.component.html]" value="<div id=heroForm>
|
|
<form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
|
|
<div class="form-group">
|
|
<label for="name">Name
|
|
<input class="form-control" name="name" required [(ngModel)]="hero.name">
|
|
</label>
|
|
</div>
|
|
<button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
|
|
</form>
|
|
<div [hidden]="!heroForm.form.valid">
|
|
{{submitMessage}}
|
|
<div>
|
|
</div>
|
|
|
|
|
|
|
|
<!--
|
|
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>
|
|
<title>Template Syntax</title>
|
|
<script>document.write('<base href="' + document.location + '" />');</script>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="styles.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="files[images/hero.base64.png]" value="iVBORw0KGgoAAAANSUhEUgAAAQwAAAEoCAMAAACabz+BAAAC/VBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmnzsbAAAA/3RSTlMAAQIDBQYHCAQLDhEUFhcQDAoNEhghRnOi1Ofy/f/20YpECRUbMnbO+vz+8fOUIh8qdeD59IQaJj2q4hM3mu8lYPAkJyu5lijG+C68Hom09U4ZnIgPI0Dq2lV6No+h04ufHWMs1uFnV2bP9zlv+1SC6TPVjS8wYo6+5e3Zs1xNWbCuaXxPtXiHW+R0pFYcm6u/NKjKk7I/0uZLMYM6buvukNCXR1KRXrivpd1qo8yMy8hh40l9RXe3pjusvbveTLaYyew4LbHClUhdZX9Rx6dkX8O6IFqdgMWZNVDcrd/EQsFYe4aS2ylTgaA+cGhyfp5Da3E8QXno2NdswG3NSoWzxq+5AAAYQ0lEQVR4AeTY44IdMRTA8cxkeG2fa81Z27ateuv2/b/XZlLs7j35PcI/DvvHNJ1zw7Rs2zIdrmtMSR9LmLbr8weCoVAwEI7YDtdUDWFY0Vg8kUylM9lcvgDFXKlccRWs8WZKVCP+Wr3RbLU9hI+8ru6eXtVmBTddf6Kvf2CwgPCNoeERS60Wdnh0bHxiCOFHipNJlVpEp5LTM234mcJsQ5kWTrQ2Nz+L8AsLi8rMi+DSjAe/hIO2Ki2WVxB+Y2hVjRa1tXWE39rYZORxe2puAkHAFqNOt/y9zQKIwDr1RWL4tisbIGaH0cajic1dELSn0Z4Ypn9u3wNRixrtiXHQOEQQdeRQruEcn5yegbBzS6e8SqaWLwogrOhywjHsROMWgjAv5jCy9Ojo7TsSMTDGKceoT98F5ZfJxxgHDZkY9yyNcAy7tnYfhOEDh/Rl/PjyocwG+ogRxqv+bQ/E7dVIf/jZ7jlIeEz7a8cZQBCHF4wyLYIg4Qmj7RxkVBlpT0ECPmOkBaVi9DDSnhdAwgoj7QXIOGeUaS9BRhejrG8PZLTZFdE+YVfnsggyCleZ4aMrS2J6IAOvpIT+jSvrsfWanLtqdhSJAjjeNyFAPJBxcrp2yDwQklWYuzLuPqy7+zLu7u7u7u6+7i5faYFJj8fpsLX8rz3nV4euW6dT+Q9hEIjgPREPRLtRGn2MWihsCd6KKcZbEQ/6HKMzUH1jqFoUJRgmZMU6hawYpujRBI2xQ6Dq8lQpiATLcpx8M47jWLboEWgGhzxuvAoqVNPbVC143pKwIQQhHA6nrKw/gmCJsDYHGQ7aBSdMhCpSJyEqFcfCoZAFi0GMRCJdek2e8mQXUbRIBJlw0NUgvTcEqmgQVYsiRf+p06bPkLQhpiRhZczMWbO7znnJ4SDDgag3NwMV60TNglBk582fOaTPGLgrpY82fsHCyZw9HE3SWAQV603XQly8BOcz8OAMo9O0N0JN01CgQjhG0yK2tKekQrkUqdO0oXxTzo1ABspnxikNhm3RZplkQOUU47PlchNGI4GhbCsYehbhlXkdqkzKT2pLXWNyHyjXO/QOT6bzCglqSDNXvURZY3UeSjdxDaKFERTXYqixnLmuF6LZCxkokbo+gehZbFhhQO0p+sbhiF6DoVSbEK2sh2Q0hvpS8OY0ohQ7BEplBqkNRniLDnVnSK9ziEpb81CqQn9aFoltGBqpsH0HotE6FUqlf0oJY1AnBRrMmP4Scr2IAaWbjai0s08GGk4xdrHI5V7QoXRYQBR6Q1LBjYyPdjfz/kTfg9xvQ0EFd1JxDxG5l9xRgXLtlZHb9cuDe2n75iK3Cs3GUDZj/30XPI1a9FHBzYz177lzbdd6wIAKKQd7H/qADdxRYyDpFTlwN6VwuFaIB7yYNkewApUb0qePOXHt0ccY3qrh1f0xDVzveC0U5IaGvBoumXj8hRMnNQ2qT+qjz54Tt5f3fCM7p1MGeIhhD4UF4dzPOHcz7Ae9TytQV5J5pn3bm/vZOjUew0ARo4adqywIj6w+ew4bBag/bJ6/kGZDznCgmoteVL3DIKs1Vhbily4P2zcmn4OGw+b8KyzD16HBnBsDXmLYFhZFKjJYMsGtMvqKq234mp+U4DodPMIgFtZYpCLJrRhcTdNGbq1RI/A0Bm8wyENiz0XqxXT2musDquor2qdrsbiOwVOMQNCx6Ja4YQKFDPPzG6jKxC8M8BiDDzkWa74cA1TKFJ5ZmUVV9MhXJniGQQaDEyLpxJqvTaCWYX5zKIDK17KwkAMvMchgJLNdXnpVBYqp+Z7f7m4pt8v5rgDgNUaQZ4VItzbDx40ByuXy3x/5IYge2I8/mSqA9xiMLEbja3Yr0ITG6HjYqV7onrr1PmOMAfAewxmMdJtHT0KzwoV9Pz8050ar6Dj8OO+XA5oBJA8xWlqswWDtE+M6NDXVkLACVppE1nseY7TY8SFOjCZ2wf++4xUtnA9zfLHbBdXfGOT9hCEulfw1A77GIG8zZdhw5Kkx4GcMMhYMwwriBAV8jUHWfCwnp6YMAT9jkLEIcbKQGqWAnzGIBcsJqchvOfAxBnlErLEIi/1H5sDPGC3F9a89Fr/jDPgZ4/YjIr6Y3jAG/IxBLKxHJNkt+4evMYiFvQrvlvjdBB9jkH/ALYtorM2fBvgYg1gI9rVAm846+BWDWDAh5+jMPtd9n+pbDGLB2hbd4q39P8qBfzFuW1hHZ+sjf5ngWwxyXhQthv9tgp8x7rLoisHfGLctHv2nxFxob2f+Je+s49s4sji+Zu+KVuCQ/dleJBVsq7Lb7MlNFbKjgHq6bHSfVZlc7vpUZmZmRoehzG0YHWbmpMzM3M7saJ2labVyQJ7O3xOYrx785s2b2X8CDIWFCO1iIUZgHLBobJx4GDBiFGXaDhyRxL2t5r9/9cqG2Koq4mEUZNoOGKAvmhuON+/fqzotER64VCIdBswk0EmgBm+umGS+3prXfZHm8JDVafJhKP0owbrbBPN4cXbA4UgmUmMksmEUoOhJAyeJJGaYJ1Wup9drA8J0zZDlcdJhQMMAWdV3Z9sRNaYs1tpEhgHh9c6mhySyYaC0ytgCycR/TLOFcLPLA5/nEKPJuoHrJMJhKBFjfY0pixNdHrff73fD4/hwH45cGMhLQD0HeMlcU7vgNkQ9bvhWSxnt8ToTDRslomEgIW73XW42Kf10ELAAfe+gdZwW7ZGKTQLJMEDI8EMYXUy1VusQFrAoL0IaFTQ0pQ6UiIUB42epDGOoacBoYf2QRSEQZsWo1e2w0D8ARq1ZwNjM+kuLIQskU1nRnqwbFycdhhiNm7B4klZYFKCJIKNE2jiSYZT4QWp1GPOqcCztL4MsAIr2L9QCPbIxTnAAhafMjN24B7uWhXlEZqHJO7HcQ+gWvibfdQZsPxAfMexUe9MgdpYXQRaaEpB3a66188qj2rZx+Q0DXq6hPQsMfSnSE+AmmerulDKVmZvrglqLC9x9+fzemxRDRxnDG4pb20uBlxQhGAo42Yz2z7H7dz00stNC1XkLQ6HhedkYQR8tkW/VaWkALXp1blojnpT/ptiRfP7CQDTcLxlX+DJbor2Om5lMj8ipC3qmcr3qNr4qT2EoDSpMD8MU/rpSDQ2FXfn5udzADu2glHHh00LewdDQ8J9uNI1+0TIDDXgVvCmX7Hqr+m2FJUI6/2AoNGCeWG34vbnn0dYEzNG2lY/KIXxerzncbXozlE8wDMfO9YJxBSmVCFWN0yot/3tSQne4+9ZlXF4eLyIhSr9toBGflNmq6WCI1v1kqOGg2/YOtyuabnm+esR59/QeN3LcuxsnrXqPT/O9OggDbNGBupwQN/yehyg0KM2Yb/Wfqz1LAwOp2YFbpQ7llapG6ZS+Ay7wwOvpHtHljQYcvmTsrKPv3hbnc4WhXM3zhA05s2oDA7euIIhqYSy26vGVJbr79ahh6pB7uJxJ1PbrexXT/oQDDXHYvPZAwOF0Ot8/7Zp+fLpDMJgPDObP3cDItS4dDIfFresBCwxvDUAWvmDdh7kJ0krho48L23MhxOEGOBjAw+aNwuH17rirX2VVB2B4TzD8UAfDijBwFEo7ulsUGY9RlOFwF7LYtzEXoxBGjXercyEyDj/kAYCgwTAeZuEkLpQDjEJQuwEwnFP1P7nwiQjDhh7G49Zi3zZDtGZsdsAi9aD16kiv+LBNhotCEAfiQbNooEfYo5+eIqStwyiRf6z3z9Fb1ogIAzfz+scNG3MUGUqwdsHD3dRLkmUhy21MYZ7n17zOj97nh8/z73ucxFmGUcaC0k3ycL2EkP4LjpFKi3UwSntZgtFf7yRyZ0z4XotOkg4d/Axr0v6v4CiGQJRRAknIDyYFlvQLWYJRJMd3cOQ6XI+Rq4eOQumGJRH6tCZioIPuZHNF/ylxYzzAFsOqK0f8bwdlNtRf9ChWBgKReQir7KWnQzUWYJTDwo3XEak7SdJlgruBaRhgnGBBIcQ/1EiMUvnU6s41TVdKBhQjPrv9VmmEQf1J/bjn/t1SmN3HXpQXtMBQPSvWcz6XzgKGpsQJfrDPJb3yElnDu6pXW1DkQoM2YrAQeiJ14WWGmY3Qn9hD/j/pxUP5qjjH83y8quqI+4+77d7ybB6YK/zLzwDVd5O4bGBQ6p6V1BdaGtVDXR7Dc4WHWXhtcLrGApFhACeZZHAS/kt1WLI5w+GwraRj34fSbCQc6/s1Zgdjp2k0vKGlIYxl3IaHg7PPrdISrWEgb0zdIRksaGzHH/bFYFBG2eLpoeq/hYGiBjLgcFt3TbKoudzFUvrRI/utVEwbmuQ4vabtHMO8MTBO7/Yx91mh8e/um8jnqUr+v6C7xoSFr4ww7s8axhHapIXML9xN0rNYCKQutScG80x3TvhLGO1NPHKgP3eLxg1GGN9Sn5l18fN2nZyRG8iO4gx2AZUutYfGnV8fz/FYGNqG0DVNm7apaXDvUPrxUda796s1MJArNjxSoyXGd4HSbk9+Mz04oPdlfAgPQ2kVhjTmXlqtpuHTz7+5Jtv46dRtgaD6HMzpWaDdMbVnR8MZz57ZmI5PocxpyE3kkEbqmzkqXRU/UT/9tmzTSatucwxhfKtjEXqUYeW6CbUXhnjMJrOspORXSKOu4rVa1Y8vNehmf5dtIWKYGkYxhOENbtOYVbq1RcxU1Ki8GZnKMC3TCCbW9Oy3c8HV879bPW3iQXN3buKz3XHvp4fBeP/Fa/zoabD7caPKcx7BQPnVTzOuaAC0iydazlHJeSg9pMpbPw+iye9mCaNxuKGG1KLJa9yZFSJso0N157yiodx59tqdyUjwmO/ThngYnzQEzj0x2wJdTAvDz7p+UDuJ8EZSYZFvMNppiLZowOnz7dvDuNVLc88DdT4s2xqESslHvjl98yb2O3X05KcEIIvSYoVFHtJwswwovYNac9utJllDOuKhgiMtfpu0YMesS3tV8o3892qpz42zMahFCDlJXtIAlR4P43J5vd73T+XMduVncZa+TWp/u4dQYwQlrBQ9sL1SOajKVxp+iAOOO0eZKQopaxhFBZTnbMFs+gGt3wCz8Ct2kX8wlJYNGYdcaXYnqs2sP9tKFx8u6HKZad2X2xZjaX8Z1Bf5x8LwpUtUai4bYO2Y2ZBax3PmlOY7lC9mFuYnC83JDOABx1dCR2DUHBk3r/m/S5fJKPKahUKjvdZ84e7oswktLQUkIIp8ZmH4nHZR0fZd36BXdRIEkf8ojB/xCFfuchg1HxXJQ6nkd6LxsbDLLWOWqpZPda5xFbeLYfDfUp13PDTigF3Jotd8qjOP5Ash9WI6xuKAlx1Upx5F1zVy7XnxVmvRUi/lfwxQnX3YBmf6YPjb4x2BERrKUAQM8afzDgjVxu86ymoTqKbH4slCEljAm0uux55IuBZYvYIktKdUblodCSSUC9K0GD3PIowRL6BcxHHDDqMIGQXoEMjWZvmq2UWr0yEhPerrBFRYZAx0bizaf7KcS59NrNl3CAsLnQUEGUYJ/KzF3davpzUFAy7WXwK/kEWOYcBL4JEjrMusqxO+KOMmxjSUfiyX48scNGe3CrJMo0D5EE4un7U4ZyAyDVgFJyZ8smIg+HMu25G1smmUyVeoiQmfXmdTTtv54/onfF4PNA0Ig5DwaU+uzWmj2qO+ImIXaWgahMCA4fPO0blt269uanbaPHIIJUV9en2J7rnBOHHImmQmhBLiJaI9cm8VrmJTGwI1nzROql8aSykhtNOzULyk+RNciffbzdd9fvHFN23HmcZbMITKfkJKLvHVTcGs9TmnjSkvKfF/gIOx7n0YQqEKJcBLymUvqfges9bHowwNrUfETTg01tTskP2EkFwSuLML7odvASoCxhV6HG7GUQ11yE9IUVwJnBa/HPzoflmwH4OD0TfjJyTAgPuS5Jp7MCsdBxUVQnYmZsrBsdSdcj4hIbHSoj04BKfFF0INgZzpIJxpLG1A+YQQ+dmM0+K3+oC6LEbM1uCOmGZldFfnh4FCxmDMOr8IwH1HxpsexBXJ61NBMK+UBC0OQ8Y+uEwhK+1MnL0a5yfDUXIloq5jjzyGaVu5LAL3YEXInejoORgYB6LkSkDIoEFdB1cX74125wo1nDP98L4cNAiJn/dhVjlArtsUKnrkCZyfLAxDpdHZYcBSsM2ZwJy+C82Z7ahiQ8djYBzbBJQG3fnr4nCXdjhmjTMzxwDt0eVtzMTz+jc7XSwZW9ZXMWv8RSlhIdPws024Pp+eUHYRAANk1tWY9vD+7cVNRaviLnqeANMJEScmCcwbR6tAusyUvZXy4CIMjH1gOiECxnDMCm8S0YGIKvME5mCaeL6JEALjecwCY9AwIAzV5I24GlDETgaM58zXd2bGMArUR7IPYWD8CoRGZ4cBs0m4GvNjK4ahOW3qjjGje+0iCakVFxT70MgwNLPZ6zGzX7UzJDQjrDNf3Xtaw1BMAyc1lhEBg56OkdhuZBi6B3xYTIGwup4hoOoX+7O9ewCOZInjOF7j3exeMovz/Q6ze7aCPduO82zbtm3btm0Wnm3b1ibnu/51vZ3Hf2q/hWMfPulJuqYHUPdN4CyeGKtMjS+h7tdkK9g1+RnKvou6iyfGqjNpHLtSoxVgOA+SDQDPXvXaJKMF70io289vBdsm90LZXYo7+ps1bIbxbUL6CWErYuegakt/dYvFUyMLdYuiwjFM03KGQ1Wd4iqtxRoM44WEIR0jUk5Oay5+gr9Cg2FUeYYhfT2+LVlDKSaGHuMO6Rimad8FZc8rLBZrlEPd1Z5pCr9sx9mEYLAPM8V42bNM6WuuxwvFYIfJfV7EEn49l0uueJxusGEMo2/Cjgg/txOQBeiTdBjDwALXln7Pzb2FYhwJ0vqBI/zUjp+DsmvouHVB+ijhSb/QbziU3UvHzQbpiWQgfNd5EArFGAzSToL34RefAL0V6o4vHOMwwbutiy9NamDrSTruaZB+k7uNZBgtFxn8WCiG0RakhzPVwi9U+Y1dMk7HDQLpltKY8Av9nmU7ZHRcDUg3Lxgl+1PGqLkFY0wE6clsXDZG/Eqo603HjQPph3UzkjGi1Zkc1G1Kx1WAtOvsUrkYLRf69SkYYxJI855Oi8WwmjGmgXQuHUeHoGKBZIxkrBakbiEwmsoFYwTJ1MaFY7wHVrusbIyPQTqZjhsC1hFHysVovurxbZDWCoHx2LqyMZ4tGMOcDNbQ2YIxNAtQdKQY64M1UjZG/GqQtguBMXCwZIzqeA6kDSjGA2B1EIzhJqozwwvHmAnWg0+LxhgH1g8hMH6SjVEJ1vcUYwewNpWN0RACY0ew7pSN8SNYu4fA2K2taIyRYNVTjNPA2nKQaIyjQmD0BG2yaIwTwXo3DMatojGOB+tlirEtaKeKxtgwBMaxoD0jejk+A6zLwmDsJxljMGh3UowXQbtJMsboMBhNoB0sGCM4ALRXw2BMlXwO9BPQhlEMzXS6VDLG42Ew7gdtrmSM80DbMAzGa4IxvEtAy9Fxm4O2lmSMJ/9mjOsE78J7r4b4f+kwOgvGcDcD7VA67gzQ+kXkYqQRBuNW8OJyMXYEb9dQGBViMaxHwDuFjTMrwbtf7nWg1+oxyKiTwPvVMKRiNILXid6JoMM4xJSqYZ4A3nf03qXXwTvTEqphmEfrMIhFxOkB3nMRoRqG+Tx42yhHmBHbuxG8C+2IaYrEMC4Dr44cJE5wPnhXOLbUqbGZDoM8YMJLXA/eXM8R+tqXFDSdRZ7DEvingjc9cG2ZbwT6FZruU9+65EVL5oP3Q1To1LAO1WMoj5LAr/4UvE5+IPLNWcatm0HT2eTlH8mym8HrMi3h2hF5GObHfaCpr7eqxRKM2MvaCbWu50jEeAG6+rVnGBOgaUb3PIYlDsO6DdqOYRhdoesamRgPQttlDGMGdOX4YSJ4ZuSUGIFfNgK6honEMEdC2x3sS+vJ0NTvQZFfTYzKftC05V7qRVci+fE88OZ9JHOdYXXn/6t+Xeew5Xi07ER6oAzv+pXQFahh3Xjx2Rg+Y0Zf9O3a/+yzzx7QNf+9GTNmdNny3TW3ZU8CdBN+9RGvHNq/a9eu952Ve3WDDbb7ftiu943N/7D/d288PkjAApRp2G5i3cFPl6eWFVsweN1siWMZ9DyX4yX8ktioNulsfmTbmnyD2j49+8jy0syospJo3kLGxCAfa9txHHdJ+e/a/H+z+OROXiOarI6NypSmy7PZI4/MZssXpNtkRsWq/UTgKp6OKChjtTS/dzGeGyT8ZHVZalQ8nskXj49KxapL/GjCa5kXjFJcf65ixYoVK1asWLFifwBG7urWQ/m5xgAAAABJRU5ErkJggg=="><input type="hidden" name="files[images/ng-logo.base64.png]" value="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"><input type="hidden" name="files[images/villain.base64.png]" value="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"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="template"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Template Syntax Collection"></form><script>document.getElementById("mainForm").submit();</script></body></html> |