Override footer/header section

I was trying to modify footer section with outlets by defining:

<ng-container *ngIf="templateName$ | async">
        <ng-template *ngIf="true" cxOutletRef="footer">
        </ng-template>
</ng-container>

and footer section is not replaced. Is it possible to replace footer/header for specific templates? As a result of this code, templateName is properly resolved from PageLayoutService, but it replacing does not work. Also tried

<ng-container *ngIf="(templateName$ | async) === expectedTemplateName">
        <ng-template cxOutletRef="footer">
        </ng-template>
</ng-container>

but still no luck. Any hints? It would be great to modify/change header as well, Thanks!

Solution

There are various ways to customise the header/footer of a page:

Implement the customisation in the CMS, where you can setup different page templates for different pages, including an alternative header/footer. This approach would align best with how Spartacus is build, as the pages are data driven and component mapping is done in a generic way. You don't need to touch the spartacus code to get different headers and footers.
Use outlets as you tried already. The issue you're facing is that at the time that the page template is resolved, the footer is already rendered and the registered outlet will not make a difference. I can imagine this is a bit confusing in how outlets work. I've created a quick example on Stackblitz for a conditional footer using outlets.
Implement a custom root component (replacing cx-storefront) and implement the footer in a custom way. You can leverage the page-layout and page-slot component to render CMS content.

Hope that gives you and idea or two.

Here's a bit more info on page template driven classes for page specific styling. Given that the header/footer do not benefit from the page template based class (as it's only available inside the router outlet), you could implement this in your app, I've updated the Stackblitz example for you with an example.