The SAP Spartacus product details page displays custom data with an Outlet

Start by creating a new Angular Module and Component:

This new module, because it uses outlets, needs to import OutletRefModule from @Spartacus/ Storefront, and export our own implementation of MyOutletsComponent for consumption.

MyOutletsComponent implementation:

Inject currentProductService into the constructor and call getProduct to asynchronously read the current product property, which is stored in the product$property:

In the HTML of the Component, display the value of product$:

<ng-template cxOutletRef="ProductDetailsPageTemplate" cxOutletPos="before" let-model>
    <h1>Jerry</h1>
    <p>Product: {{ product$ | async | json }}</p>
</ng-template>

Finally, don’t forget to add the Component’s selector tag to the app Component’s HTML:

The final result:

For more of Jerry’s original articles, please follow the official account “Wang Zixi “: