/** * @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, OnChanges, Output, SimpleChanges, TemplateRef, ViewContainerRef} from '@angular/core'; import {Hero} from './app.component'; @Component({ template: `

Some <~{incomplete-open-lt}a~{incomplete-open-a} ~{incomplete-open-attr} text

`, }) export class CaseIncompleteOpen { } @Component({ template: '

Some ~{missing-closing} text

', }) export class CaseMissingClosing { } @Component({ template: '

Some text

', }) export class CaseUnknown { } @Component({ template: '

{{data | ~{before-pipe}lowe~{in-pipe}rcase~{after-pipe} }}', }) export class Pipes { data = 'Some string'; } @Component({ template: '

', }) export class NoValueAttribute { } @Directive({ selector: '[string-model]', }) export class StringModel { @Input() model: string = 'model'; @Output() modelChange: EventEmitter = new EventEmitter(); } @Directive({ selector: '[number-model]', }) export class NumberModel { @Input('inputAlias') model: number = 0; @Output('outputAlias') modelChange: EventEmitter = new EventEmitter(); } @Directive({ selector: '[hint-model]', inputs: ['hint'], outputs: ['hintChange'], }) export class HintModel { hint: string = 'hint'; hintChange: EventEmitter = new EventEmitter(); } interface Person { name: string; age: number; street: string; } @Component({ template: `
{{person.~{async-person-name}name}}
{{person.~{promised-person-name}name}}
`, }) export class AsyncForUsingComponent { people: Promise = Promise.resolve([]); promisedPerson: Promise = Promise.resolve({ name: 'John Doe', age: 42, street: '123 Angular Ln', }); } @Component({ template: `
{{~{test-comp-content}}} {{test1.~{test-comp-after-test}name}} {{div.~{test-comp-after-div}.innerText}}
`, }) export class References { } class CounterDirectiveContext { 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) {} @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(i + 1)); } } } interface WithContextDirectiveContext { $implicit: {implicitPerson: Person;}; nonImplicitPerson: Person; } @Directive({selector: '[withContext]'}) export class WithContextDirective { constructor(_template: TemplateRef) {} static ngTemplateContextGuard(dir: WithContextDirective, ctx: unknown): ctx is WithContextDirectiveContext { return true; } } /** * This Component provides the `test-comp` selector. */ /*BeginTestComponent*/ @Component({ selector: 'test-comp', template: '
Testing: {{name}}
', }) export class TestComponent { @Input('tcName') name = 'test'; @Output('test') testEvent = new EventEmitter(); } /*EndTestComponent*/ @Component({ templateUrl: 'test.ng', }) export class TemplateReference { /** * This is the title of the `TemplateReference` Component. */ title = 'Some title'; hero: Hero = {id: 1, name: 'Windstorm'}; heroes: Hero[] = [this.hero]; tupleArray: [string, Hero] = ['test', this.hero]; league: Hero[][] = [this.heroes]; heroesByName: {[name: string]: Hero} = {}; primitiveIndexType: {[name: string]: string} = {}; anyValue: any; optional?: string; myClick(event: any) {} } @Component({ template: '{{~{empty-interpolation}}}', }) export class EmptyInterpolation { title = 'Some title'; subTitle = 'Some sub title'; }