Does OutletService support dynamically adding component in button handler

3
votes

i used this.outletService.add('BottomHeaderSlot', factory, OutletPosition.BEFORE); during the search button click handler to add a custom component in the BottomHeaderSlot. I intended to add searchOverlay under the header to add customized search behavior.
But my custom component is not shown under the header after calling outletService.add. I refered to this https://sap.github.io/cloud-commerce-spartacus-storefront-docs/outlets/ . Does outletService support dynamic adding component during runtime?

Following is my button handler 

  open(): void {
    const factory = this.componentFactoryResolver.resolveComponentFactory<SearchOverlayComponent>(SearchOverlayComponent);
    this.outletService.add('BottomHeaderSlot',  <any>factory, OutletPosition.BEFORE);
    this.cd.markForCheck();
1
spartacus-storefront

1 Answers

1
votes

That's a good question. At the moment it is a not a feature supported from our outlets.

A solution you could do is inject the component in a more static manner (either CMS or outlet when the app initializes like seen here https://github.com/SAP/cloud-commerce-spartacus-storefront/blob/develop/projects/storefrontlib/src/cms-components/asm/services/asm-enabler.service.ts)?

Your component could then be wrapped with an <ng-container *ngIf="open$ | async></ng-container> where open$ is an observable for the state of the search box. That way the component only appears in the dom when the searchbox is open.

The idea of dynamically adding a components through outlets is a good one we will keep in mind. I will open an issue on Github as an improvement.