= componentRef.instance[propName];
+ return emitter.pipe(map((value) => ({name: templateName, value})));
+ },
+ );
this.eventEmitters.next(eventEmitters);
}
@@ -309,6 +335,6 @@ export class ComponentNgElementStrategy implements NgElementStrategy {
/** Runs in the angular zone, if present. */
private runInZone(fn: () => unknown) {
- return (this.elementZone && Zone.current !== this.elementZone) ? this.ngZone.run(fn) : fn();
+ return this.elementZone && Zone.current !== this.elementZone ? this.ngZone.run(fn) : fn();
}
}
diff --git a/packages/elements/src/create-custom-element.ts b/packages/elements/src/create-custom-element.ts
index f30a75ba0020..664347b3c475 100644
--- a/packages/elements/src/create-custom-element.ts
+++ b/packages/elements/src/create-custom-element.ts
@@ -33,7 +33,7 @@ export interface NgElementConstructor {
* Initializes a constructor instance.
* @param injector If provided, overrides the configured injector.
*/
- new(injector?: Injector): NgElement&WithProperties
;
+ new (injector?: Injector): NgElement & WithProperties
;
}
/**
@@ -49,7 +49,7 @@ export abstract class NgElement extends HTMLElement {
/**
* A subscription to change, connect, and disconnect events in the custom element.
*/
- protected ngElementEventsSubscription: Subscription|null = null;
+ protected ngElementEventsSubscription: Subscription | null = null;
/**
* Prototype for a handler that responds to a change in an observed attribute.
@@ -60,7 +60,11 @@ export abstract class NgElement extends HTMLElement {
* @returns Nothing.
*/
abstract attributeChangedCallback(
- attrName: string, oldValue: string|null, newValue: string, namespace?: string): void;
+ attrName: string,
+ oldValue: string | null,
+ newValue: string,
+ namespace?: string,
+ ): void;
/**
* Prototype for a handler that responds to the insertion of the custom element in the DOM.
* @returns Nothing.
@@ -81,7 +85,7 @@ export abstract class NgElement extends HTMLElement {
* @publicApi
*/
export type WithProperties
= {
- [property in keyof P]: P[property]
+ [property in keyof P]: P[property];
};
/**
@@ -126,25 +130,28 @@ export interface NgElementConfig {
* @publicApi
*/
export function createCustomElement
(
- component: Type, config: NgElementConfig): NgElementConstructor {
+ component: Type,
+ config: NgElementConfig,
+): NgElementConstructor {
const inputs = getComponentInputs(component, config.injector);
const strategyFactory =
- config.strategyFactory || new ComponentNgElementStrategyFactory(component, config.injector);
+ config.strategyFactory || new ComponentNgElementStrategyFactory(component, config.injector);
const attributeToPropertyInputs = getDefaultAttributeToPropertyInputs(inputs);
class NgElementImpl extends NgElement {
// Work around a bug in closure typed optimizations(b/79557487) where it is not honoring static
// field externs. So using quoted access to explicitly prevent renaming.
- static readonly['observedAttributes'] = Object.keys(attributeToPropertyInputs);
+ static readonly ['observedAttributes'] = Object.keys(attributeToPropertyInputs);
protected override get ngElementStrategy(): NgElementStrategy {
// TODO(andrewseguin): Add e2e tests that cover cases where the constructor isn't called. For
// now this is tested using a Google internal test suite.
if (!this._ngElementStrategy) {
- const strategy = this._ngElementStrategy =
- strategyFactory.create(this.injector || config.injector);
+ const strategy = (this._ngElementStrategy = strategyFactory.create(
+ this.injector || config.injector,
+ ));
// Re-apply pre-existing input values (set as properties on the element) through the
// strategy.
@@ -171,7 +178,11 @@ export function createCustomElement
(
}
override attributeChangedCallback(
- attrName: string, oldValue: string|null, newValue: string, namespace?: string): void {
+ attrName: string,
+ oldValue: string | null,
+ newValue: string,
+ namespace?: string,
+ ): void {
const [propName, transform] = attributeToPropertyInputs[attrName]!;
this.ngElementStrategy.setInputValue(propName, newValue, transform);
}
@@ -217,7 +228,7 @@ export function createCustomElement
(
private subscribeToEvents(): void {
// Listen for events from the strategy and dispatch them as custom events.
- this.ngElementEventsSubscription = this.ngElementStrategy.events.subscribe(e => {
+ this.ngElementEventsSubscription = this.ngElementStrategy.events.subscribe((e) => {
const customEvent = new CustomEvent(e.name, {detail: e.value});
this.dispatchEvent(customEvent);
});
@@ -238,5 +249,5 @@ export function createCustomElement
(
});
});
- return (NgElementImpl as any) as NgElementConstructor
;
+ return NgElementImpl as any as NgElementConstructor
;
}
diff --git a/packages/elements/src/extract-projectable-nodes.ts b/packages/elements/src/extract-projectable-nodes.ts
index 4a0a268930a1..6f9af897b094 100644
--- a/packages/elements/src/extract-projectable-nodes.ts
+++ b/packages/elements/src/extract-projectable-nodes.ts
@@ -42,7 +42,7 @@ function findMatchingIndex(node: Node, selectors: string[], defaultIndex: number
if (isElement(node)) {
selectors.some((selector, i) => {
- if ((selector !== '*') && matchesSelector(node, selector)) {
+ if (selector !== '*' && matchesSelector(node, selector)) {
matchingIndex = i;
return true;
}
diff --git a/packages/elements/src/utils.ts b/packages/elements/src/utils.ts
index 166d7ad89a10..600bf9786587 100644
--- a/packages/elements/src/utils.ts
+++ b/packages/elements/src/utils.ts
@@ -49,13 +49,13 @@ export const scheduler = {
* Convert a camelCased string to kebab-cased.
*/
export function camelToDashCase(input: string): string {
- return input.replace(/[A-Z]/g, char => `-${char.toLowerCase()}`);
+ return input.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
}
/**
* Check whether the input is an `Element`.
*/
-export function isElement(node: Node|null): node is Element {
+export function isElement(node: Node | null): node is Element {
return !!node && node.nodeType === Node.ELEMENT_NODE;
}
@@ -83,8 +83,13 @@ let _matches: (this: any, selector: string) => boolean;
export function matchesSelector(el: any, selector: string): boolean {
if (!_matches) {
const elProto = Element.prototype;
- _matches = elProto.matches || elProto.matchesSelector || elProto.mozMatchesSelector ||
- elProto.msMatchesSelector || elProto.oMatchesSelector || elProto.webkitMatchesSelector;
+ _matches =
+ elProto.matches ||
+ elProto.matchesSelector ||
+ elProto.mozMatchesSelector ||
+ elProto.msMatchesSelector ||
+ elProto.oMatchesSelector ||
+ elProto.webkitMatchesSelector;
}
return el.nodeType === Node.ELEMENT_NODE ? _matches.call(el, selector) : false;
}
@@ -98,9 +103,11 @@ export function strictEquals(value1: any, value2: any): boolean {
/** Gets a map of default set of attributes to observe and the properties they affect. */
export function getDefaultAttributeToPropertyInputs(
- inputs: {propName: string, templateName: string, transform?: (value: any) => any}[]) {
- const attributeToPropertyInputs:
- {[key: string]: [propName: string, transform: ((value: any) => any)|undefined]} = {};
+ inputs: {propName: string; templateName: string; transform?: (value: any) => any}[],
+) {
+ const attributeToPropertyInputs: {
+ [key: string]: [propName: string, transform: ((value: any) => any) | undefined];
+ } = {};
inputs.forEach(({propName, templateName, transform}) => {
attributeToPropertyInputs[camelToDashCase(templateName)] = [propName, transform];
});
@@ -112,10 +119,13 @@ export function getDefaultAttributeToPropertyInputs(
* Gets a component's set of inputs. Uses the injector to get the component factory where the inputs
* are defined.
*/
-export function getComponentInputs(component: Type, injector: Injector): {
- propName: string,
- templateName: string,
- transform?: (value: any) => any,
+export function getComponentInputs(
+ component: Type,
+ injector: Injector,
+): {
+ propName: string;
+ templateName: string;
+ transform?: (value: any) => any;
}[] {
const componentFactoryResolver = injector.get(ComponentFactoryResolver);
const componentFactory = componentFactoryResolver.resolveComponentFactory(component);
diff --git a/packages/elements/test/component-factory-strategy_spec.ts b/packages/elements/test/component-factory-strategy_spec.ts
index 41af6a31a916..a4d82437f4b7 100644
--- a/packages/elements/test/component-factory-strategy_spec.ts
+++ b/packages/elements/test/component-factory-strategy_spec.ts
@@ -6,11 +6,26 @@
* found in the LICENSE file at https://angular.io/license
*/
-import {ApplicationRef, ChangeDetectorRef, ComponentFactory, ComponentFactoryResolver, ComponentRef, Injector, NgModuleRef, NgZone, SimpleChange, SimpleChanges, Type} from '@angular/core';
+import {
+ ApplicationRef,
+ ChangeDetectorRef,
+ ComponentFactory,
+ ComponentFactoryResolver,
+ ComponentRef,
+ Injector,
+ NgModuleRef,
+ NgZone,
+ SimpleChange,
+ SimpleChanges,
+ Type,
+} from '@angular/core';
import {fakeAsync, tick} from '@angular/core/testing';
import {Subject} from 'rxjs';
-import {ComponentNgElementStrategy, ComponentNgElementStrategyFactory} from '../src/component-factory-strategy';
+import {
+ ComponentNgElementStrategy,
+ ComponentNgElementStrategyFactory,
+} from '../src/component-factory-strategy';
import {NgElementStrategyEvent} from '../src/element-strategy';
describe('ComponentFactoryNgElementStrategy', () => {
@@ -62,7 +77,7 @@ describe('ComponentFactoryNgElementStrategy', () => {
describe('before connected', () => {
it('should allow subscribing to output events', () => {
const events: NgElementStrategyEvent[] = [];
- strategy.events.subscribe(e => events.push(e));
+ strategy.events.subscribe((e) => events.push(e));
// No events before connecting (since `componentRef` is not even on the strategy yet).
componentRef.instance.output1.next('output-1a');
@@ -108,7 +123,7 @@ describe('ComponentFactoryNgElementStrategy', () => {
it('should listen to output events', () => {
const events: NgElementStrategyEvent[] = [];
- strategy.events.subscribe(e => events.push(e));
+ strategy.events.subscribe((e) => events.push(e));
componentRef.instance.output1.next('output-1a');
componentRef.instance.output1.next('output-1b');
@@ -150,17 +165,17 @@ describe('ComponentFactoryNgElementStrategy', () => {
});
it('should call ngOnChanges with proper firstChange value', fakeAsync(() => {
- strategy.setInputValue('fooFoo', 'fooFoo-2');
- strategy.setInputValue('barBar', 'barBar-1');
- strategy.setInputValue('falsyUndefined', 'notanymore');
- tick(16); // scheduler waits 16ms if RAF is unavailable
- (strategy as any).detectChanges();
- expectSimpleChanges(componentRef.instance.simpleChanges[1], {
- fooFoo: new SimpleChange('fooFoo-1', 'fooFoo-2', false),
- barBar: new SimpleChange(undefined, 'barBar-1', true),
- falsyUndefined: new SimpleChange(undefined, 'notanymore', false),
- });
- }));
+ strategy.setInputValue('fooFoo', 'fooFoo-2');
+ strategy.setInputValue('barBar', 'barBar-1');
+ strategy.setInputValue('falsyUndefined', 'notanymore');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
+ (strategy as any).detectChanges();
+ expectSimpleChanges(componentRef.instance.simpleChanges[1], {
+ fooFoo: new SimpleChange('fooFoo-1', 'fooFoo-2', false),
+ barBar: new SimpleChange(undefined, 'barBar-1', true),
+ falsyUndefined: new SimpleChange(undefined, 'notanymore', false),
+ });
+ }));
});
describe('when inputs change and not connected', () => {
@@ -173,10 +188,10 @@ describe('ComponentFactoryNgElementStrategy', () => {
});
it('should not detect changes', fakeAsync(() => {
- strategy.setInputValue('fooFoo', 'fooFoo-1');
- tick(16); // scheduler waits 16ms if RAF is unavailable
- expect(componentRef.changeDetectorRef.detectChanges).not.toHaveBeenCalled();
- }));
+ strategy.setInputValue('fooFoo', 'fooFoo-1');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
+ expect(componentRef.changeDetectorRef.detectChanges).not.toHaveBeenCalled();
+ }));
});
describe('when inputs change and is connected', () => {
@@ -194,226 +209,222 @@ describe('ComponentFactoryNgElementStrategy', () => {
});
it('should detect changes', fakeAsync(() => {
- // Connect detected changes automatically
- expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalledTimes(1);
+ // Connect detected changes automatically
+ expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalledTimes(1);
- strategy.setInputValue('fooFoo', 'fooFoo-1');
- tick(16); // scheduler waits 16ms if RAF is unavailable
- expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalledTimes(2);
- }));
+ strategy.setInputValue('fooFoo', 'fooFoo-1');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
+ expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalledTimes(2);
+ }));
it('should detect changes once for multiple input changes', fakeAsync(() => {
- // Connect detected changes automatically
- expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalledTimes(1);
+ // Connect detected changes automatically
+ expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalledTimes(1);
- strategy.setInputValue('fooFoo', 'fooFoo-1');
- strategy.setInputValue('barBar', 'barBar-1');
- tick(16); // scheduler waits 16ms if RAF is unavailable
- expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalledTimes(2);
- }));
+ strategy.setInputValue('fooFoo', 'fooFoo-1');
+ strategy.setInputValue('barBar', 'barBar-1');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
+ expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalledTimes(2);
+ }));
it('should not detect changes if the input is set to the same value', fakeAsync(() => {
- (componentRef.changeDetectorRef.detectChanges as jasmine.Spy).calls.reset();
+ (componentRef.changeDetectorRef.detectChanges as jasmine.Spy).calls.reset();
- strategy.setInputValue('fooFoo', 'fooFoo-1');
- strategy.setInputValue('barBar', 'barBar-1');
- tick(16); // scheduler waits 16ms if RAF is unavailable
- expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalledTimes(1);
+ strategy.setInputValue('fooFoo', 'fooFoo-1');
+ strategy.setInputValue('barBar', 'barBar-1');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
+ expect(componentRef.changeDetectorRef.detectChanges).toHaveBeenCalledTimes(1);
- (componentRef.changeDetectorRef.detectChanges as jasmine.Spy).calls.reset();
+ (componentRef.changeDetectorRef.detectChanges as jasmine.Spy).calls.reset();
- strategy.setInputValue('fooFoo', 'fooFoo-1');
- strategy.setInputValue('barBar', 'barBar-1');
- tick(16); // scheduler waits 16ms if RAF is unavailable
- expect(componentRef.changeDetectorRef.detectChanges).not.toHaveBeenCalled();
- }));
+ strategy.setInputValue('fooFoo', 'fooFoo-1');
+ strategy.setInputValue('barBar', 'barBar-1');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
+ expect(componentRef.changeDetectorRef.detectChanges).not.toHaveBeenCalled();
+ }));
it('should call ngOnChanges', fakeAsync(() => {
- strategy.setInputValue('fooFoo', 'fooFoo-1');
- tick(16); // scheduler waits 16ms if RAF is unavailable
- expectSimpleChanges(
- componentRef.instance.simpleChanges[0],
- {fooFoo: new SimpleChange(undefined, 'fooFoo-1', true)});
- }));
+ strategy.setInputValue('fooFoo', 'fooFoo-1');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
+ expectSimpleChanges(componentRef.instance.simpleChanges[0], {
+ fooFoo: new SimpleChange(undefined, 'fooFoo-1', true),
+ });
+ }));
it('should call ngOnChanges once for multiple input changes', fakeAsync(() => {
- strategy.setInputValue('fooFoo', 'fooFoo-1');
- strategy.setInputValue('barBar', 'barBar-1');
- tick(16); // scheduler waits 16ms if RAF is unavailable
- expectSimpleChanges(componentRef.instance.simpleChanges[0], {
- fooFoo: new SimpleChange(undefined, 'fooFoo-1', true),
- barBar: new SimpleChange(undefined, 'barBar-1', true)
- });
- }));
-
- it('should call ngOnChanges twice for changes in different rounds with previous values',
- fakeAsync(() => {
- strategy.setInputValue('fooFoo', 'fooFoo-1');
- strategy.setInputValue('barBar', 'barBar-1');
- tick(16); // scheduler waits 16ms if RAF is unavailable
- expectSimpleChanges(componentRef.instance.simpleChanges[0], {
- fooFoo: new SimpleChange(undefined, 'fooFoo-1', true),
- barBar: new SimpleChange(undefined, 'barBar-1', true)
- });
-
- strategy.setInputValue('fooFoo', 'fooFoo-2');
- strategy.setInputValue('barBar', 'barBar-2');
- tick(16); // scheduler waits 16ms if RAF is unavailable
- expectSimpleChanges(componentRef.instance.simpleChanges[1], {
- fooFoo: new SimpleChange('fooFoo-1', 'fooFoo-2', false),
- barBar: new SimpleChange('barBar-1', 'barBar-2', false)
- });
- }));
+ strategy.setInputValue('fooFoo', 'fooFoo-1');
+ strategy.setInputValue('barBar', 'barBar-1');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
+ expectSimpleChanges(componentRef.instance.simpleChanges[0], {
+ fooFoo: new SimpleChange(undefined, 'fooFoo-1', true),
+ barBar: new SimpleChange(undefined, 'barBar-1', true),
+ });
+ }));
+
+ it('should call ngOnChanges twice for changes in different rounds with previous values', fakeAsync(() => {
+ strategy.setInputValue('fooFoo', 'fooFoo-1');
+ strategy.setInputValue('barBar', 'barBar-1');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
+ expectSimpleChanges(componentRef.instance.simpleChanges[0], {
+ fooFoo: new SimpleChange(undefined, 'fooFoo-1', true),
+ barBar: new SimpleChange(undefined, 'barBar-1', true),
+ });
+
+ strategy.setInputValue('fooFoo', 'fooFoo-2');
+ strategy.setInputValue('barBar', 'barBar-2');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
+ expectSimpleChanges(componentRef.instance.simpleChanges[1], {
+ fooFoo: new SimpleChange('fooFoo-1', 'fooFoo-2', false),
+ barBar: new SimpleChange('barBar-1', 'barBar-2', false),
+ });
+ }));
it('should not call ngOnChanges if the inout is set to the same value', fakeAsync(() => {
- const ngOnChangesSpy = spyOn(componentRef.instance, 'ngOnChanges');
+ const ngOnChangesSpy = spyOn(componentRef.instance, 'ngOnChanges');
- strategy.setInputValue('fooFoo', 'fooFoo-1');
- strategy.setInputValue('barBar', 'barBar-1');
- tick(16); // scheduler waits 16ms if RAF is unavailable
- expect(ngOnChangesSpy).toHaveBeenCalledTimes(1);
+ strategy.setInputValue('fooFoo', 'fooFoo-1');
+ strategy.setInputValue('barBar', 'barBar-1');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
+ expect(ngOnChangesSpy).toHaveBeenCalledTimes(1);
- ngOnChangesSpy.calls.reset();
+ ngOnChangesSpy.calls.reset();
- strategy.setInputValue('fooFoo', 'fooFoo-1');
- strategy.setInputValue('barBar', 'barBar-1');
- tick(16); // scheduler waits 16ms if RAF is unavailable
- expect(ngOnChangesSpy).not.toHaveBeenCalled();
- }));
+ strategy.setInputValue('fooFoo', 'fooFoo-1');
+ strategy.setInputValue('barBar', 'barBar-1');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
+ expect(ngOnChangesSpy).not.toHaveBeenCalled();
+ }));
it('should not try to call ngOnChanges if not present on the component', fakeAsync(() => {
- const factory2 = new FakeComponentFactory(FakeComponentWithoutNgOnChanges);
- const strategy2 = new ComponentNgElementStrategy(factory2, injector);
- const changeDetectorRef2 = factory2.componentRef.changeDetectorRef;
+ const factory2 = new FakeComponentFactory(FakeComponentWithoutNgOnChanges);
+ const strategy2 = new ComponentNgElementStrategy(factory2, injector);
+ const changeDetectorRef2 = factory2.componentRef.changeDetectorRef;
- strategy2.connect(document.createElement('div'));
- changeDetectorRef2.detectChanges.calls.reset();
+ strategy2.connect(document.createElement('div'));
+ changeDetectorRef2.detectChanges.calls.reset();
- strategy2.setInputValue('fooFoo', 'fooFoo-1');
- expect(() => tick(16)).not.toThrow(); // scheduler waits 16ms if RAF is unavailable
+ strategy2.setInputValue('fooFoo', 'fooFoo-1');
+ expect(() => tick(16)).not.toThrow(); // scheduler waits 16ms if RAF is unavailable
- // If the strategy would have tried to call `component.ngOnChanges()`, an error would have
- // been thrown and `changeDetectorRef2.detectChanges()` would not have been called.
- expect(changeDetectorRef2.detectChanges).toHaveBeenCalledTimes(1);
- }));
+ // If the strategy would have tried to call `component.ngOnChanges()`, an error would have
+ // been thrown and `changeDetectorRef2.detectChanges()` would not have been called.
+ expect(changeDetectorRef2.detectChanges).toHaveBeenCalledTimes(1);
+ }));
it('should mark the view for check', fakeAsync(() => {
- expect(viewChangeDetectorRef.markForCheck).not.toHaveBeenCalled();
+ expect(viewChangeDetectorRef.markForCheck).not.toHaveBeenCalled();
- strategy.setInputValue('fooFoo', 'fooFoo-1');
- tick(16); // scheduler waits 16ms if RAF is unavailable
+ strategy.setInputValue('fooFoo', 'fooFoo-1');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
- expect(viewChangeDetectorRef.markForCheck).toHaveBeenCalledTimes(1);
- }));
+ expect(viewChangeDetectorRef.markForCheck).toHaveBeenCalledTimes(1);
+ }));
it('should mark the view for check once for multiple input changes', fakeAsync(() => {
- strategy.setInputValue('fooFoo', 'fooFoo-1');
- strategy.setInputValue('barBar', 'barBar-1');
- tick(16); // scheduler waits 16ms if RAF is unavailable
+ strategy.setInputValue('fooFoo', 'fooFoo-1');
+ strategy.setInputValue('barBar', 'barBar-1');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
- expect(viewChangeDetectorRef.markForCheck).toHaveBeenCalledTimes(1);
- }));
+ expect(viewChangeDetectorRef.markForCheck).toHaveBeenCalledTimes(1);
+ }));
- it('should mark the view for check twice for changes in different rounds with previous values',
- fakeAsync(() => {
- strategy.setInputValue('fooFoo', 'fooFoo-1');
- strategy.setInputValue('barBar', 'barBar-1');
- tick(16); // scheduler waits 16ms if RAF is unavailable
+ it('should mark the view for check twice for changes in different rounds with previous values', fakeAsync(() => {
+ strategy.setInputValue('fooFoo', 'fooFoo-1');
+ strategy.setInputValue('barBar', 'barBar-1');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
- expect(viewChangeDetectorRef.markForCheck).toHaveBeenCalledTimes(1);
+ expect(viewChangeDetectorRef.markForCheck).toHaveBeenCalledTimes(1);
- strategy.setInputValue('fooFoo', 'fooFoo-2');
- strategy.setInputValue('barBar', 'barBar-2');
- tick(16); // scheduler waits 16ms if RAF is unavailable
+ strategy.setInputValue('fooFoo', 'fooFoo-2');
+ strategy.setInputValue('barBar', 'barBar-2');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
- expect(viewChangeDetectorRef.markForCheck).toHaveBeenCalledTimes(2);
- }));
+ expect(viewChangeDetectorRef.markForCheck).toHaveBeenCalledTimes(2);
+ }));
- it('should mark the view for check even if ngOnChanges is not present on the component',
- fakeAsync(() => {
- const factory2 = new FakeComponentFactory(FakeComponentWithoutNgOnChanges);
- const strategy2 = new ComponentNgElementStrategy(factory2, injector);
- const viewChangeDetectorRef2 = factory2.componentRef.injector.get(ChangeDetectorRef);
+ it('should mark the view for check even if ngOnChanges is not present on the component', fakeAsync(() => {
+ const factory2 = new FakeComponentFactory(FakeComponentWithoutNgOnChanges);
+ const strategy2 = new ComponentNgElementStrategy(factory2, injector);
+ const viewChangeDetectorRef2 = factory2.componentRef.injector.get(ChangeDetectorRef);
- strategy2.connect(document.createElement('div'));
- (viewChangeDetectorRef2.markForCheck as jasmine.Spy).calls.reset();
+ strategy2.connect(document.createElement('div'));
+ (viewChangeDetectorRef2.markForCheck as jasmine.Spy).calls.reset();
- strategy2.setInputValue('fooFoo', 'fooFoo-1');
- expect(() => tick(16)).not.toThrow(); // scheduler waits 16ms if RAF is unavailable
+ strategy2.setInputValue('fooFoo', 'fooFoo-1');
+ expect(() => tick(16)).not.toThrow(); // scheduler waits 16ms if RAF is unavailable
- // If the strategy would have tried to call `component.ngOnChanges()`, an error would have
- // been thrown and `viewChangeDetectorRef2.markForCheck()` would not have been called.
- expect(viewChangeDetectorRef2.markForCheck).toHaveBeenCalledTimes(1);
- }));
+ // If the strategy would have tried to call `component.ngOnChanges()`, an error would have
+ // been thrown and `viewChangeDetectorRef2.markForCheck()` would not have been called.
+ expect(viewChangeDetectorRef2.markForCheck).toHaveBeenCalledTimes(1);
+ }));
it('should not mark the view for check if the input is set to the same value', fakeAsync(() => {
- (viewChangeDetectorRef.markForCheck as jasmine.Spy).calls.reset();
+ (viewChangeDetectorRef.markForCheck as jasmine.Spy).calls.reset();
- strategy.setInputValue('fooFoo', 'fooFoo-1');
- strategy.setInputValue('barBar', 'barBar-1');
- tick(16); // scheduler waits 16ms if RAF is unavailable
- expect(viewChangeDetectorRef.markForCheck).toHaveBeenCalledTimes(1);
+ strategy.setInputValue('fooFoo', 'fooFoo-1');
+ strategy.setInputValue('barBar', 'barBar-1');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
+ expect(viewChangeDetectorRef.markForCheck).toHaveBeenCalledTimes(1);
- (viewChangeDetectorRef.markForCheck as jasmine.Spy).calls.reset();
+ (viewChangeDetectorRef.markForCheck as jasmine.Spy).calls.reset();
- strategy.setInputValue('fooFoo', 'fooFoo-1');
- strategy.setInputValue('barBar', 'barBar-1');
- tick(16); // scheduler waits 16ms if RAF is unavailable
- expect(viewChangeDetectorRef.markForCheck).not.toHaveBeenCalled();
- }));
+ strategy.setInputValue('fooFoo', 'fooFoo-1');
+ strategy.setInputValue('barBar', 'barBar-1');
+ tick(16); // scheduler waits 16ms if RAF is unavailable
+ expect(viewChangeDetectorRef.markForCheck).not.toHaveBeenCalled();
+ }));
});
describe('disconnect', () => {
it('should be able to call if not connected', fakeAsync(() => {
- strategy.disconnect();
+ strategy.disconnect();
- // Sanity check: the strategy doesn't have an instance of the componentRef anyways
- expect(componentRef.destroy).not.toHaveBeenCalled();
- }));
+ // Sanity check: the strategy doesn't have an instance of the componentRef anyways
+ expect(componentRef.destroy).not.toHaveBeenCalled();
+ }));
it('should destroy the component after the destroy delay', fakeAsync(() => {
- strategy.connect(document.createElement('div'));
- strategy.disconnect();
- expect(componentRef.destroy).not.toHaveBeenCalled();
+ strategy.connect(document.createElement('div'));
+ strategy.disconnect();
+ expect(componentRef.destroy).not.toHaveBeenCalled();
- tick(10);
- expect(componentRef.destroy).toHaveBeenCalledTimes(1);
- }));
+ tick(10);
+ expect(componentRef.destroy).toHaveBeenCalledTimes(1);
+ }));
it('should be able to call it multiple times but only destroy once', fakeAsync(() => {
- strategy.connect(document.createElement('div'));
- strategy.disconnect();
- strategy.disconnect();
- expect(componentRef.destroy).not.toHaveBeenCalled();
+ strategy.connect(document.createElement('div'));
+ strategy.disconnect();
+ strategy.disconnect();
+ expect(componentRef.destroy).not.toHaveBeenCalled();
- tick(10);
- expect(componentRef.destroy).toHaveBeenCalledTimes(1);
+ tick(10);
+ expect(componentRef.destroy).toHaveBeenCalledTimes(1);
- strategy.disconnect();
- expect(componentRef.destroy).toHaveBeenCalledTimes(1);
- }));
+ strategy.disconnect();
+ expect(componentRef.destroy).toHaveBeenCalledTimes(1);
+ }));
});
describe('runInZone', () => {
const param = 'foofoo';
const fn = () => param;
- it('should run the callback directly when invoked in element\'s zone', () => {
+ it("should run the callback directly when invoked in element's zone", () => {
expect(strategy['runInZone'](fn)).toEqual('foofoo');
expect(ngZone.run).not.toHaveBeenCalled();
});
- it('should run the callback inside the element\'s zone when invoked in a different zone',
- () => {
- expect(Zone.root.run(() => (strategy['runInZone'](fn)))).toEqual('foofoo');
- expect(ngZone.run).toHaveBeenCalledWith(fn);
- });
+ it("should run the callback inside the element's zone when invoked in a different zone", () => {
+ expect(Zone.root.run(() => strategy['runInZone'](fn))).toEqual('foofoo');
+ expect(ngZone.run).toHaveBeenCalledWith(fn);
+ });
it('should run the callback directly when called without zone.js loaded', () => {
// simulate no zone.js loaded
(strategy as any)['elementZone'] = null;
- expect(Zone.root.run(() => (strategy['runInZone'](fn)))).toEqual('foofoo');
+ expect(Zone.root.run(() => strategy['runInZone'](fn))).toEqual('foofoo');
expect(ngZone.run).not.toHaveBeenCalled();
});
});
@@ -438,18 +449,19 @@ export class FakeComponent {
export class FakeComponentFactory> extends ComponentFactory {
componentRef: any = jasmine.createSpyObj(
- 'componentRef',
- // Method spies.
- ['destroy'],
- // Property spies.
- {
- changeDetectorRef: jasmine.createSpyObj('changeDetectorRef', ['detectChanges']),
- hostView: {},
- injector: jasmine.createSpyObj('injector', {
- get: jasmine.createSpyObj('viewChangeDetectorRef', ['markForCheck']),
- }),
- instance: new this.ComponentClass(),
- });
+ 'componentRef',
+ // Method spies.
+ ['destroy'],
+ // Property spies.
+ {
+ changeDetectorRef: jasmine.createSpyObj('changeDetectorRef', ['detectChanges']),
+ hostView: {},
+ injector: jasmine.createSpyObj('injector', {
+ get: jasmine.createSpyObj('viewChangeDetectorRef', ['markForCheck']),
+ }),
+ instance: new this.ComponentClass(),
+ },
+ );
override get selector(): string {
return 'fake-component';
@@ -483,18 +495,21 @@ export class FakeComponentFactory> extends ComponentFactory<
}
override create(
- injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any,
- ngModule?: NgModuleRef): ComponentRef {
+ injector: Injector,
+ projectableNodes?: any[][],
+ rootSelectorOrNode?: string | any,
+ ngModule?: NgModuleRef,
+ ): ComponentRef {
return this.componentRef;
}
}
function expectSimpleChanges(actual: SimpleChanges, expected: SimpleChanges) {
- Object.keys(actual).forEach(key => {
+ Object.keys(actual).forEach((key) => {
expect(expected[key]).toBeTruthy(`Change included additional key ${key}`);
});
- Object.keys(expected).forEach(key => {
+ Object.keys(expected).forEach((key) => {
expect(actual[key]).toBeTruthy(`Change should have included key ${key}`);
if (actual[key]) {
expect(actual[key].previousValue).toBe(expected[key].previousValue, `${key}.previousValue`);
diff --git a/packages/elements/test/create-custom-element-env_spec.ts b/packages/elements/test/create-custom-element-env_spec.ts
index eb8c3054533f..0578a1bc322e 100644
--- a/packages/elements/test/create-custom-element-env_spec.ts
+++ b/packages/elements/test/create-custom-element-env_spec.ts
@@ -29,8 +29,7 @@ describe('createCustomElement with env injector', () => {
standalone: true,
template: `Hello, standalone element!`,
})
- class TestStandaloneCmp {
- }
+ class TestStandaloneCmp {}
const appRef = await createApplication();
diff --git a/packages/elements/test/create-custom-element_spec.ts b/packages/elements/test/create-custom-element_spec.ts
index 8fcd65e8abde..675040d2c842 100644
--- a/packages/elements/test/create-custom-element_spec.ts
+++ b/packages/elements/test/create-custom-element_spec.ts
@@ -6,13 +6,26 @@
* found in the LICENSE file at https://angular.io/license
*/
-import {Component, destroyPlatform, DoBootstrap, EventEmitter, Injector, Input, NgModule, Output} from '@angular/core';
+import {
+ Component,
+ destroyPlatform,
+ DoBootstrap,
+ EventEmitter,
+ Injector,
+ Input,
+ NgModule,
+ Output,
+} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {Subject} from 'rxjs';
import {createCustomElement, NgElementConstructor} from '../src/create-custom-element';
-import {NgElementStrategy, NgElementStrategyEvent, NgElementStrategyFactory} from '../src/element-strategy';
+import {
+ NgElementStrategy,
+ NgElementStrategyEvent,
+ NgElementStrategyFactory,
+} from '../src/element-strategy';
interface WithFooBar {
fooFoo: string;
@@ -28,20 +41,20 @@ describe('createCustomElement', () => {
let strategyFactory: TestStrategyFactory;
let injector: Injector;
- beforeAll(done => {
+ beforeAll((done) => {
testContainer = document.createElement('div');
document.body.appendChild(testContainer);
destroyPlatform();
platformBrowserDynamic()
- .bootstrapModule(TestModule)
- .then(ref => {
- injector = ref.injector;
- strategyFactory = new TestStrategyFactory();
- strategy = strategyFactory.testStrategy;
-
- NgElementCtor = createAndRegisterTestCustomElement(strategyFactory);
- })
- .then(done, done.fail);
+ .bootstrapModule(TestModule)
+ .then((ref) => {
+ injector = ref.injector;
+ strategyFactory = new TestStrategyFactory();
+ strategy = strategyFactory.testStrategy;
+
+ NgElementCtor = createAndRegisterTestCustomElement(strategyFactory);
+ })
+ .then(done, done.fail);
});
afterEach(() => strategy.reset());
@@ -95,7 +108,7 @@ describe('createCustomElement', () => {
element.connectedCallback();
let eventValue: any = null;
- element.addEventListener('some-event', (e: Event) => eventValue = (e as CustomEvent).detail);
+ element.addEventListener('some-event', (e: Event) => (eventValue = (e as CustomEvent).detail));
strategy.events.next({name: 'some-event', value: 'event-value'});
expect(eventValue).toEqual('event-value');
@@ -108,7 +121,7 @@ describe('createCustomElement', () => {
expect(strategy.disconnectCalled).toBe(true);
let eventValue: any = null;
- element.addEventListener('some-event', (e: Event) => eventValue = (e as CustomEvent).detail);
+ element.addEventListener('some-event', (e: Event) => (eventValue = (e as CustomEvent).detail));
strategy.events.next({name: 'some-event', value: 'event-value'});
expect(eventValue).toEqual(null);
@@ -118,42 +131,43 @@ describe('createCustomElement', () => {
const events: string[] = [];
const element = new NgElementCtor(injector);
- element.addEventListener('strategy-event', evt => events.push((evt as CustomEvent).detail));
+ element.addEventListener('strategy-event', (evt) => events.push((evt as CustomEvent).detail));
element.connectedCallback();
expect(events).toEqual(['connect']);
});
- it('should not break if `NgElementStrategy#events` is not available before calling `NgElementStrategy#connect()`',
- () => {
- class TestStrategyWithLateEvents extends TestStrategy {
- override events: Subject = undefined!;
+ it('should not break if `NgElementStrategy#events` is not available before calling `NgElementStrategy#connect()`', () => {
+ class TestStrategyWithLateEvents extends TestStrategy {
+ override events: Subject = undefined!;
- override connect(element: HTMLElement): void {
- this.connectedElement = element;
- this.events = new Subject();
- this.events.next({name: 'strategy-event', value: 'connect'});
- }
- }
+ override connect(element: HTMLElement): void {
+ this.connectedElement = element;
+ this.events = new Subject();
+ this.events.next({name: 'strategy-event', value: 'connect'});
+ }
+ }
- const strategyWithLateEvents = new TestStrategyWithLateEvents();
- const capturedEvents: string[] = [];
+ const strategyWithLateEvents = new TestStrategyWithLateEvents();
+ const capturedEvents: string[] = [];
- const NgElementCtorWithLateEventsStrategy =
- createAndRegisterTestCustomElement({create: () => strategyWithLateEvents});
+ const NgElementCtorWithLateEventsStrategy = createAndRegisterTestCustomElement({
+ create: () => strategyWithLateEvents,
+ });
- const element = new NgElementCtorWithLateEventsStrategy(injector);
- element.addEventListener(
- 'strategy-event', evt => capturedEvents.push((evt as CustomEvent).detail));
- element.connectedCallback();
+ const element = new NgElementCtorWithLateEventsStrategy(injector);
+ element.addEventListener('strategy-event', (evt) =>
+ capturedEvents.push((evt as CustomEvent).detail),
+ );
+ element.connectedCallback();
- // The "connect" event (emitted during initialization) was missed, but things didn't break.
- expect(capturedEvents).toEqual([]);
+ // The "connect" event (emitted during initialization) was missed, but things didn't break.
+ expect(capturedEvents).toEqual([]);
- // Subsequent events are still captured.
- strategyWithLateEvents.events.next({name: 'strategy-event', value: 'after-connect'});
- expect(capturedEvents).toEqual(['after-connect']);
- });
+ // Subsequent events are still captured.
+ strategyWithLateEvents.events.next({name: 'strategy-event', value: 'after-connect'});
+ expect(capturedEvents).toEqual(['after-connect']);
+ });
it('should properly set getters/setters on the element', () => {
const element = new NgElementCtor(injector);
@@ -166,23 +180,22 @@ describe('createCustomElement', () => {
expect(strategy.inputs.get('fooTransformed')).toBe(true);
});
- it('should properly handle getting/setting properties on the element even if the constructor is not called',
- () => {
- // Create a custom element while ensuring that the `NgElementStrategy` is not created
- // inside the constructor. This is done to emulate the behavior of some polyfills that do
- // not call the constructor.
- strategyFactory.create = () => undefined as unknown as NgElementStrategy;
- const element = new NgElementCtor(injector);
- strategyFactory.create = TestStrategyFactory.prototype.create;
+ it('should properly handle getting/setting properties on the element even if the constructor is not called', () => {
+ // Create a custom element while ensuring that the `NgElementStrategy` is not created
+ // inside the constructor. This is done to emulate the behavior of some polyfills that do
+ // not call the constructor.
+ strategyFactory.create = () => undefined as unknown as NgElementStrategy;
+ const element = new NgElementCtor(injector);
+ strategyFactory.create = TestStrategyFactory.prototype.create;
- element.fooFoo = 'foo-foo-value';
- element.barBar = 'barBar-value';
- element.fooTransformed = 'truthy';
+ element.fooFoo = 'foo-foo-value';
+ element.barBar = 'barBar-value';
+ element.fooTransformed = 'truthy';
- expect(strategy.inputs.get('fooFoo')).toBe('foo-foo-value');
- expect(strategy.inputs.get('barBar')).toBe('barBar-value');
- expect(strategy.inputs.get('fooTransformed')).toBe(true);
- });
+ expect(strategy.inputs.get('fooFoo')).toBe('foo-foo-value');
+ expect(strategy.inputs.get('barBar')).toBe('barBar-value');
+ expect(strategy.inputs.get('fooTransformed')).toBe(true);
+ });
it('should capture properties set before upgrading the element', () => {
// Create a regular element and set properties on it.
@@ -208,73 +221,71 @@ describe('createCustomElement', () => {
expect(strategy.inputs.get('fooTransformed')).toBe(true);
});
- it('should capture properties set after upgrading the element but before inserting it into the DOM',
- () => {
- // Create a regular element and set properties on it.
- const {selector, ElementCtor} = createTestCustomElement(strategyFactory);
- const element = Object.assign(document.createElement(selector), {
- fooFoo: 'foo-prop-value',
- barBar: 'bar-prop-value',
- fooTransformed: 'truthy' as unknown,
- });
- expect(element.fooFoo).toBe('foo-prop-value');
- expect(element.barBar).toBe('bar-prop-value');
- expect(element.fooTransformed).toBe('truthy');
-
- // Upgrade the element to a Custom Element (without inserting it into the DOM) and update a
- // property.
- customElements.define(selector, ElementCtor);
- customElements.upgrade(element);
- element.barBar = 'bar-prop-value-2';
- element.fooTransformed = '';
- expect(element.fooFoo).toBe('foo-prop-value');
- expect(element.barBar).toBe('bar-prop-value-2');
- expect(element.fooTransformed).toBe('');
-
- // Insert the element into the DOM.
- testContainer.appendChild(element);
- expect(element.fooFoo).toBe('foo-prop-value');
- expect(element.barBar).toBe('bar-prop-value-2');
- expect(element.fooTransformed).toBe(false);
-
- expect(strategy.inputs.get('fooFoo')).toBe('foo-prop-value');
- expect(strategy.inputs.get('barBar')).toBe('bar-prop-value-2');
- expect(strategy.inputs.get('fooTransformed')).toBe(false);
- });
-
- it('should allow overwriting properties with attributes after upgrading the element but before inserting it into the DOM',
- () => {
- // Create a regular element and set properties on it.
- const {selector, ElementCtor} = createTestCustomElement(strategyFactory);
- const element = Object.assign(document.createElement(selector), {
- fooFoo: 'foo-prop-value',
- barBar: 'bar-prop-value',
- fooTransformed: 'truthy' as unknown,
- });
- expect(element.fooFoo).toBe('foo-prop-value');
- expect(element.barBar).toBe('bar-prop-value');
- expect(element.fooTransformed).toBe('truthy');
-
- // Upgrade the element to a Custom Element (without inserting it into the DOM) and set an
- // attribute.
- customElements.define(selector, ElementCtor);
- customElements.upgrade(element);
- element.setAttribute('barbar', 'bar-attr-value');
- element.setAttribute('foo-transformed', '');
- expect(element.fooFoo).toBe('foo-prop-value');
- expect(element.barBar).toBe('bar-attr-value');
- expect(element.fooTransformed).toBe(false);
-
- // Insert the element into the DOM.
- testContainer.appendChild(element);
- expect(element.fooFoo).toBe('foo-prop-value');
- expect(element.barBar).toBe('bar-attr-value');
- expect(element.fooTransformed).toBe(false);
-
- expect(strategy.inputs.get('fooFoo')).toBe('foo-prop-value');
- expect(strategy.inputs.get('barBar')).toBe('bar-attr-value');
- expect(strategy.inputs.get('fooTransformed')).toBe(false);
- });
+ it('should capture properties set after upgrading the element but before inserting it into the DOM', () => {
+ // Create a regular element and set properties on it.
+ const {selector, ElementCtor} = createTestCustomElement(strategyFactory);
+ const element = Object.assign(document.createElement(selector), {
+ fooFoo: 'foo-prop-value',
+ barBar: 'bar-prop-value',
+ fooTransformed: 'truthy' as unknown,
+ });
+ expect(element.fooFoo).toBe('foo-prop-value');
+ expect(element.barBar).toBe('bar-prop-value');
+ expect(element.fooTransformed).toBe('truthy');
+
+ // Upgrade the element to a Custom Element (without inserting it into the DOM) and update a
+ // property.
+ customElements.define(selector, ElementCtor);
+ customElements.upgrade(element);
+ element.barBar = 'bar-prop-value-2';
+ element.fooTransformed = '';
+ expect(element.fooFoo).toBe('foo-prop-value');
+ expect(element.barBar).toBe('bar-prop-value-2');
+ expect(element.fooTransformed).toBe('');
+
+ // Insert the element into the DOM.
+ testContainer.appendChild(element);
+ expect(element.fooFoo).toBe('foo-prop-value');
+ expect(element.barBar).toBe('bar-prop-value-2');
+ expect(element.fooTransformed).toBe(false);
+
+ expect(strategy.inputs.get('fooFoo')).toBe('foo-prop-value');
+ expect(strategy.inputs.get('barBar')).toBe('bar-prop-value-2');
+ expect(strategy.inputs.get('fooTransformed')).toBe(false);
+ });
+
+ it('should allow overwriting properties with attributes after upgrading the element but before inserting it into the DOM', () => {
+ // Create a regular element and set properties on it.
+ const {selector, ElementCtor} = createTestCustomElement(strategyFactory);
+ const element = Object.assign(document.createElement(selector), {
+ fooFoo: 'foo-prop-value',
+ barBar: 'bar-prop-value',
+ fooTransformed: 'truthy' as unknown,
+ });
+ expect(element.fooFoo).toBe('foo-prop-value');
+ expect(element.barBar).toBe('bar-prop-value');
+ expect(element.fooTransformed).toBe('truthy');
+
+ // Upgrade the element to a Custom Element (without inserting it into the DOM) and set an
+ // attribute.
+ customElements.define(selector, ElementCtor);
+ customElements.upgrade(element);
+ element.setAttribute('barbar', 'bar-attr-value');
+ element.setAttribute('foo-transformed', '');
+ expect(element.fooFoo).toBe('foo-prop-value');
+ expect(element.barBar).toBe('bar-attr-value');
+ expect(element.fooTransformed).toBe(false);
+
+ // Insert the element into the DOM.
+ testContainer.appendChild(element);
+ expect(element.fooFoo).toBe('foo-prop-value');
+ expect(element.barBar).toBe('bar-attr-value');
+ expect(element.fooTransformed).toBe(false);
+
+ expect(strategy.inputs.get('fooFoo')).toBe('foo-prop-value');
+ expect(strategy.inputs.get('barBar')).toBe('bar-attr-value');
+ expect(strategy.inputs.get('fooTransformed')).toBe(false);
+ });
// Helpers
function createAndRegisterTestCustomElement(strategyFactory: NgElementStrategyFactory) {
@@ -313,7 +324,7 @@ describe('createCustomElement', () => {
}
class TestStrategy implements NgElementStrategy {
- connectedElement: HTMLElement|null = null;
+ connectedElement: HTMLElement | null = null;
disconnectCalled = false;
inputs = new Map();
@@ -350,8 +361,9 @@ describe('createCustomElement', () => {
// Although not used by the `TestStrategy`, verify that the injector is provided.
if (!injector) {
throw new Error(
- 'Expected injector to be passed to `TestStrategyFactory#create()`, but received ' +
- `value of type ${typeof injector}: ${injector}`);
+ 'Expected injector to be passed to `TestStrategyFactory#create()`, but received ' +
+ `value of type ${typeof injector}: ${injector}`,
+ );
}
return this.testStrategy;
diff --git a/packages/elements/test/extract-projectable-nodes_spec.ts b/packages/elements/test/extract-projectable-nodes_spec.ts
index 2f15d3f2630f..fd8635887d4e 100644
--- a/packages/elements/test/extract-projectable-nodes_spec.ts
+++ b/packages/elements/test/extract-projectable-nodes_spec.ts
@@ -14,9 +14,9 @@ describe('extractProjectableNodes()', () => {
const expectProjectableNodes = (matches: {[selector: string]: number[]}) => {
const selectors = Object.keys(matches);
- const expected = selectors.map(selector => {
+ const expected = selectors.map((selector) => {
const matchingIndices = matches[selector];
- return matchingIndices.map(idx => childNodes[idx]);
+ return matchingIndices.map((idx) => childNodes[idx]);
});
expect(extractProjectableNodes(elem, selectors)).toEqual(expected);
@@ -25,57 +25,82 @@ describe('extractProjectableNodes()', () => {
beforeEach(() => {
elem = document.createElement('div');
- elem.innerHTML = '' +
- '' +
- '
' +
- '' +
- '' +
- 'Text' +
- '' +
- 'More text';
+ elem.innerHTML =
+ '' +
+ '' +
+ '
' +
+ '' +
+ '' +
+ 'Text' +
+ '' +
+ 'More text';
childNodes = Array.prototype.slice.call(elem.childNodes);
});
- it('should match each node to the corresponding selector', test({
- '[first]': [0],
- '#bar': [1],
- '#quux': [4],
- }));
+ it(
+ 'should match each node to the corresponding selector',
+ test({
+ '[first]': [0],
+ '#bar': [1],
+ '#quux': [4],
+ }),
+ );
- it('should ignore non-matching nodes', test({
- '.zoo': [],
- }));
+ it(
+ 'should ignore non-matching nodes',
+ test({
+ '.zoo': [],
+ }),
+ );
- it('should only match top-level child nodes', test({
- 'span': [1],
- '.bar': [],
- }));
+ it(
+ 'should only match top-level child nodes',
+ test({
+ 'span': [1],
+ '.bar': [],
+ }),
+ );
- it('should support complex selectors', test({
- '.foo:not(div)': [4],
- 'div + #bar': [1],
- }));
+ it(
+ 'should support complex selectors',
+ test({
+ '.foo:not(div)': [4],
+ 'div + #bar': [1],
+ }),
+ );
- it('should match each node with the first matching selector', test({
- 'div': [0],
- '.foo': [4],
- 'blink': [],
- }));
+ it(
+ 'should match each node with the first matching selector',
+ test({
+ 'div': [0],
+ '.foo': [4],
+ 'blink': [],
+ }),
+ );
describe('(with wildcard selector)', () => {
- it('should match non-element nodes to `*` (but still ignore comments)', test({
- 'div,span,blink': [0, 1, 4],
- '*': [2, 3, 5],
- }));
+ it(
+ 'should match non-element nodes to `*` (but still ignore comments)',
+ test({
+ 'div,span,blink': [0, 1, 4],
+ '*': [2, 3, 5],
+ }),
+ );
- it('should match otherwise unmatched nodes to `*`', test({
- 'div,blink': [0, 4],
- '*': [1, 2, 3, 5],
- }));
+ it(
+ 'should match otherwise unmatched nodes to `*`',
+ test({
+ 'div,blink': [0, 4],
+ '*': [1, 2, 3, 5],
+ }),
+ );
- it('should give higher priority to `*` (eve if it appears first)', test({
- '*': [2, 3, 5],
- 'div,span,blink': [0, 1, 4],
- }));
+ it(
+ 'should give higher priority to `*` (eve if it appears first)',
+ test({
+ '*': [2, 3, 5],
+ 'div,span,blink': [0, 1, 4],
+ }),
+ );
});
});
diff --git a/packages/elements/test/slots_spec.ts b/packages/elements/test/slots_spec.ts
index 71e5fede2a1d..b6b205ca0376 100644
--- a/packages/elements/test/slots_spec.ts
+++ b/packages/elements/test/slots_spec.ts
@@ -6,32 +6,40 @@
* found in the LICENSE file at https://angular.io/license
*/
-import {Component, ComponentFactoryResolver, destroyPlatform, EventEmitter, Input, NgModule, Output, ViewEncapsulation} from '@angular/core';
+import {
+ Component,
+ ComponentFactoryResolver,
+ destroyPlatform,
+ EventEmitter,
+ Input,
+ NgModule,
+ Output,
+ ViewEncapsulation,
+} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {createCustomElement, NgElement} from '../src/create-custom-element';
-
describe('slots', () => {
let testContainer: HTMLDivElement;
- beforeAll(done => {
+ beforeAll((done) => {
testContainer = document.createElement('div');
document.body.appendChild(testContainer);
destroyPlatform();
platformBrowserDynamic()
- .bootstrapModule(TestModule)
- .then(ref => {
- const injector = ref.injector;
- const cfr: ComponentFactoryResolver = injector.get(ComponentFactoryResolver);
-
- testElements.forEach(comp => {
- const compFactory = cfr.resolveComponentFactory(comp);
- customElements.define(compFactory.selector, createCustomElement(comp, {injector}));
- });
- })
- .then(done, done.fail);
+ .bootstrapModule(TestModule)
+ .then((ref) => {
+ const injector = ref.injector;
+ const cfr: ComponentFactoryResolver = injector.get(ComponentFactoryResolver);
+
+ testElements.forEach((comp) => {
+ const compFactory = cfr.resolveComponentFactory(comp);
+ customElements.define(compFactory.selector, createCustomElement(comp, {injector}));
+ });
+ })
+ .then(done, done.fail);
});
afterAll(() => {
@@ -86,7 +94,7 @@ describe('slots', () => {
templateEl.innerHTML = tpl;
const template = templateEl.content.cloneNode(true) as DocumentFragment;
const testEl = template.querySelector('slot-events-el')! as NgElement & SlotEventsComponent;
- testEl.addEventListener('slotEventsChange', e => {
+ testEl.addEventListener('slotEventsChange', (e) => {
expect(testEl.slotEvents.length).toEqual(1);
done();
});
@@ -99,7 +107,7 @@ describe('slots', () => {
@Component({
selector: 'default-slot-el',
template: '
',
- encapsulation: ViewEncapsulation.ShadowDom
+ encapsulation: ViewEncapsulation.ShadowDom,
})
class DefaultSlotComponent {
constructor() {}
@@ -108,7 +116,7 @@ class DefaultSlotComponent {
@Component({
selector: 'named-slot-el',
template: '
',
- encapsulation: ViewEncapsulation.ShadowDom
+ encapsulation: ViewEncapsulation.ShadowDom,
})
class NamedSlotComponent {
constructor() {}
@@ -117,7 +125,7 @@ class NamedSlotComponent {
@Component({
selector: 'named-slots-el',
template: '
',
- encapsulation: ViewEncapsulation.ShadowDom
+ encapsulation: ViewEncapsulation.ShadowDom,
})
class NamedSlotsComponent {
constructor() {}
@@ -126,7 +134,7 @@ class NamedSlotsComponent {
@Component({
selector: 'slot-events-el',
template: '',
- encapsulation: ViewEncapsulation.ShadowDom
+ encapsulation: ViewEncapsulation.ShadowDom,
})
class SlotEventsComponent {
@Input() slotEvents: Event[] = [];
@@ -138,8 +146,12 @@ class SlotEventsComponent {
}
}
-const testElements =
- [DefaultSlotComponent, NamedSlotComponent, NamedSlotsComponent, SlotEventsComponent];
+const testElements = [
+ DefaultSlotComponent,
+ NamedSlotComponent,
+ NamedSlotsComponent,
+ SlotEventsComponent,
+];
@NgModule({imports: [BrowserModule], declarations: testElements})
class TestModule {
diff --git a/packages/elements/test/utils_spec.ts b/packages/elements/test/utils_spec.ts
index 877f016ba606..2e1f748084ea 100644
--- a/packages/elements/test/utils_spec.ts
+++ b/packages/elements/test/utils_spec.ts
@@ -6,7 +6,15 @@
* found in the LICENSE file at https://angular.io/license
*/
-import {camelToDashCase, isElement, isFunction, kebabToCamelCase, matchesSelector, scheduler, strictEquals} from '../src/utils';
+import {
+ camelToDashCase,
+ isElement,
+ isFunction,
+ kebabToCamelCase,
+ matchesSelector,
+ scheduler,
+ strictEquals,
+} from '../src/utils';
describe('utils', () => {
describe('scheduler', () => {
@@ -45,7 +53,9 @@ describe('utils', () => {
const mockCancelFn = () => undefined;
let scheduleSpy: jasmine.Spy;
- beforeEach(() => scheduleSpy = spyOn(scheduler, 'schedule').and.returnValue(mockCancelFn));
+ beforeEach(
+ () => (scheduleSpy = spyOn(scheduler, 'schedule').and.returnValue(mockCancelFn)),
+ );
it('should delegate to `scheduler.schedule()`', () => {
const cb = () => null;
@@ -98,7 +108,7 @@ describe('utils', () => {
document.documentElement,
];
- elems.forEach(n => expect(isElement(n)).toBe(true));
+ elems.forEach((n) => expect(isElement(n)).toBe(true));
});
it('should return false for non-Element nodes', () => {
@@ -110,36 +120,22 @@ describe('utils', () => {
document.createTextNode('baz'),
];
- nonElems.forEach(n => expect(isElement(n)).toBe(false));
+ nonElems.forEach((n) => expect(isElement(n)).toBe(false));
});
});
describe('isFunction()', () => {
it('should return true for functions', () => {
- const obj = {foo: function() {}, bar: () => null, baz() {}};
- const fns = [
- function() {},
- () => null,
- obj.foo,
- obj.bar,
- obj.baz,
- Function,
- Date,
- ];
+ const obj = {foo: function () {}, bar: () => null, baz() {}};
+ const fns = [function () {}, () => null, obj.foo, obj.bar, obj.baz, Function, Date];
- fns.forEach(v => expect(isFunction(v)).toBe(true));
+ fns.forEach((v) => expect(isFunction(v)).toBe(true));
});
it('should return false for non-functions', () => {
- const nonFns = [
- undefined,
- null,
- true,
- 42,
- {},
- ];
+ const nonFns = [undefined, null, true, 42, {}];
- nonFns.forEach(v => expect(isFunction(v)).toBe(false));
+ nonFns.forEach((v) => expect(isFunction(v)).toBe(false));
});
});
diff --git a/packages/examples/common/location/ts/e2e_test/location_component_spec.ts b/packages/examples/common/location/ts/e2e_test/location_component_spec.ts
index 06bcfc061c36..8458159beea8 100644
--- a/packages/examples/common/location/ts/e2e_test/location_component_spec.ts
+++ b/packages/examples/common/location/ts/e2e_test/location_component_spec.ts
@@ -10,7 +10,6 @@ import {$, browser, by, element, protractor} from 'protractor';
import {verifyNoBrowserErrors} from '../../../../test-utils';
-
function waitForElement(selector: string) {
const EC = (protractor).ExpectedConditions;
// Waits for the element with id 'abc' to be present on the dom.
diff --git a/packages/examples/common/location/ts/hash_location_component.ts b/packages/examples/common/location/ts/hash_location_component.ts
index f44c367e8709..9236e203d08f 100644
--- a/packages/examples/common/location/ts/hash_location_component.ts
+++ b/packages/examples/common/location/ts/hash_location_component.ts
@@ -15,9 +15,11 @@ import {Component} from '@angular/core';
providers: [Location, {provide: LocationStrategy, useClass: HashLocationStrategy}],
template: `
HashLocationStrategy
- Current URL is: {{location.path()}}
- Normalize: /foo/bar/ is: {{location.normalize('foo/bar')}}
- `
+ Current URL is: {{ location.path() }}
+ Normalize: /foo/bar/ is: {{ location.normalize('foo/bar') }}
+ `,
})
export class HashLocationComponent {
location: Location;
diff --git a/packages/examples/common/location/ts/module.ts b/packages/examples/common/location/ts/module.ts
index b0d11b81bbef..f20a9c5c40e0 100644
--- a/packages/examples/common/location/ts/module.ts
+++ b/packages/examples/common/location/ts/module.ts
@@ -15,15 +15,13 @@ import {PathLocationComponent} from './path_location_component';
@Component({
selector: 'example-app',
- template: ``
+ template: ``,
})
-export class AppComponent {
-}
+export class AppComponent {}
@NgModule({
declarations: [AppComponent, PathLocationComponent, HashLocationComponent],
providers: [{provide: APP_BASE_HREF, useValue: '/'}],
imports: [BrowserModule],
})
-export class AppModule {
-}
+export class AppModule {}
diff --git a/packages/examples/common/location/ts/path_location_component.ts b/packages/examples/common/location/ts/path_location_component.ts
index 820517f5b35c..0c8c1b7f95bf 100644
--- a/packages/examples/common/location/ts/path_location_component.ts
+++ b/packages/examples/common/location/ts/path_location_component.ts
@@ -15,9 +15,11 @@ import {Component} from '@angular/core';
providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}],
template: `
PathLocationStrategy
- Current URL is: {{location.path()}}
- Normalize: /foo/bar/ is: {{location.normalize('foo/bar')}}
- `
+ Current URL is: {{ location.path() }}
+ Normalize: /foo/bar/ is: {{ location.normalize('foo/bar') }}
+ `,
})
export class PathLocationComponent {
location: Location;
diff --git a/packages/examples/common/ngComponentOutlet/ts/module.ts b/packages/examples/common/ngComponentOutlet/ts/module.ts
index 276630e5f99f..6ca76c830da5 100644
--- a/packages/examples/common/ngComponentOutlet/ts/module.ts
+++ b/packages/examples/common/ngComponentOutlet/ts/module.ts
@@ -6,18 +6,26 @@
* found in the LICENSE file at https://angular.io/license
*/
-import {Component, Injectable, Injector, Input, NgModule, OnInit, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
+import {
+ Component,
+ Injectable,
+ Injector,
+ Input,
+ NgModule,
+ OnInit,
+ TemplateRef,
+ ViewChild,
+ ViewContainerRef,
+} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
-
// #docregion SimpleExample
@Component({selector: 'hello-world', template: 'Hello World!'})
-export class HelloWorld {
-}
+export class HelloWorld {}
@Component({
selector: 'ng-component-outlet-simple-example',
- template: ``
+ template: ``,
})
export class NgComponentOutletSimpleExample {
// This field is necessary to expose HelloWorld to the template.
@@ -33,7 +41,7 @@ export class Greeter {
@Component({
selector: 'complete-component',
- template: `{{ label }}: {{ greeter.suffix }}`
+ template: `{{ label }}: {{ greeter.suffix }}`,
})
export class CompleteComponent {
@Input() label!: string;
@@ -43,13 +51,16 @@ export class CompleteComponent {
@Component({
selector: 'ng-component-outlet-complete-example',
- template: `
- Ahoj
+ template: ` Ahoj
Svet
- `
+ `,
})
export class NgComponentOutletCompleteExample implements OnInit {
// This field is necessary to expose CompleteComponent to the template.
@@ -62,37 +73,42 @@ export class NgComponentOutletCompleteExample implements OnInit {
@ViewChild('svet', {static: true}) svetTemplateRef!: TemplateRef;
myContent?: any[][];
- constructor(injector: Injector, private vcr: ViewContainerRef) {
- this.myInjector =
- Injector.create({providers: [{provide: Greeter, deps: []}], parent: injector});
+ constructor(
+ injector: Injector,
+ private vcr: ViewContainerRef,
+ ) {
+ this.myInjector = Injector.create({
+ providers: [{provide: Greeter, deps: []}],
+ parent: injector,
+ });
}
ngOnInit() {
// Create the projectable content from the templates
this.myContent = [
this.vcr.createEmbeddedView(this.ahojTemplateRef).rootNodes,
- this.vcr.createEmbeddedView(this.svetTemplateRef).rootNodes
+ this.vcr.createEmbeddedView(this.svetTemplateRef).rootNodes,
];
}
}
// #enddocregion
-
@Component({
selector: 'example-app',
template: `
-
- `
+
+ `,
})
-export class AppComponent {
-}
+export class AppComponent {}
@NgModule({
imports: [BrowserModule],
declarations: [
- AppComponent, NgComponentOutletSimpleExample, NgComponentOutletCompleteExample, HelloWorld,
- CompleteComponent
+ AppComponent,
+ NgComponentOutletSimpleExample,
+ NgComponentOutletCompleteExample,
+ HelloWorld,
+ CompleteComponent,
],
})
-export class AppModule {
-}
+export class AppModule {}
diff --git a/packages/examples/common/ngIf/ts/e2e_test/ngIf_spec.ts b/packages/examples/common/ngIf/ts/e2e_test/ngIf_spec.ts
index b011ec1bcab2..ae1eee6ab272 100644
--- a/packages/examples/common/ngIf/ts/e2e_test/ngIf_spec.ts
+++ b/packages/examples/common/ngIf/ts/e2e_test/ngIf_spec.ts
@@ -38,8 +38,9 @@ describe('ngIf', () => {
waitForElement(comp);
expect(element.all(by.css(comp)).get(0).getText()).toEqual('hide show = true\nText to show');
element(by.css(comp + ' button')).click();
- expect(element.all(by.css(comp)).get(0).getText())
- .toEqual('show show = false\nAlternate text while primary text is hidden');
+ expect(element.all(by.css(comp)).get(0).getText()).toEqual(
+ 'show show = false\nAlternate text while primary text is hidden',
+ );
});
});
@@ -49,14 +50,23 @@ describe('ngIf', () => {
it('should hide/show content', () => {
browser.get(URL);
waitForElement(comp);
- expect(element.all(by.css(comp)).get(0).getText())
- .toEqual('hideSwitch Primary show = true\nPrimary text to show');
- element.all(by.css(comp + ' button')).get(1).click();
- expect(element.all(by.css(comp)).get(0).getText())
- .toEqual('hideSwitch Primary show = true\nSecondary text to show');
- element.all(by.css(comp + ' button')).get(0).click();
- expect(element.all(by.css(comp)).get(0).getText())
- .toEqual('showSwitch Primary show = false\nAlternate text while primary text is hidden');
+ expect(element.all(by.css(comp)).get(0).getText()).toEqual(
+ 'hideSwitch Primary show = true\nPrimary text to show',
+ );
+ element
+ .all(by.css(comp + ' button'))
+ .get(1)
+ .click();
+ expect(element.all(by.css(comp)).get(0).getText()).toEqual(
+ 'hideSwitch Primary show = true\nSecondary text to show',
+ );
+ element
+ .all(by.css(comp + ' button'))
+ .get(0)
+ .click();
+ expect(element.all(by.css(comp)).get(0).getText()).toEqual(
+ 'showSwitch Primary show = false\nAlternate text while primary text is hidden',
+ );
});
});
@@ -65,8 +75,9 @@ describe('ngIf', () => {
it('should hide/show content', () => {
browser.get(URL);
waitForElement(comp);
- expect(element.all(by.css(comp)).get(0).getText())
- .toEqual('Next User\nWaiting... (user is null)');
+ expect(element.all(by.css(comp)).get(0).getText()).toEqual(
+ 'Next User\nWaiting... (user is null)',
+ );
element(by.css(comp + ' button')).click();
expect(element.all(by.css(comp)).get(0).getText()).toEqual('Next User\nHello Smith, John!');
});
diff --git a/packages/examples/common/ngIf/ts/module.ts b/packages/examples/common/ngIf/ts/module.ts
index fdd85e2273df..16783ac4c726 100644
--- a/packages/examples/common/ngIf/ts/module.ts
+++ b/packages/examples/common/ngIf/ts/module.ts
@@ -10,16 +10,15 @@ import {Component, NgModule, OnInit, TemplateRef, ViewChild} from '@angular/core
import {BrowserModule} from '@angular/platform-browser';
import {Subject} from 'rxjs';
-
// #docregion NgIfSimple
@Component({
selector: 'ng-if-simple',
template: `
-
- show = {{show}}
-
+
+ show = {{ show }}
+
Text to show
-`
+ `,
})
export class NgIfSimple {
show = true;
@@ -30,12 +29,12 @@ export class NgIfSimple {
@Component({
selector: 'ng-if-else',
template: `
-
- show = {{show}}
-
+
+ show = {{ show }}
+
Text to show
Alternate text while primary text is hidden
-`
+ `,
})
export class NgIfElse {
show = true;
@@ -46,22 +45,22 @@ export class NgIfElse {
@Component({
selector: 'ng-if-then-else',
template: `
-
+
- show = {{show}}
-
+ show = {{ show }}
+
this is ignored
Primary text to show
Secondary text to show
Alternate text while primary text is hidden
-`
+ `,
})
export class NgIfThenElse implements OnInit {
- thenBlock: TemplateRef|null = null;
+ thenBlock: TemplateRef | null = null;
show = true;
- @ViewChild('primaryBlock', {static: true}) primaryBlock: TemplateRef|null = null;
- @ViewChild('secondaryBlock', {static: true}) secondaryBlock: TemplateRef|null = null;
+ @ViewChild('primaryBlock', {static: true}) primaryBlock: TemplateRef | null = null;
+ @ViewChild('secondaryBlock', {static: true}) secondaryBlock: TemplateRef | null = null;
switchPrimary() {
this.thenBlock = this.thenBlock === this.primaryBlock ? this.secondaryBlock : this.primaryBlock;
@@ -78,15 +77,15 @@ export class NgIfThenElse implements OnInit {
selector: 'ng-if-as',
template: `
-
+
- Hello {{user.last}}, {{user.first}}!
+ Hello {{ user.last }}, {{ user.first }}!
- Waiting... (user is {{user|json}})
-`
+ Waiting... (user is {{ user | json }})
+ `,
})
export class NgIfAs {
- userObservable = new Subject<{first: string, last: string}>();
+ userObservable = new Subject<{first: string; last: string}>();
first = ['John', 'Mike', 'Mary', 'Bob'];
firstIndex = 0;
last = ['Smith', 'Novotny', 'Angular'];
@@ -102,26 +101,23 @@ export class NgIfAs {
}
// #enddocregion
-
@Component({
selector: 'example-app',
template: `
-
+
-
+
-
+
-
-`
+
+ `,
})
-export class AppComponent {
-}
+export class AppComponent {}
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, NgIfSimple, NgIfElse, NgIfThenElse, NgIfAs],
})
-export class AppModule {
-}
+export class AppModule {}
diff --git a/packages/examples/common/ngTemplateOutlet/ts/e2e_test/ngTemplateOutlet_spec.ts b/packages/examples/common/ngTemplateOutlet/ts/e2e_test/ngTemplateOutlet_spec.ts
index 467f03f4bf25..20095bbb3031 100644
--- a/packages/examples/common/ngTemplateOutlet/ts/e2e_test/ngTemplateOutlet_spec.ts
+++ b/packages/examples/common/ngTemplateOutlet/ts/e2e_test/ngTemplateOutlet_spec.ts
@@ -25,7 +25,9 @@ describe('ngTemplateOutlet', () => {
browser.get(URL);
waitForElement('ng-template-outlet-example');
expect(element.all(by.css('ng-template-outlet-example span')).getText()).toEqual([
- 'Hello', 'Hello World!', 'Ahoj Svet!'
+ 'Hello',
+ 'Hello World!',
+ 'Ahoj Svet!',
]);
});
});
diff --git a/packages/examples/common/ngTemplateOutlet/ts/module.ts b/packages/examples/common/ngTemplateOutlet/ts/module.ts
index 6c78dd9e5bc4..912ab9836bf3 100644
--- a/packages/examples/common/ngTemplateOutlet/ts/module.ts
+++ b/packages/examples/common/ngTemplateOutlet/ts/module.ts
@@ -9,39 +9,39 @@
import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
-
// #docregion NgTemplateOutlet
@Component({
selector: 'ng-template-outlet-example',
template: `
-
+
-
+
-
+
Hello
- Hello {{name}}!
- Ahoj {{person}}!
-`
+ Hello {{ name }}!
+ Ahoj {{ person }}!
+ `,
})
export class NgTemplateOutletExample {
myContext = {$implicit: 'World', localSk: 'Svet'};
}
// #enddocregion
-
@Component({
selector: 'example-app',
- template: ``
+ template: ``,
})
-export class AppComponent {
-}
+export class AppComponent {}
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, NgTemplateOutletExample],
})
-export class AppModule {
-}
+export class AppModule {}
diff --git a/packages/examples/common/pipes/ts/async_pipe.ts b/packages/examples/common/pipes/ts/async_pipe.ts
index 05fb1056e938..c895e997fa34 100644
--- a/packages/examples/common/pipes/ts/async_pipe.ts
+++ b/packages/examples/common/pipes/ts/async_pipe.ts
@@ -16,13 +16,13 @@ import {Observable, Observer} from 'rxjs';
promise|async:
Wait for it... {{ greeting | async }}
-