SAP Spartacus Storefront page CX-Page-Layout assignment logic

Header, navigation, and footer:

The slots for each section are defined in the layout-config.ts file:

Output printed at runtime:

Cx – page – Storefront.com ponent. HTML layout design time:

Callstack at runtime:

This section has the @input annotation:

Decorator that marks a class field as an input property and supplies configuration metadata. The input property is bound to a DOM property in the template. During change detection, Angular automatically updates the data property with the DOM property’s value.

The input Property is bound to the DOM Property, whose value comes from the corresponding attribute of the DOM element.

The BehaviorSubject of section$is a BehaviorSubject that passes the value of the section to another subscriber through the next function:

More of Jerry’s original articles can be found in “Wang Zixi” :