Angular Page Title Being set and Overriden by theme mode switcher component.
I cannot set pageTitle on my routes for Angular if its not in my sidebar menu.
For Example I have this Component:
import { Component, OnInit } from '@angular/core';
import { AuthService, UserType } from '../../auth';
import { Observable } from 'rxjs';
import { PageInfoService } from 'src/app/_metronic/layout/core/page-info.service';
@Component({
selector: 'app-overview',
templateUrl: './overview.component.html',
})
export class OverviewComponent implements OnInit {
constructor(
private auth: AuthService,
private pageInfo: PageInfoService,
) {}
user$: Observable<UserType>;
ngOnInit(): void {
this.user$ = this.auth.currentUserSubject.asObservable();
this.pageInfo.setTitle('Overview');
}
}
But Overview gets inmidiately overriden by the theme switcher component to whatever theme mode its on "Dark", "Light", Or System.
Here is the file causing the title to not display correctly:
<!-- begin::Menu toggle -->
<div class="btn btn-icon" [ngClass]="toggleBtnClass" data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
<ng-container *ngIf="mode$ | async as mode">
<ng-container *ngIf="mode === 'dark'">
<app-keenicon name="moon" class="fs-2 fs-lg-1 theme-light-hide" [ngClass]="toggleBtnIconClass"></app-keenicon>
</ng-container>
<ng-container *ngIf="mode === 'light'">
<app-keenicon name="night-day" class="fs-2 fs-lg-1 theme-dark-hide" [ngClass]="toggleBtnIconClass"></app-keenicon>
</ng-container>
</ng-container>
</div>
<!-- end::Menu toggle -->
<!-- begin::Menu -->
<div
class='menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-muted menu-active-bg menu-state-primary fw-semibold py-4 fs-base w-175px'
data-kt-menu='true'>
<ng-container *ngIf="menuMode$ | async as menuMode">
<!-- begin::Menu item -->
<div class='menu-item px-3 my-0'>
<a class="menu-link px-3 py-2" [ngClass]="{'active': menuMode === 'light'}" (click)="switchMode('light')">
<span class='menu-icon' data-kt-element='icon'>
<app-keenicon name="night-day" class="fs-3"></app-keenicon>
</span>
<span class='menu-title'>Light</span>
</a>
</div>
<!-- end::Menu item -->
<!-- begin::Menu item -->
<div class='menu-item px-3 my-0'>
<a class="menu-link px-3 py-2" [ngClass]="{'active': menuMode === 'dark'}" (click)="switchMode('dark')">
<span class='menu-icon' data-kt-element='icon'>
<app-keenicon name="moon" class="fs-3"></app-keenicon>
</span>
<span class='menu-title'>Dark</span>
</a>
</div>
<!-- end::Menu item -->
<!-- begin::Menu item -->
<div class='menu-item px-3 my-0'>
<a class="menu-link px-3 py-2" [ngClass]="{'active': menuMode === 'system'}" (click)="switchMode('system')">
<span class='menu-icon' data-kt-element='icon'>
<app-keenicon name="screen" class="fs-3"></app-keenicon>
</span>
<span class='menu-title'>System</span>
</a>
</div>
<!-- end::Menu item -->
</ng-container>
</div>
<!-- end::Menu -->
How do I fix this?
Replies (2)
Hi Kenneth Flores
Sorry for the delay. Try adding ChangeDetectorRef to your component and calling cdr.detectChanges() after setting the page title. Here is an updated version of your component:
import { Component, OnInit } from "@angular/core";
import { AuthService, UserType } from "../../auth";
import { Observable } from "rxjs";
import { PageInfoService } from "src/app/_metronic/layout/core/page-info.service";
import { ChangeDetectorRef } from "@angular/core";
@Component({
selector: "app-overview",
templateUrl: "./overview.component.html",
})
export class OverviewComponent implements OnInit {
constructor(
private auth: AuthService,
private pageInfo: PageInfoService,
private cdr: ChangeDetectorRef
) {}
user$: Observable<UserType>;
ngOnInit(): void {
this.user$ = this.auth.currentUserSubject.asObservable();
this.pageInfo.setTitle("Overview");
this.cdr.detectChanges();
}
}Adding ChangeDetectorRef and calling cdr.detectChanges() should help that the page title is updated correctly.
Also note .updateTitle('Overview') only works when directly navigation to it from the browser. If you navigate through app it stays and keeps the title at {{Theme switcher mode}}
