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
|
|
|
|
*/
|
|
|
|
|
2020-01-12 17:15:50 -05:00
|
|
|
import {Component, Directive, EventEmitter, Input, OnChanges, Output, SimpleChanges, TemplateRef, ViewContainerRef} from '@angular/core';
|
2019-09-12 18:20:54 -04:00
|
|
|
|
|
|
|
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 h~{no-value-attribute}></h1>',
|
|
|
|
})
|
|
|
|
export class NoValueAttribute {
|
|
|
|
}
|
|
|
|
|
|
|
|
@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
|
|
|
}
|
|
|
|
|
2020-01-20 14:31:15 -05:00
|
|
|
@Directive({
|
|
|
|
selector: '[hint-model]',
|
|
|
|
inputs: ['hint'],
|
|
|
|
outputs: ['hintChange'],
|
|
|
|
})
|
|
|
|
export class HintModel {
|
|
|
|
hint: string = 'hint';
|
|
|
|
hintChange: EventEmitter<string> = new EventEmitter();
|
|
|
|
}
|
|
|
|
|
2020-01-12 17:15:50 -05:00
|
|
|
class CounterDirectiveContext<T> {
|
|
|
|
constructor(public $implicit: T) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@Directive({selector: '[counterOf]'})
|
|
|
|
export class CounterDirective implements OnChanges {
|
|
|
|
// Object does not have an "$implicit" property.
|
|
|
|
constructor(private container: ViewContainerRef, private template: TemplateRef<Object>) {}
|
|
|
|
|
|
|
|
@Input('counterOf') counter: number = 0;
|
|
|
|
ngOnChanges(_changes: SimpleChanges) {
|
|
|
|
this.container.clear();
|
|
|
|
for (let i = 0; i < this.counter; ++i) {
|
|
|
|
this.container.createEmbeddedView(this.template, new CounterDirectiveContext<number>(i + 1));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-02-19 14:38:21 -05:00
|
|
|
interface WithContextDirectiveContext {
|
2020-04-07 17:58:39 -04:00
|
|
|
$implicit: {implicitPerson: Hero;};
|
|
|
|
nonImplicitPerson: Hero;
|
2020-02-19 14:38:21 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
@Directive({selector: '[withContext]'})
|
|
|
|
export class WithContextDirective {
|
|
|
|
constructor(_template: TemplateRef<WithContextDirectiveContext>) {}
|
|
|
|
|
|
|
|
static ngTemplateContextGuard(dir: WithContextDirective, ctx: unknown):
|
|
|
|
ctx is WithContextDirectiveContext {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-12-19 21:33:26 -05:00
|
|
|
/**
|
|
|
|
* This Component provides the `test-comp` selector.
|
|
|
|
*/
|
2019-09-12 18:20:54 -04:00
|
|
|
/*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 {
|
2019-12-19 21:33:26 -05:00
|
|
|
/**
|
|
|
|
* This is the title of the `TemplateReference` Component.
|
|
|
|
*/
|
2019-09-12 18:20:54 -04:00
|
|
|
title = 'Some title';
|
|
|
|
hero: Hero = {id: 1, name: 'Windstorm'};
|
2020-04-07 17:58:39 -04:00
|
|
|
heroP = Promise.resolve(this.hero);
|
2019-10-24 13:17:25 -04:00
|
|
|
heroes: Hero[] = [this.hero];
|
2020-04-07 17:58:39 -04:00
|
|
|
heroesP = Promise.resolve(this.heroes);
|
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;
|
2020-02-06 17:49:49 -05:00
|
|
|
optional?: string;
|
2020-03-10 00:22:46 -04:00
|
|
|
// Use to test the `index` variable conflict between the `ngFor` and component context.
|
|
|
|
index = null;
|
2019-09-12 18:20:54 -04:00
|
|
|
myClick(event: any) {}
|
2020-03-10 01:16:08 -04:00
|
|
|
birthday = new Date();
|
2020-03-30 03:10:34 -04:00
|
|
|
readonlyHeroes: ReadonlyArray<Readonly<Hero>> = this.heroes;
|
2020-04-03 00:48:16 -04:00
|
|
|
constNames = [{name: 'name'}] as const;
|
2020-04-06 19:14:09 -04:00
|
|
|
private myField = 'My Field';
|
2020-04-08 16:48:35 -04:00
|
|
|
strOrNumber: string|number = '';
|
2019-09-12 18:20:54 -04:00
|
|
|
}
|