2

I've created my own webcomponent based on angular elements. I made everything according to manual.

The sample code is:

    const el = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('my-widget', el);

I have ApplicationService as well:

@Injectable({ providedIn: 'root' })
export class ApplicationService {}

After all when I run my pretty 'my-widget' element - 1 instance works well. But if I run twice it looks like the ApplicationService always run only once (singleton instance).

Example:

<my-widget id="widget1"></my-widget>
<my-widget id="widget2"></my-widget>

I want to achieve that every will have the own instance. I was looking for solution and I noticed that config has additional field like: strategyFactory in createCustomElement

{ injector: Injector; strategyFactory?: NgElementStrategyFactory; }

I am not sure how to use it. Have you any ideas?

Oregon
  • 21
  • 1

1 Answers1

1

Dont' use { providedIn: 'root' }, this registers the service as a singleton at app level. If you need new instance for each component, use the providers[] of component.

@Component({
  selector: 'my-widget',
  providers: [ApplicationService]
})
export class MyWidgetComponent
Ashish Dahiya
  • 650
  • 5
  • 14
  • I had tried too, but in this service I need to use HttpClient and I have http interceptors which are configured in App Module and is using that service `ApplicationService` In that case Interceptor does not see one... of course it is good point but there is more requirements to fulfill – Oregon Jul 02 '21 at 21:20