Search code examples
spartacus-storefront

Obtaining cms component data inside slot


We are trying to style an existing slot (SiteLinks) that contain a number of CMSLinkComponents. We are failing to obtain the full data of the components, because we are only receive the uid and typeCode when we use let-[var] syntax on the ng-template.

Are there example of how to access the full data for these components, without requesting them separately based on the uid?

<ng-template cxOutletRef="SiteLinks" let-data>
  <pre>{{ data.components$ | async | json }}</pre>
</ng-template>

Solution

  • The context model depends on where outlets are used. In your case context is a Slot model, and on this level of hierarchy you have only list of components and not their data, because data you should get separately.

    I believe, this approach will work:

    <ng-template cxOutletRef="SiteLinks" let-slot>
      <ng-container *ngFor="let component of (slot.components$ | async)">
        <ng-container [cxComponentWrapper]="component"></ng-container>
      </ng-container>
    </ng-template>
    

    cxComponentWrapper also can be helpful in cases when you need handle nested components.