Dynamically insert an element using RouterLink

Question

Dynamically insert an element using RouterLink

In my Angular component, I have successfully added an anchor element like this:

<a [routerLink]="['/LoggedIn/Profile']">Static Link</a>

Clicking the link navigates to the desired component without any issues.

Now, I want to incorporate a similar dynamic link. Within my app, there is a "notification component" dedicated to displaying notifications.

The notification component looks something like this:

<div [innerHTML]="notification.content"></div>

Here, notification.content is a public string variable within the NotificationComponent class that holds the HTML content to be displayed.

The notification.content can include:

<div>Click on this <a [routerLink]="['/LoggedIn/Profile']">Dynamic Link</a> please</div>

While the dynamic link appears correctly on the screen, it does not function when clicked.

Is there a way to make the Angular router work with dynamically generated links like this?

PS: I am aware of DynamicComponentLoader, but I require a more flexible solution where various types of HTML content, including different kinds of links, can be sent to my notification component.

javascript typescript angular angular2-routing

Answer 1

Answer №1

It is not possible to add routerLink after the content has been rendered, but you can still achieve the desired outcome:

Create an anchor with dynamic data and assign it a class:

`<a class="routerlink" href="${someDynamicUrl}">${someDynamicValue}</a>`

Implement a HostListener in app.component that listens for clicks and uses the router for navigation

@HostListener('document:click', ['$event'])
public handleClick(event: Event): void {
 if (event.target instanceof HTMLAnchorElement) {
   const element = event.target as HTMLAnchorElement;
   if (element.className === 'routerlink') {
     event.preventDefault();
     const route = element?.getAttribute('href');
     if (route) {
       this.router.navigate([`/${route}`]);
     }
   }
 }
}

Answer 2

It is not possible to add routerLink after the content has been rendered, but you can still achieve the desired outcome:

Create an anchor with dynamic data and assign it a class:

`<a class="routerlink" href="${someDynamicUrl}">${someDynamicValue}</a>`

Implement a HostListener in app.component that listens for clicks and uses the router for navigation

@HostListener('document:click', ['$event'])
public handleClick(event: Event): void {
 if (event.target instanceof HTMLAnchorElement) {
   const element = event.target as HTMLAnchorElement;
   if (element.className === 'routerlink') {
     event.preventDefault();
     const route = element?.getAttribute('href');
     if (route) {
       this.router.navigate([`/${route}`]);
     }
   }
 }
}

Answer 3

Answer №2

routerLink is considered a directive. When working with Angular, directives and Components are not designed for HTML content that is injected using [innerHTML]. This means that the added HTML will not be processed by Angular in any way.

The recommended approach is to avoid using [innerHTML] altogether, and instead utilize ~~DynamicComponentLoader~~ViewContainerRef.createComponent. This method involves wrapping the HTML within a component and dynamically adding it to the view.

For an illustration of this concept, you can refer to Angular 2 dynamic tabs with user-click chosen components.

Answer 4

routerLink is considered a directive. When working with Angular, directives and Components are not designed for HTML content that is injected using [innerHTML]. This means that the added HTML will not be processed by Angular in any way.

The recommended approach is to avoid using [innerHTML] altogether, and instead utilize ~~DynamicComponentLoader~~ViewContainerRef.createComponent. This method involves wrapping the HTML within a component and dynamically adding it to the view.

For an illustration of this concept, you can refer to Angular 2 dynamic tabs with user-click chosen components.

Answer 5

Answer №3

Starting from angular 9, AOT has become the default and recommended way to compile angular projects. Unlike JIT, AOT does not maintain a compiler instance at runtime, making it impossible to dynamically compile angular code. While it is possible to disable AOT in angular 9, it is not advisable as it will result in a larger bundle size and slower application performance.

To address this issue, I implement a solution by adding a click listener at runtime using the renderer API, preventing the default behavior of URLs and invoking the angular router.

