Spartacus 4.2 - Type '"before"' is not assignable to type 'OutletPosition' - spartacus-storefront

Question

While trying to customize the navigation slot, we are getting the error
Type '"before"' is not assignable to type 'OutletPosition'.
This is the code we are trying.
Also have tried
[cxOutletPos]=“outletPosition.BEFORE”
Documentation referred for Spartacus 4.2 :
https://sap.github.io/spartacus-docs/outlets/#template-driven-outlets
Result should be something like custom info, followed by navigation bar as shown below:
Also, as the above method didn't work I tried retrieving data through let-model for manipulation.
Array I want to retrieve data from into our component: CategoryNavigationComponent.
But using let-model and Printing model object I can see only "uid" , "typeCode" and "flexType" but not the navigatioNode and Children.
Is there any way to retrieve Navigation bar or Children array data on the screen?

Answer 1

****in TS File:****
settingsSubmenu: any = [];
constructor(public component: CmsComponentData<any> )
{
this.component.data$.forEach(element => {
element.navigationNode.children.forEach(child => {
this.settingsSubmenu.push(child)
});
});
}
**in HTML File**
<ng-container *ngFor="let menuItem of settingsSubmenu">
<a mat-menu-item >{{menuItem.title}}</a>
</ng-container>

Answer 2

If your questions is about Typescript error, then possible two solutions:
Modify tsconfig.json to ignore Typescript error:
{
...
"angularCompilerOptions": {
...
"strictTemplates": false
}
}
Modify your code to compile without errors:
In *.component.ts file add import:
import {OutletPosition} from '#spartacus/storefront';
and define variable:
outletPosition = OutletPosition;
In *.component.html file:
[cxOutletPos]="outletPosition.BEFORE"