mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
bdce7698fc
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
42 lines
954 B
TypeScript
42 lines
954 B
TypeScript
import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'hello-world-el',
|
|
template: 'Hello {{name}}!',
|
|
})
|
|
export class HelloWorldComponent {
|
|
@Input() name: string = 'World';
|
|
}
|
|
|
|
@Component({
|
|
selector: 'hello-world-onpush-el',
|
|
template: 'Hello {{name}}!',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class HelloWorldOnpushComponent {
|
|
@Input() name: string = 'World';
|
|
}
|
|
|
|
@Component({
|
|
selector: 'hello-world-shadow-el',
|
|
template: 'Hello {{name}}!',
|
|
encapsulation: ViewEncapsulation.ShadowDom,
|
|
})
|
|
export class HelloWorldShadowComponent {
|
|
@Input() name: string = 'World';
|
|
}
|
|
|
|
@Component({
|
|
selector: 'test-card',
|
|
template: `
|
|
<header>
|
|
<slot name="card-header"></slot>
|
|
</header>
|
|
<slot></slot>
|
|
<footer>
|
|
<slot name="card-footer"></slot>
|
|
</footer>`,
|
|
encapsulation: ViewEncapsulation.ShadowDom,
|
|
})
|
|
export class TestCardComponent {
|
|
}
|