angular/integration/ng_elements/src/app.ts
George Kalpakas bdce7698fc fix(elements): update the view of an OnPush component when inputs change (#39452)
As with regular Angular components, Angular elements are expected to
have their views update when inputs change.

Previously, Angular Elements views were not updated if the underlying
component used the `OnPush` change detection strategy.

This commit fixes this by calling `markForCheck()` on the component
view's `ChangeDetectorRef`.

NOTE:
This is similar to how `@angular/upgrade` does it:
3236ae0ee1/packages/upgrade/src/common/src/downgrade_component_adapter.ts (L146).

Fixes #38948

PR Close #39452
2020-11-06 09:31:46 -08:00

33 lines
1.1 KiB
TypeScript

import {Injector, NgModule} from '@angular/core';
import {createCustomElement} from '@angular/elements';
import {BrowserModule} from '@angular/platform-browser';
import {HelloWorldComponent, HelloWorldOnpushComponent, HelloWorldShadowComponent, TestCardComponent} from './elements';
@NgModule({
declarations: [
HelloWorldComponent,
HelloWorldOnpushComponent,
HelloWorldShadowComponent,
TestCardComponent,
],
entryComponents: [
HelloWorldComponent,
HelloWorldOnpushComponent,
HelloWorldShadowComponent,
TestCardComponent,
],
imports: [BrowserModule],
})
export class AppModule {
constructor(injector: Injector) {
customElements.define('hello-world-el', createCustomElement(HelloWorldComponent, {injector}));
customElements.define(
'hello-world-onpush-el', createCustomElement(HelloWorldOnpushComponent, {injector}));
customElements.define(
'hello-world-shadow-el', createCustomElement(HelloWorldShadowComponent, {injector}));
customElements.define('test-card', createCustomElement(TestCardComponent, {injector}));
}
ngDoBootstrap() {}
}