Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

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?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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}}


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(