Dynamic change/revert page title in Angular

Question

So I have managed to get the page location which i then paste in a h1 in my header component. I have also managed that when one hovers over the navigation items, the header h1 changes dynamically to the text that is being hovered:

Here comes my problem: on mouseout, that is when I am not hovering on a navigation item I need the title to revert back to the the page location that was initially rendered:

Example: I am at localhost:4200/about, the header shows "about"! I hover over a navigation item "contact", the header shows "contact", now when i move the mouse away from contact i need the header title back to location that is "about".

I have tried a solution with input, output and event emmiters passing the text between child and parent a lot of times, apart from that not ending up working, its seems to complication of a solution for something so small.

Below is my nav-component.html

<nav class="nav-menu {{ menuStatus }}" (click)="closeNav($event)">
    <ul>
        <li>
        	<a routerLink="/about" (mouseover)="getText($event)" (click)="closeNav($event)">about</a>
        </li>
        <li>
        	<a routerLink="/what-to-expect" (mouseover)="getText($event)" (click)="closeNav($event)">what to expect</a>
        </li>
        <li>
        	<a routerLink="/gallery" (mouseover)="getText($event)" (click)="closeNav($event)">gallery</a>
        </li>
        <li>
        	<a routerLink="/activities" (mouseover)="getText($event)" (click)="closeNav($event)">activities</a>
        </li>
        <li>
        	<a routerLink="/contact" (mouseover)="getText($event)" (click)="closeNav($event)">contact</a>
        </li>
    </ul>
</nav>

nav-component.ts

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

@Component({
    selector: 'app-nav',
    templateUrl: './nav.component.html',
    styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit {

    title: string;
    navClose: boolean;
    @Output() sendTitle = new EventEmitter < string > ();
    @Output() closingNav = new EventEmitter < string > ();
    @Input() menuStatus: string;

    constructor() {}

    ngOnInit() {}

    getText($event) {
        this.title = event.target.innerText;
        this.sendTitle.emit(this.title)
    }

    closeNav($event) {
        this.navClose = false;
        this.closingNav.emit(this.navClose);
    }
}

header-component.html

<header>
	<div class="header-left">
			<h1>{{pageTitle}}</h1>
	</div>
	<div class="header-right">
		<app-burger (opened)="burgerStatus($event)" [burgerClose]="navStatus"></app-burger>
	</div>
</header>
<app-nav  (sendTitle)="getTitle($event)" [menuStatus]="burger" (closingNav)="getNavStatus($event)"></app-nav>

header-component-ts

import { Component, OnInit } from '@angular/core';
import { BurgerComponent } from './burger/burger.component';
import { Location } from "@angular/common";
import { Router } from "@angular/router";

@Component({
  selector: 'app-header-component',
  templateUrl: './header-component.component.html',
  styleUrls: ['./header-component.component.scss']
})
export class HeaderComponentComponent implements OnInit {

  route: string;
  dynamicTitle: string;
  pageTitle: string;
  burger: string;
  navStatus: boolean;

  constructor(location: Location, router: Router) {
    router.events.subscribe(val => {
        this.pageTitle = location.path();
        this.pageTitle = this.pageTitle.substring(1);
    });
   }

  ngOnInit() {
  }

  getTitle($event) {
    this.dynamicTitle = $event;
  }

  burgerStatus($event) {
    this.burger = $event;
    console.log($event);
  }

  getNavStatus($event) {
    this.navStatus = $event;
    console.log($event);
  }
}

Your input is much appreciated!

Just a suggestion, creating stalkbiz example is really helpful for reviewer. They can do change their and update code. stackblitz.com — Harshad Vekariya
– Harshad Vekariya, Commented Jul 24, 2019 at 12:52

winiar · Accepted Answer · 2019-07-24 12:48:44Z

1

You can create property to store previously selected value ( in your example about when you mouseover on contact and then on mouseout assign it to current one

answered Jul 24, 2019 at 12:48

winiar

1741 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sameer · Accepted Answer · 2019-07-24 12:42:46Z

0

You can Use TitleService for change your title on redirecting to your defined route.

Here is example

export class AppComponent {
  public constructor(private titleService: Title ) { }

  public setTitle( newTitle: string) {
    this.titleService.setTitle( newTitle );
  }
}

answered Jul 24, 2019 at 12:42

Sameer

1291 silver badge9 bronze badges

1 Comment

felixo Over a year ago

This sounds like a good approach but I am only I beginner in Angular so I don't quite know how to go about that! Do you mind elaborating a bit?

Harshad Vekariya · Accepted Answer · 2019-07-24 12:49:54Z

0

Don't you think, you are setting wrong model when event emits.

 getTitle($event) {
      // this.dynamicTitle = $event;
      this.pageTitle = $event;
  }

answered Jul 24, 2019 at 12:49

Harshad Vekariya

1,0621 gold badge9 silver badges28 bronze badges

Collectives™ on Stack Overflow

Dynamic change/revert page title in Angular

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related