angular/integration/ng_elements/src/main.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

15 lines
654 B
TypeScript

import {platformBrowser} from '@angular/platform-browser';
import {AppModuleNgFactory} from './app.ngfactory';
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory, {ngZone: 'noop'});
const input = document.querySelector('input')!;
const helloWorld = document.querySelector('hello-world-el')!;
const helloWorldOnpush = document.querySelector('hello-world-onpush-el')!;
const helloWorldShadow = document.querySelector('hello-world-shadow-el')!;
input.addEventListener('input', () => {
helloWorld.setAttribute('name', input.value);
helloWorldOnpush.setAttribute('name', input.value);
helloWorldShadow.setAttribute('name', input.value);
});