CODEWITHSUNDEEP
spartacus-storefront
pemko
pemko

Reputation: 129

Add DIV Element to Layout of the Header

Having a problem, that I need to add a Element to the NavigationBar in the Header for styling purposes

Code of the problem

I would need to have

<header>
    <cx-pagelayout>
        <div>
            <cx-pageslot>

The only option I see is to overwrite the storefront component but i would like to not overwrite a main component. Is there any other option that I not see?

Upvotes: 0

Views: 290

Answers (1)

L Tiger
L Tiger

Reputation: 581

I can see two ways of going about it.

  • Like you mentioned you could create your own storefront component and create a header with the DOM you want there.

  • You can use the outlets mechanism to replace the header with your custom component. This would look something like this:

<ng-template cxOutletRef="cx-header">
  <custom-header></custom-header>
</ng-template>

or use the provideOutlet provider in your custom header's module like so:

  providers: [
    provideOutlet({
      id: 'cx-header',
      position: OutletPosition.REPLACE,
      component: CustomHeaderComponent,
    }),
  ],

In the above example, custom-header (CustomHeaderComponent) is your header component. Also note, you need to import the OutletRefModule in your module.

Note, if you use the HTML method: to override the header outlet, you need to put your OutletRef in the app.component.html

Upvotes: 2

Related Questions