2019-09-12 18:20:54 -04:00
|
|
|
/**
|
|
|
|
* @license
|
|
|
|
* Copyright 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 https://angular.io/license
|
|
|
|
*/
|
|
|
|
|
|
|
|
import {Component, Directive, EventEmitter, Input, Output} from '@angular/core';
|
|
|
|
|
|
|
|
import {Hero} from './app.component';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: `
|
|
|
|
<h1>
|
|
|
|
Some <~{incomplete-open-lt}a~{incomplete-open-a} ~{incomplete-open-attr} text
|
|
|
|
</h1>`,
|
|
|
|
})
|
|
|
|
export class CaseIncompleteOpen {
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '<h1>Some <a> ~{missing-closing} text</h1>',
|
|
|
|
})
|
|
|
|
export class CaseMissingClosing {
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '<h1>Some <unknown ~{unknown-element}> text</h1>',
|
|
|
|
})
|
|
|
|
export class CaseUnknown {
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '<h1>{{data | ~{before-pipe}lowe~{in-pipe}rcase~{after-pipe} }}',
|
|
|
|
})
|
|
|
|
export class Pipes {
|
|
|
|
data = 'Some string';
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '<h1 h~{no-value-attribute}></h1>',
|
|
|
|
})
|
|
|
|
export class NoValueAttribute {
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '<h1 model="~{attribute-binding-model}test"></h1>',
|
|
|
|
})
|
|
|
|
export class AttributeBinding {
|
2019-09-19 20:04:02 -04:00
|
|
|
test: string = 'test';
|
2019-09-12 18:20:54 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '<h1 [model]="~{property-binding-model}test"></h1>',
|
|
|
|
})
|
|
|
|
export class PropertyBinding {
|
2019-09-19 20:04:02 -04:00
|
|
|
test: string = 'test';
|
2019-09-12 18:20:54 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '<h1 (model)="~{event-binding-model}modelChanged()"></h1>',
|
|
|
|
})
|
|
|
|
export class EventBinding {
|
2019-09-19 20:04:02 -04:00
|
|
|
test: string = 'test';
|
2019-09-12 18:20:54 -04:00
|
|
|
|
|
|
|
modelChanged() {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
2019-10-21 21:49:32 -04:00
|
|
|
template: `
|
|
|
|
<h1 [(model)]="~{two-way-binding-model}test"></h1>
|
|
|
|
<input ~{two-way-binding-input}></input>`,
|
2019-09-12 18:20:54 -04:00
|
|
|
})
|
|
|
|
export class TwoWayBinding {
|
2019-09-19 20:04:02 -04:00
|
|
|
test: string = 'test';
|
2019-09-12 18:20:54 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[string-model]',
|
|
|
|
})
|
|
|
|
export class StringModel {
|
2019-09-19 20:04:02 -04:00
|
|
|
@Input() model: string = 'model';
|
2019-10-21 21:49:32 -04:00
|
|
|
@Output() modelChange: EventEmitter<string> = new EventEmitter();
|
2019-09-12 18:20:54 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[number-model]',
|
|
|
|
})
|
|
|
|
export class NumberModel {
|
2019-09-19 20:04:02 -04:00
|
|
|
@Input('inputAlias') model: number = 0;
|
2019-10-21 21:49:32 -04:00
|
|
|
@Output('outputAlias') modelChange: EventEmitter<number> = new EventEmitter();
|
2019-09-12 18:20:54 -04:00
|
|
|
}
|
|
|
|
|
2019-10-14 18:24:59 -04:00
|
|
|
@Component({
|
|
|
|
selector: 'foo-component',
|
|
|
|
template: `
|
|
|
|
<div string-model ~{string-marker}="text"></div>
|
|
|
|
<div number-model ~{number-marker}="value"></div>
|
|
|
|
`,
|
|
|
|
})
|
|
|
|
export class FooComponent {
|
|
|
|
text: string = 'some text';
|
|
|
|
value: number = 42;
|
|
|
|
}
|
|
|
|
|
2019-09-12 18:20:54 -04:00
|
|
|
interface Person {
|
|
|
|
name: string;
|
|
|
|
age: number;
|
2019-10-14 18:24:59 -04:00
|
|
|
street: string;
|
2019-09-12 18:20:54 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '<div *ngFor="let ~{for-let-empty}"></div>',
|
|
|
|
})
|
|
|
|
export class ForOfLetEmpty {
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '<div *ngFor="let i = ~{for-let-i-equal}"></div>',
|
|
|
|
})
|
|
|
|
export class ForLetIEqual {
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: `
|
2019-12-16 14:03:39 -05:00
|
|
|
<div *ngFor="let ~{for-person}person of ~{for-people}people">
|
2019-09-12 18:20:54 -04:00
|
|
|
<span>Name: {{~{for-interp-person}person.~{for-interp-name}name}}</span>
|
|
|
|
<span>Age: {{person.~{for-interp-age}age}}</span>
|
|
|
|
</div>`,
|
|
|
|
})
|
|
|
|
export class ForUsingComponent {
|
2019-09-19 20:04:02 -04:00
|
|
|
people: Person[] = [];
|
2019-09-12 18:20:54 -04:00
|
|
|
}
|
|
|
|
|
2019-10-14 18:24:59 -04:00
|
|
|
@Component({
|
|
|
|
template: `
|
|
|
|
<div *ngFor="let person of people | async">
|
|
|
|
{{person.~{async-person-name}name}}
|
|
|
|
</div>
|
2019-10-14 18:24:28 -04:00
|
|
|
<div *ngIf="promisedPerson | async as person">
|
|
|
|
{{person.~{promised-person-name}name}}
|
|
|
|
</div>
|
2019-10-14 18:24:59 -04:00
|
|
|
`,
|
|
|
|
})
|
|
|
|
export class AsyncForUsingComponent {
|
|
|
|
people: Promise<Person[]> = Promise.resolve([]);
|
2019-10-14 18:24:28 -04:00
|
|
|
promisedPerson: Promise<Person> = Promise.resolve({
|
|
|
|
name: 'John Doe',
|
|
|
|
age: 42,
|
|
|
|
street: '123 Angular Ln',
|
|
|
|
});
|
2019-10-14 18:24:59 -04:00
|
|
|
}
|
|
|
|
|
2019-09-12 18:20:54 -04:00
|
|
|
@Component({
|
|
|
|
template: `
|
|
|
|
<div #div>
|
|
|
|
<test-comp #test1>
|
|
|
|
{{~{test-comp-content}}}
|
|
|
|
{{test1.~{test-comp-after-test}name}}
|
|
|
|
{{div.~{test-comp-after-div}.innerText}}
|
|
|
|
</test-comp>
|
|
|
|
</div>
|
|
|
|
<test-comp #test2></test-comp>`,
|
|
|
|
})
|
|
|
|
export class References {
|
|
|
|
}
|
|
|
|
|
|
|
|
/*BeginTestComponent*/ @Component({
|
|
|
|
selector: 'test-comp',
|
|
|
|
template: '<div>Testing: {{name}}</div>',
|
|
|
|
})
|
|
|
|
export class TestComponent {
|
|
|
|
@Input('tcName') name = 'test';
|
|
|
|
@Output('test') testEvent = new EventEmitter();
|
|
|
|
} /*EndTestComponent*/
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
templateUrl: 'test.ng',
|
|
|
|
})
|
|
|
|
export class TemplateReference {
|
|
|
|
title = 'Some title';
|
|
|
|
hero: Hero = {id: 1, name: 'Windstorm'};
|
2019-10-24 13:17:25 -04:00
|
|
|
heroes: Hero[] = [this.hero];
|
2019-11-20 02:23:45 -05:00
|
|
|
tupleArray: [string, Hero] = ['test', this.hero];
|
2019-11-06 13:32:45 -05:00
|
|
|
league: Hero[][] = [this.heroes];
|
2019-11-12 16:57:44 -05:00
|
|
|
heroesByName: {[name: string]: Hero} = {};
|
2019-12-02 21:45:17 -05:00
|
|
|
primitiveIndexType: {[name: string]: string} = {};
|
2019-09-12 18:20:54 -04:00
|
|
|
anyValue: any;
|
|
|
|
myClick(event: any) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '{{~{empty-interpolation}}}',
|
|
|
|
})
|
|
|
|
export class EmptyInterpolation {
|
|
|
|
title = 'Some title';
|
|
|
|
subTitle = 'Some sub title';
|
|
|
|
}
|