Angular Elements – setting `@Input()` property programmatically doesn’t update component

Question

I’m experimenting with Angular Elements and trying to update an input property programmatically, not by writing it in HTML like <app-foo name="...">.

Here’s a minimal example:

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: `
    <h1>Hello from {{ name }}!</h1>
    <app-foo></app-foo>
  `,
  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);

I expect the <app-foo> element to display foo works! bla, but it still shows the default foo works!.

I’ve tried both:

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

but neither triggers Angular’s change detection.

Question: How can I properly set an @Input() property on an Angular custom element created with @angular/elements so the component updates its template when done programmatically?

Stackblitz Demo

I don't understand what you are trying to do. Normally with angular your tag would look like this: <app-foo [name]="'bla'"></app-foo>, to get you the same result, and no typescript or javascript needed. — Rick
– Rick, Commented Nov 1 at 1:56

Lowie Vhb · Accepted Answer · 2025-10-31 13:30:22Z

3

Just define the element and then you should/could wait a microtask so angular upgrades it before setting the input like this: Hope this works!

export class App {
  name = 'Angular';
  injector = inject(Injector);

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

    queueMicrotask(() => {
      const e = document.querySelector('app-foo') as HTMLElement;
      e.setAttribute('name', 'bla'); // trigger
    });
  }
}

answered Oct 31 at 13:30

Lowie Vhb

483 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Elements – setting `@Input()` property programmatically doesn’t update component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related