Angular WebComponent instances is getting created multiple times

Question

I have created a webcomponent using angularElements createElement. I am using this webcomponent in different angular application.

Whenever user moves to the view which has webcomponent an instance of the webomponent is created. But when user moves in and out of the view multiple times. Multiple instances of webcomponent is getting created. and the element is available in detachedNode.

This is creating unexpected behaviour such as apis are getting triggered multiple times equal to the count of the detached elements.

Is there any way we can remove/kill the instance of the webcomponent or any way to deregister custom elements.

Any help will be highly appreciated. Thanks

Naren Murali · Accepted Answer · 2024-12-16 10:42:04Z

2

As per the documentation:

Angular element overview

Custom elements bootstrap themselves - they start when they are added to the DOM, and are destroyed when removed from the DOM. Once a custom element is added to the DOM for any page, it looks and behaves like any other HTML element, and does not require any special knowledge of Angular terms or usage conventions.

The problem is your code is not unsubscribed on destroy of the component, try using unsubscribe or takeUntilDestroyed for all APIs in this component.

This also applies for setTimeout, setInterval these also should be cleared when component is destroyed.

Unsubscribe:

private sub: Subscription = new Subscription();

ngOnInit() {
  this.sub.add(this.someService.apiCall().subscribe());
}

ngOnDestroy() {
  this.sub.unsubscribe();
}

takeUntilDestroyed:

private destroyRef = inject(DestroyRef);

ngOnInit() {
  this.someService.apiCall().pipe(
    takeUntilDestroyed(this.destroyRef),
  ).subscribe();
}

answered Dec 16, 2024 at 10:42

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

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

1 Comment

Amit Dec 16, 2024 at 15:04

You are right. Actually we are using takeUntil in our application. What we found was that in ngOnDestroy we were missing emitting the value from notifier observable and was completing it. Emitting the notifier observable value fixed the issue. Thanks a lot. Really appreciate this. this.sub.next(null); this.sub.complete(); this.sub.unsubscribe();

Collectives™ on Stack Overflow

Angular WebComponent instances is getting created multiple times

1 Answer 1

Angular element overview

Unsubscribe:

takeUntilDestroyed:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Unsubscribe:

takeUntilDestroyed:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related