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: https://github.com/angular/angular/blob/3236ae0ee118d0734c90fa9f3767435396213470/packages/upgrade/src/common/src/downgrade_component_adapter.ts#L146. Fixes #38948 PR Close #39452
16 lines
654 B
TypeScript
16 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);
|
|
});
|