Angular Elements — установка свойства @Input() программно не обновляет компонент. ⇐ Html

[Anonymous]

Я экспериментирую с Angular Elements и пытаюсь обновить входное свойство программно, а не записывая его в HTML, например .
Вот минимальный пример:

Код: Выделить всё

import {
Component,
Input,
Injector,
inject,
NO_ERRORS_SCHEMA,
} from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';

@Component({
selector: 'foo',
template: `foo works! {{ name }}`,
})
export class Foo {
@Input() name = '';
}

@Component({
selector: 'app-root',
template: `
Hello from {{ name }}!

`,
schemas: [NO_ERRORS_SCHEMA],
})
export class App {
name = 'Angular';
injector = inject(Injector);

constructor() {
const el = createCustomElement(Foo, { injector: this.injector });
customElements.define('app-foo', el);

const e = document.querySelector('app-foo') as any;
e.name = 'bla'; // property
e.setAttribute('name', 'bla'); // attribute
}
}

bootstrapApplication(App);

Я ожидаю, что элемент для отображения foo работает! bla, но он по-прежнему показывает, что значение по умолчанию foo работает!.
Я пробовал оба варианта:

Код: Выделить всё

e.name = 'bla';
e.setAttribute('name', 'bla');

но ни один из них не запускает обнаружение изменений Angular.
Вопрос:
Как правильно установить свойство @Input() для пользовательского элемента Angular, созданного с помощью @angular/elements, чтобы компонент обновлял свой шаблон при программном выполнении?
Stackblitz Demo>

Подробнее здесь: https://stackoverflow.com/questions/798 ... t-update-c