Angular Element Component doesn't update when I add object from property

Question

I have Angular Element Component (with Angular 8) which has 2 props. When I try to push something in the array the Shadow-Root doesn't re-render it(the counter yes instead). How I can force the rendering when i push an object in the component?

Thanks

This is the Component class

export class CounterComponent implements OnInit {

  @Input()
  counter: number;

  @Input()
  images: Array<any>;

  constructor(private cdr: ChangeDetectorRef) { }

  ngOnInit() {
    this.counter = 0;
    this.images = [];
  }

  add() {
    this.counter++;
  }

  reduce() {
    this.counter--;
  }

  @Input()
  addImage() {
    this.images.push({ ciccio: 'piccio'}); //no rerender
    this.cdr.detectChanges(); // Error cdr is null
  }
}

AppModule

import { BrowserModule, platformBrowser } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';

import { CounterComponent } from './counter/counter.component';
import { createCustomElement } from '@angular/elements';

@NgModule({
  declarations: [
    CounterComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  entryComponents: [CounterComponent]
})
export class AppModule {

  constructor(private injector: Injector) {

  }

  ngDoBootstrap( ) {
    const el = createCustomElement(CounterComponent, {injector: this.injector});
    customElements.define('count-component', el);
  }
 }

This is the component template

<div style="display: flex;justify-content: center;flex-direction: column">
    <h1>Counter component</h1>
    <h4>Count ---> {{counter}}</h4>
    <button (click)="add()">Increase</button>
    <button (click)="reduce()">Decrease</button>
</div>

<h3>
Images {{images.length}}
</h3>

have created a demo( stackblitz.com/edit/angular-vrcsj4 ) based on your code. The ui seems to be rendering the changed array length on addition of new alements to array. Can you please explain a bit more about the issue that you are facing. — Siddhant Patra
– Siddhant Patra, Commented Sep 12, 2019 at 19:00
@SiddhantPatra your demo is irrelevant, he's using Angular Elements (@angular/elements) which works a little differently than "normal" Angular. — Amit Beckenstein
– Amit Beckenstein, Commented Sep 12, 2019 at 19:11
add your code to stackblitz , so that everybody can understand — Biswajit Nath
– Biswajit Nath, Commented Sep 12, 2019 at 19:18

Amit Beckenstein · Accepted Answer · 2019-09-12 19:25:59Z

1

According to "Angular Elements Overview" in Angular's documentation:

We are working on custom elements that can be used by web apps built on other frameworks. A minimal, self-contained version of the Angular framework will be injected as a service to support the component's change-detection and data-binding functionality. For more about the direction of development, check out this video presentation.

As said in 8:28 in the video presentation attached above, dependency injection works for custom elements in Angular Elements. Therefore, inject ChangeDetectorRef into your custom element and call detectChanges() when mutating your images array, like so:

export class CounterComponent /* ... */ {
    constructor(private cdr: ChangeDetectorRef) { }   
    /* ... */
    addImage() {
        this.images.push({ ciccio: 'piccio'});
        this.cdr.detectChanges(); // change detection will detect the change in `images` and render
    }
}

answered Sep 12, 2019 at 19:25

Amit Beckenstein

1,33013 silver badges22 bronze badges

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

2 Comments

Bonfry Over a year ago

i reiceve this error --> Cannot read property 'detectChanges' of undefined

Amit Beckenstein Over a year ago

@Bonfry Sounds like ChangeDetectorRef wasn't actually injected. Did you pass an Injector instance as an option when you called createCustomElement() to create your custom CounterComponent element?

Jason Goemaat · Accepted Answer · 2019-09-12 21:55:11Z

0

Try this, which will actually change the value of the images property on your component, allowing it to see the change:

  @Input()
  addImage() {
    this.images = [...this.images, { ciccio: 'piccio'}]; // should render
  }

Plunk: here

answered Sep 12, 2019 at 21:55

Jason Goemaat

29.3k15 gold badges89 silver badges119 bronze badges

1 Comment

Amit Beckenstein Over a year ago

This works due to Angular detecting the change of the images reference. Immutability definitely works best for change detection.

Siddharth Pal · Accepted Answer · 2019-09-12 18:39:32Z

0

  @Input()
  addImage() {
     this.ngZone.run(() => {
        this.images.push({ ciccio: 'piccio'}); //no rerender
     });
  }

Can you try injecting NgZone from @angular/core and run inside it?

answered Sep 12, 2019 at 18:39

Siddharth Pal

1,45811 silver badges24 bronze badges

2 Comments

Bonfry Over a year ago

angular elements doesn't inject ngZone in the componet

Siddharth Pal Over a year ago

sorry, I didn't get. Are you saying we can't inject ngZone in component?

Collectives™ on Stack Overflow

Angular Element Component doesn't update when I add object from property

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related