How to access the component instance in Angular through router events

Question

How to access the component instance in Angular through router events

I am currently working on incorporating a title service into my Angular 10 application. My goal is to subscribe to router events, access the activated route's component, check if it has a title() getter, and then use that information to set the page's title. It seems like a simple task...

This is the code snippet I have in place:

    this.router.events
      .pipe(
        filter((event) => event instanceof NavigationEnd),
        map(() => this.rootRoute(this.route)),
        filter((route: ActivatedRoute) => route.outlet === "primary"),
        filter(
          (route: ActivatedRoute) =>
            ComponentWithTitleBase.isPrototypeOf(route.component as any)
        ),
        map((route) => (route.component as unknown) as ComponentWithTitleBase),
        tap(console.dir)
      )
      .subscribe((comp: ComponentWithTitleBase) => {
        this.titleSvc.title = comp.title;
      });

However, I keep running into an issue where comp.title is always undefined, even though the component does include a get title() getter:

export class AboutComponent extends ComponentWithTitleBase implements OnInit {
  get title(): string {
    return "About the demo";
  }

  ...
}

When I look at the output from console.dir, I can see AboutComponent. Can anyone help me figure out what is going wrong here?

angular typescript angular-routing

Answer 1

Answer №1

According to the suggestion by @yurzui, one way to achieve this is by creating a directive:

custom-directive.component.ts

@Directive({
  selector: 'router-outlet'
})
export class CustomDirective {

  constructor(r: RouterOutlet, titleService: TitleService) {
    r.activateEvents.pipe(
      // takeUntil(r.destroyed),
    ).subscribe(compInstance => compInstance.title && titleService.setNewTitle(compInstance.title))
  }

  ngOnDestroy () {
    // destroyed.next;
    // destroyed.complete();
  }
}

title.service.ts

@Injectable({
  providedIn: 'root'
})
export class TitleService {

  private source = new Subject<string>();

  setNewTitle (t: string) {
    this.source.next(t);
  }

  constructor() { this.initializeSubscription() }

  private initializeSubscription () {
    this.src.pipe(
      /* ... */
    ).subscribe(title => {
      console.log('new title', title);
    })
  }
}

Check out ng-run demo.

Answer 2

According to the suggestion by @yurzui, one way to achieve this is by creating a directive:

custom-directive.component.ts

@Directive({
  selector: 'router-outlet'
})
export class CustomDirective {

  constructor(r: RouterOutlet, titleService: TitleService) {
    r.activateEvents.pipe(
      // takeUntil(r.destroyed),
    ).subscribe(compInstance => compInstance.title && titleService.setNewTitle(compInstance.title))
  }

  ngOnDestroy () {
    // destroyed.next;
    // destroyed.complete();
  }
}

title.service.ts

@Injectable({
  providedIn: 'root'
})
export class TitleService {

  private source = new Subject<string>();

  setNewTitle (t: string) {
    this.source.next(t);
  }

  constructor() { this.initializeSubscription() }

  private initializeSubscription () {
    this.src.pipe(
      /* ... */
    ).subscribe(title => {
      console.log('new title', title);
    })
  }
}

Check out ng-run demo.

Answer 3

Answer №2

There seems to be a slight misunderstanding here. When you use console.dir on the .component, you will not get an actual instance of AboutComponent, but rather its class. Therefore, if you want to access it as component.title, your getter should be static.

static get title(): string {
  return "About the demo";
}

Answer 4

There seems to be a slight misunderstanding here. When you use console.dir on the .component, you will not get an actual instance of AboutComponent, but rather its class. Therefore, if you want to access it as component.title, your getter should be static.

static get title(): string {
  return "About the demo";
}

Answer 5

Answer №3

Utilizing the @bespunky/angular-zen library enables you to achieve the following:

Incorporate the following code in the template containing the router outlet:

<router-outlet publishComponent></router-outlet>

Then, within the component requiring access to the instance:

import { Component     } from '@angular/core';
import { NavigationEnd } from '@angular/router';
import { RouteAware    } from '@bespunky/angular-zen/router-x';

@Component({
    selector   : 'app-demo',
    templateUrl: './demo.component.html',
    styleUrls  : ['./demo.component.css']
})
export class DemoComponent extends RouteAware
{
    protected onNavigationEnd(event: NavigationEnd): void
    {
        const currentInstance = this.componentBus.instance();

        console.log(`Navigation ended. Current component instance:`, currentInstance )
    }
}

This library is accessible as open-source and can be installed using the command below:

npm install @bespunky/angular-zen

For a more detailed demonstration, check out this live example.

💡 Should your router outlet have a specific name, you can specify it when using the instance() method to retrieve the relevant outlet's component.

Answer 6

Utilizing the @bespunky/angular-zen library enables you to achieve the following:

Incorporate the following code in the template containing the router outlet:

<router-outlet publishComponent></router-outlet>

Then, within the component requiring access to the instance:

import { Component     } from '@angular/core';
import { NavigationEnd } from '@angular/router';
import { RouteAware    } from '@bespunky/angular-zen/router-x';

@Component({
    selector   : 'app-demo',
    templateUrl: './demo.component.html',
    styleUrls  : ['./demo.component.css']
})
export class DemoComponent extends RouteAware
{
    protected onNavigationEnd(event: NavigationEnd): void
    {
        const currentInstance = this.componentBus.instance();

        console.log(`Navigation ended. Current component instance:`, currentInstance )
    }
}

This library is accessible as open-source and can be installed using the command below:

npm install @bespunky/angular-zen

For a more detailed demonstration, check out this live example.

💡 Should your router outlet have a specific name, you can specify it when using the instance() method to retrieve the relevant outlet's component.

How to access the component instance in Angular through router events

Answer №1

custom-directive.component.ts

title.service.ts

Answer №2

Answer №3

Similar questions

I am unable to utilize the outcome of a custom hook within a function or within an effect hook

Using TypeScript to define task invocation parameters with AWS CDK's CfnMaintenanceWindowTask

The property '.....' is missing an initializer and has not been explicitly assigned in the constructor

Guide to creating JSDoc for a TouchEvent handler

The Typescript compiler will continue to generate JavaScript code even if there are compilation errors

Verify an entry with exactly 7 numerical digits

What could be causing the issue of Vuejs 3.3 defineModel consistently returning undefined?

Encountering a problem during npm installation on Windows 10 while trying to install the Angular CLI globally using the

Leveraging typegoose in a multitenant environment within the nestjs framework

The message "The property 'layout' is not found on the type 'FC<WrapperProps>' in Next.js" is displayed

Transition from using ReactDOM.render in favor of asynchronous callback to utilize createRoot()

Efficient methods to transfer values or arrays between components in Angular 8 without relying on local storage

Using Jest and TypeScript to mock the return value of react-oidc-context

What strategies can be employed to manage developer data input into components using ESLint?

What is the process for obtaining an HTML form, running it through a Python script, and then showcasing it on the screen

What is the best way to implement multiple templates for a single component?

Having difficulty converting string columns/data to numerical values when exporting an Ag-Grid table to Excel with getDataAsExcel function

Encountering errors in Typescript build due to issues in the node_modules directory

The image will not appear until the Angular code has been recompiled or the server has been rebooted

Error in Django framework: Attempting to insert a null value in the "hardware_type" column violates the not-null constraint