| 
									
										
										
										
											2019-09-12 15:20:54 -07: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 14:15:50 -08:00
										 |  |  | import {Component, Directive, EventEmitter, Input, OnChanges, Output, SimpleChanges, TemplateRef, ViewContainerRef} from '@angular/core'; | 
					
						
							| 
									
										
										
										
											2019-09-12 15:20:54 -07: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 17:04:02 -07:00
										 |  |  |   @Input() model: string = 'model'; | 
					
						
							| 
									
										
										
										
											2019-10-21 18:49:32 -07:00
										 |  |  |   @Output() modelChange: EventEmitter<string> = new EventEmitter(); | 
					
						
							| 
									
										
										
										
											2019-09-12 15:20:54 -07:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | @Directive({ | 
					
						
							|  |  |  |   selector: '[number-model]', | 
					
						
							|  |  |  | }) | 
					
						
							|  |  |  | export class NumberModel { | 
					
						
							| 
									
										
										
										
											2019-09-19 17:04:02 -07:00
										 |  |  |   @Input('inputAlias') model: number = 0; | 
					
						
							| 
									
										
										
										
											2019-10-21 18:49:32 -07:00
										 |  |  |   @Output('outputAlias') modelChange: EventEmitter<number> = new EventEmitter(); | 
					
						
							| 
									
										
										
										
											2019-09-12 15:20:54 -07:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-01-20 11:31:15 -08:00
										 |  |  | @Directive({ | 
					
						
							|  |  |  |   selector: '[hint-model]', | 
					
						
							|  |  |  |   inputs: ['hint'], | 
					
						
							|  |  |  |   outputs: ['hintChange'], | 
					
						
							|  |  |  | }) | 
					
						
							|  |  |  | export class HintModel { | 
					
						
							|  |  |  |   hint: string = 'hint'; | 
					
						
							|  |  |  |   hintChange: EventEmitter<string> = new EventEmitter(); | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-01-12 14:15:50 -08: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 20:38:21 +01:00
										 |  |  | interface WithContextDirectiveContext { | 
					
						
							| 
									
										
										
										
											2020-04-07 14:58:39 -07:00
										 |  |  |   $implicit: {implicitPerson: Hero;}; | 
					
						
							|  |  |  |   nonImplicitPerson: Hero; | 
					
						
							| 
									
										
										
										
											2020-02-19 20:38:21 +01: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 18:33:26 -08:00
										 |  |  | /** | 
					
						
							|  |  |  |  * This Component provides the `test-comp` selector. | 
					
						
							|  |  |  |  */ | 
					
						
							| 
									
										
										
										
											2019-09-12 15:20:54 -07: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 18:33:26 -08:00
										 |  |  |   /** | 
					
						
							|  |  |  |    * This is the title of the `TemplateReference` Component. | 
					
						
							|  |  |  |    */ | 
					
						
							| 
									
										
										
										
											2019-09-12 15:20:54 -07:00
										 |  |  |   title = 'Some title'; | 
					
						
							|  |  |  |   hero: Hero = {id: 1, name: 'Windstorm'}; | 
					
						
							| 
									
										
										
										
											2020-04-07 14:58:39 -07:00
										 |  |  |   heroP = Promise.resolve(this.hero); | 
					
						
							| 
									
										
										
										
											2019-10-24 10:17:25 -07:00
										 |  |  |   heroes: Hero[] = [this.hero]; | 
					
						
							| 
									
										
										
										
											2020-04-07 14:58:39 -07:00
										 |  |  |   heroesP = Promise.resolve(this.heroes); | 
					
						
							| 
									
										
										
										
											2019-11-20 07:23:45 +00:00
										 |  |  |   tupleArray: [string, Hero] = ['test', this.hero]; | 
					
						
							| 
									
										
										
										
											2019-11-06 10:32:45 -08:00
										 |  |  |   league: Hero[][] = [this.heroes]; | 
					
						
							| 
									
										
										
										
											2019-11-12 15:57:44 -06:00
										 |  |  |   heroesByName: {[name: string]: Hero} = {}; | 
					
						
							| 
									
										
										
										
											2019-12-03 10:45:17 +08:00
										 |  |  |   primitiveIndexType: {[name: string]: string} = {}; | 
					
						
							| 
									
										
										
										
											2019-09-12 15:20:54 -07:00
										 |  |  |   anyValue: any; | 
					
						
							| 
									
										
										
										
											2020-02-06 14:49:49 -08:00
										 |  |  |   optional?: string; | 
					
						
							| 
									
										
										
										
											2020-03-10 12:22:46 +08:00
										 |  |  |   // Use to test the `index` variable conflict between the `ngFor` and component context.
 | 
					
						
							|  |  |  |   index = null; | 
					
						
							| 
									
										
										
										
											2019-09-12 15:20:54 -07:00
										 |  |  |   myClick(event: any) {} | 
					
						
							| 
									
										
										
										
											2020-03-09 22:16:08 -07:00
										 |  |  |   birthday = new Date(); | 
					
						
							| 
									
										
										
										
											2020-03-30 00:10:34 -07:00
										 |  |  |   readonlyHeroes: ReadonlyArray<Readonly<Hero>> = this.heroes; | 
					
						
							| 
									
										
										
										
											2020-04-02 21:48:16 -07:00
										 |  |  |   constNames = [{name: 'name'}] as const; | 
					
						
							| 
									
										
										
										
											2020-04-06 16:14:09 -07:00
										 |  |  |   private myField = 'My Field'; | 
					
						
							| 
									
										
										
										
											2019-09-12 15:20:54 -07:00
										 |  |  | } |