import { Directive, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { Router } from '@angular/router';

@Directive({
  selector: '[hrefToRouterLink]'
})
export class HrefToRouterLinkDirective implements OnInit, OnDestroy {
  private _listeners: { destroy: () => void }[] = [];

  constructor(private _router: Router, 
  private _el: ElementRef, 
  private _renderer: Renderer2) {
  }

  ngOnInit() {
    // TODO how to guarantee this directive running after all other directives without setTimeout?
    setTimeout(() => {
      const links = this._el.nativeElement.querySelectorAll('a');
      links.forEach(link => {
        this._renderer.setAttribute(link, 'routerLink', link?.getAttribute('href'));
        const destroyListener = this._renderer.listen(link, 'click',
          (event) => {
            event.preventDefault();
            event.stopPropagation();
            this._router.navigateByUrl(link?.getAttribute('href'));
          });
        this._listeners.push({ destroy: destroyListener });
      });
    }, 0);
  }

  ngOnDestroy(): void {
    this._listeners?.forEach(listener => listener.destroy());
    this._listeners = null;
  }

}

You can view an example here : https://stackblitz.com/edit/angular-dynamic-routerlink-2

The method described above works for both JIT & AOT compilation. However, if you are still utilizing JIT and need to dynamically compile components (which may help resolve other issues), you can find an example here: https://stackblitz.com/edit/angular-dynamic-routerlink-1

References used :

Answer 6

Starting from angular 9, AOT has become the default and recommended way to compile angular projects. Unlike JIT, AOT does not maintain a compiler instance at runtime, making it impossible to dynamically compile angular code. While it is possible to disable AOT in angular 9, it is not advisable as it will result in a larger bundle size and slower application performance.

To address this issue, I implement a solution by adding a click listener at runtime using the renderer API, preventing the default behavior of URLs and invoking the angular router.

import { Directive, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { Router } from '@angular/router';

@Directive({
  selector: '[hrefToRouterLink]'
})
export class HrefToRouterLinkDirective implements OnInit, OnDestroy {
  private _listeners: { destroy: () => void }[] = [];

  constructor(private _router: Router, 
  private _el: ElementRef, 
  private _renderer: Renderer2) {
  }

  ngOnInit() {
    // TODO how to guarantee this directive running after all other directives without setTimeout?
    setTimeout(() => {
      const links = this._el.nativeElement.querySelectorAll('a');
      links.forEach(link => {
        this._renderer.setAttribute(link, 'routerLink', link?.getAttribute('href'));
        const destroyListener = this._renderer.listen(link, 'click',
          (event) => {
            event.preventDefault();
            event.stopPropagation();
            this._router.navigateByUrl(link?.getAttribute('href'));
          });
        this._listeners.push({ destroy: destroyListener });
      });
    }, 0);
  }

  ngOnDestroy(): void {
    this._listeners?.forEach(listener => listener.destroy());
    this._listeners = null;
  }

}

You can view an example here : https://stackblitz.com/edit/angular-dynamic-routerlink-2

The method described above works for both JIT & AOT compilation. However, if you are still utilizing JIT and need to dynamically compile components (which may help resolve other issues), you can find an example here: https://stackblitz.com/edit/angular-dynamic-routerlink-1

References used :

Answer 7

Answer №4

After considering various answers, I decided to create a Directive for targeting specific elements that are being innerHTML'd in Angular. I wanted to avoid using querySelector and similar methods to keep everything Angulary.

One issue I encountered with the previous approaches was that if the href is a full URL (e.g., https://www.example.com/abc), navigating to /https would occur when feeding the whole URL to the router.

I also needed to implement checks to ensure that only hrefs within our domain were routed.

@Directive({
  selector: '[hrefToRouterLink]'
})
export class HrefToRouterLinkDirective {
  constructor(private _router: Router){}

  private _baseHref = quotemeta(environment.root_url.replace(`^https?://`, ''));
  private _hrefRe: RegExp = new RegExp(`^(https?:)?(\\/+)?(www\\.)?${this._baseHref}`, `i`);

  @HostListener('click', ['$event'])
  onClick(e) {
    // Is it a link?
    if (!(e.target instanceof HTMLAnchorElement)) 
      return;

    let href: string = e.target?.getAttribute('href')
      .replace(/(^\s+|\s+$)/gs, '');

    // Is this a URL in our site?
    if (!this._hrefRe.test(href))
      return;
      
    // If we're here, it's a link to our site, stop normal navigation
    e.preventDefault();
    e.stopPropagation();

    // Feed the router.
    this._router.navigateByUrl(
      href.replace(this._hrefRe, '')
    );
  }
}

The use of environment.root_url in the code above specifies our base domain, and quotemeta serves as an implementation of a Perl-esque quotemeta function for escaping special characters.

Your mileage may vary, and there could be some edge cases I've overlooked, but so far, this solution appears to be functioning effectively.

Answer 8

After considering various answers, I decided to create a Directive for targeting specific elements that are being innerHTML'd in Angular. I wanted to avoid using querySelector and similar methods to keep everything Angulary.

One issue I encountered with the previous approaches was that if the href is a full URL (e.g., https://www.example.com/abc), navigating to /https would occur when feeding the whole URL to the router.

I also needed to implement checks to ensure that only hrefs within our domain were routed.

@Directive({
  selector: '[hrefToRouterLink]'
})
export class HrefToRouterLinkDirective {
  constructor(private _router: Router){}

  private _baseHref = quotemeta(environment.root_url.replace(`^https?://`, ''));
  private _hrefRe: RegExp = new RegExp(`^(https?:)?(\\/+)?(www\\.)?${this._baseHref}`, `i`);

  @HostListener('click', ['$event'])
  onClick(e) {
    // Is it a link?
    if (!(e.target instanceof HTMLAnchorElement)) 
      return;

    let href: string = e.target?.getAttribute('href')
      .replace(/(^\s+|\s+$)/gs, '');

    // Is this a URL in our site?
    if (!this._hrefRe.test(href))
      return;
      
    // If we're here, it's a link to our site, stop normal navigation
    e.preventDefault();
    e.stopPropagation();

    // Feed the router.
    this._router.navigateByUrl(
      href.replace(this._hrefRe, '')
    );
  }
}

The use of environment.root_url in the code above specifies our base domain, and quotemeta serves as an implementation of a Perl-esque quotemeta function for escaping special characters.

Your mileage may vary, and there could be some edge cases I've overlooked, but so far, this solution appears to be functioning effectively.

Dynamically insert an element using RouterLink

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Bootstrap modal causes the scrollbar to vanish upon closure

Discovering the perfect CSS unit for this specific number

TypeORM findManyToOne queries results in excessive and redundant query execution

Using synthetic events in place of the values stored in useState

npm allows for multiple entry points for modules

How can I use Angular 6 to design an interactive user interface with drag-and-drop functionality?

Encountering a 400 BAD REQUEST error while attempting to make an AJAX post request in

Angular 2 doesn't reflect changes in component variables in the view until mouseover happens

Managing numerous inquiries from a single customer within a succession of brief intervals

What role does the sequence play in matrix transitions that involve rotating and translating simultaneously?

Jquery code failing to trigger any response

You can activate the ability to click on the main tag by setting routerlink as the child component in Vue

Choose the OK button on the modal during the testing phase

retrieve the name of the button that was clicked

Determine the timing and add it to an array

Activate the stripe button after successful bootstrap validation

Troubleshooting: Issue with JQuery click functionality within Django's AJAX implementation

Is requestAnimationFrame necessary for rendering in three.js?

Struggling with modifying class in HTML using JavaScript

Display SVG at full size without any distortion