Angular 17 user-layout.component.ts:70 ERROR Error: NG0100

I am trying to generate dynamically a sidebar using the template coreui with Angular 17.

The error ExpressionChangedAfterItHasBeenCheckedError:

ERROR NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'disabled'. Expression location: _SidebarNavLinkComponent component It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook? Find more at https://angular.io/errors/NG0100

at throwErrorIfNoChangesMode (core.mjs:11912:11)
at bindingUpdated (core.mjs:17587:17)
at ɵɵproperty (core.mjs:20396:9)
at SidebarNavLinkComponent_Template (coreui-angular.mjs:13043:14)
at executeTemplate (core.mjs:12263:9)
at refreshView (core.mjs:13490:13)
at detectChangesInView (core.mjs:13714:9)
at detectChangesInViewIfAttached (core.mjs:13677:5)
at detectChangesInComponent (core.mjs:13666:5)
at detectChangesInChildComponents (core.mjs:13727:9)
​

I'm trying to update the coreui sidebar dynamically.

Here is my view layout.component.html:

<!--sidebar-->
<c-sidebar #sidebar="cSidebar"
class="d-print-none sidebar sidebar-fixed"
id="sidebar"
visible>

<c-sidebar-brand [brandFull]="{
src: 'assets/img/brand/Success-logo.svg',
width: 200,
height: 46,
alt: 'Success sarl Logo'
}"
[brandNarrow]="{
src: 'assets/img/brand/coreui-signet-white.svg',
width: 46,
height: 46,
alt: 'Success sarl Logo'
}"
routerLink="./" />

<ng-scrollbar pointerEventsMethod="scrollbar">
<c-sidebar-nav [navItems]="navItems"
dropdownMode="close" />

</ng-scrollbar>


<c-sidebar-toggler *ngIf="!sidebar.narrow"
toggle="unfoldable"
cSidebarToggle="sidebar" />
</c-sidebar>

<!--main-->
<div class="wrapper d-flex flex-column min-vh-100 bg-light dark:bg-transparent">
<!--app-header-->
<app-default-header class="mb-4 d-print-none header header-sticky" position="sticky" sidebarId="sidebar" />
<!--app-body-->
<div class="body flex-grow-1 px-3">
<c-container breakpoint="lg" class="h-auto">
<router-outlet />
</c-container>
</div>
<!--app footer-->
<app-default-footer />
</div>


Here is my layout.component.ts:

export class UserLayoutComponent implements OnInit {
public navItem?: Observable<any>;
public navItems: any;
public userAuthenticated = false;
public showView: any;

constructor(private _authService: AuthService,
private _repository: RepositoryService,
private route: ActivatedRoute,
private _router: Router,
private sideBarGenerateService: SideBarGenerateService,
) {
this._authService.loginChanged.subscribe(userAuthenticated => {
this.userAuthenticated = userAuthenticated;
})
}

ngOnInit(): void {
this._authService.isAuthenticated().then(userAuthenticated => {
this.userAuthenticated = userAuthenticated;
});

this._authService.checkUserClaims(Constants.adminClaims).then( res => {
if (!res) {
let user = this._authService.getUserInfo();
this._repository.getData(`api/v1/UserHasContrat/users/${this.route.snapshot.queryParams['filter']}`).subscribe((response: ApiHttpResponse) => {
if (!(response.body?.every((elem: any) => (user.profile.sub).includes(elem?.userId)))) {
this._router.navigate(['/dashboard']);
}
});
}
});

setTimeout(() => {
this.navItems = this.sideBarGenerateService.getSideBar();
},0)
}
}


My service

getSideBar = () => {
//Get claims of user
this.userClaims = this._authService.getUserInfo()['profile']['role'];

return navItems.filter(this.isToBeDisplayed);
}

//Filter items to display
isToBeDisplayed = (value: any) => {
if (value.hasOwnProperty('children') && value.children.length > 0) {
value.children = value.children.filter((currentValue: any) => {
if (currentValue?.attributes) {
if ((currentValue.attributes['role'].every((elem: string) => this.userClaims.includes(elem)))) {
return currentValue;
}
}
})
return value;
}
else {
return value;
}
}


Please help me check out this code. Can't have a result without ExpressionChangedAfterItHasBeenCheckedError.

Continue reading...