Converting Angular 4 RouterLink within InnerHTML to lowercase

Question

Converting Angular 4 RouterLink within InnerHTML to lowercase

I am facing an issue with a command I have, where I retrieve content from the server that includes HTML and links. The problem arises when displaying this data as the links do not work. Upon inspecting the page source, I noticed that "routerLink" is being transformed into "router link," which may be why it's not functioning correctly. Below is the code snippet:

Here is my class, noting that routerLink is in camelcase here:

export class TwoComponent implements OnInit {
  data = '<a routerLink="/one">ONE</a>'; //this will actually come from backend server

  constructor() { }

  ngOnInit() {}
}

And my html:

<div [innerHTML]="data | bypassSecurity"></div>

Upon loading the page and viewing the source, the routerLink has now been converted to lowercase:

<a routerlink="/one">ONE</a>

Initially, I suspected the bypassSecurity pipe to be responsible but after checking its output, I observed that routerLink was still in camel case. It appears that the transformation happens elsewhere. Here is my bypassSecurity pipe for reference:

export class BypassSecurityPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) {}

  transform(value): any {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

If you have any insights on why and where this lowercase transformation occurs, your advice would be greatly appreciated :)

angular typescript

Answer 1

Answer №1

After consulting jcdsr's solution, I was able to make significant progress with my project. By incorporating DomSanitizer, everything fell into place.

Here is the step-by-step process I followed:

RouteTransformerDirective

import { Directive, ElementRef, HostListener } from '@angular/core';
import { Router } from '@angular/router';

@Directive({
  selector: '[routeTransformer]'
})
export class RouteTransformerDirective {

  constructor(private el: ElementRef, private router: Router) { }

  @HostListener('click', ['$event'])
  public onClick(event) {
    if (event.target.tagName === 'A') {
      this.router.navigate([event.target.getAttribute('href')]);
      event.preventDefault();
    } else {
      return;
    }
  }

};

Component

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

public html: SafeHtml;

constructor(private sanitizer: DomSanitizer) {
    this.html = sanitizer.bypassSecurityTrustHtml('<a href="/something">Link</a>');
}

Template

<div [innerHtml]="html" routeTransformer></div>

Answer 2

After consulting jcdsr's solution, I was able to make significant progress with my project. By incorporating DomSanitizer, everything fell into place.

Here is the step-by-step process I followed:

RouteTransformerDirective

import { Directive, ElementRef, HostListener } from '@angular/core';
import { Router } from '@angular/router';

@Directive({
  selector: '[routeTransformer]'
})
export class RouteTransformerDirective {

  constructor(private el: ElementRef, private router: Router) { }

  @HostListener('click', ['$event'])
  public onClick(event) {
    if (event.target.tagName === 'A') {
      this.router.navigate([event.target.getAttribute('href')]);
      event.preventDefault();
    } else {
      return;
    }
  }

};

Component

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

public html: SafeHtml;

constructor(private sanitizer: DomSanitizer) {
    this.html = sanitizer.bypassSecurityTrustHtml('<a href="/something">Link</a>');
}

Template

<div [innerHtml]="html" routeTransformer></div>

Answer 3

Answer №2

Here is a simple solution using only html5 attributes.

Within the template:

<div [innerHtml]="testHtml" (click)="getRoute($event)"></div>

In the component:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls:['./app.component.css'],
})

export class oneComponent implements OnInit {

    testHtml: any;

    constructor( private router: Router,) {}

    this.testHtml=`
    <br>
    ------- <span data-link="/page 1">Page 1</span> ------- 
    <br>
    ------- <a data-link="/page 2">Page 2</a> ------- 
    <br>
    text -- `;


    getRoute(event) {
        var goRoute = event.target.getAttribute('data-link')
        alert(goRoute);
        this.router.navigate([goRoute]);
    }
}

Alternatively, as a directive:

import { Directive, ElementRef, HostListener } from '@angular/core';
import { Router } from '@angular/router';

@Directive({     
    selector: '[routeDirective]'
})

export class routeDirective {

  constructor(private el: ElementRef, private router: Router) { }

    @HostListener('click', ['$event.target']) onClick($event){
        console.info('clicked: ' + $event.getAttribute('data-link'));
        var goRoute = $event.getAttribute('data-link');
        this.router.navigate([goRoute]);

    }
}

Using the directive in the template:

<div [innerHtml]="testHtml" routeDirective></div>

Drawbacks:

It's worth noting that search engines may not recognize "a tags" without attributes as links, affecting SEO performance.

Answer 4

Here is a simple solution using only html5 attributes.

Within the template:

<div [innerHtml]="testHtml" (click)="getRoute($event)"></div>

In the component:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls:['./app.component.css'],
})

export class oneComponent implements OnInit {

    testHtml: any;

    constructor( private router: Router,) {}

    this.testHtml=`
    <br>
    ------- <span data-link="/page 1">Page 1</span> ------- 
    <br>
    ------- <a data-link="/page 2">Page 2</a> ------- 
    <br>
    text -- `;


    getRoute(event) {
        var goRoute = event.target.getAttribute('data-link')
        alert(goRoute);
        this.router.navigate([goRoute]);
    }
}

Alternatively, as a directive:

import { Directive, ElementRef, HostListener } from '@angular/core';
import { Router } from '@angular/router';

@Directive({     
    selector: '[routeDirective]'
})

export class routeDirective {

  constructor(private el: ElementRef, private router: Router) { }

    @HostListener('click', ['$event.target']) onClick($event){
        console.info('clicked: ' + $event.getAttribute('data-link'));
        var goRoute = $event.getAttribute('data-link');
        this.router.navigate([goRoute]);

    }
}

Using the directive in the template:

<div [innerHtml]="testHtml" routeDirective></div>

Drawbacks:

It's worth noting that search engines may not recognize "a tags" without attributes as links, affecting SEO performance.

Answer 5

Answer №3

Here's a simple solution for adding routes to anchor tags:

In your TypeScript file (.ts)

let baseUrl = 'http://localhost/'
let body = `<a href="http://localhost/discussion/details/">route detail</a> and 2nd <a href="http://localhost/discussion/list">route list</a>`
body = body.replace(/href/g, "value");
body = body.replace(new RegExp(baseUrl, 'g'), "");

In your HTML file (.html)

<div (click)='changeRoute($event)' [innerHTML]="body"></div>

In your TypeScript file after the click event

changeRoute(value){
  let myRoute=value.target.attributes.value.value;
  this.router.navigate([myRoute]);
 }

This method will navigate without refreshing the entire page.

Answer 6

Here's a simple solution for adding routes to anchor tags:

In your TypeScript file (.ts)

let baseUrl = 'http://localhost/'
let body = `<a href="http://localhost/discussion/details/">route detail</a> and 2nd <a href="http://localhost/discussion/list">route list</a>`
body = body.replace(/href/g, "value");
body = body.replace(new RegExp(baseUrl, 'g'), "");

In your HTML file (.html)

<div (click)='changeRoute($event)' [innerHTML]="body"></div>

In your TypeScript file after the click event

changeRoute(value){
  let myRoute=value.target.attributes.value.value;
  this.router.navigate([myRoute]);
 }

This method will navigate without refreshing the entire page.

Answer 7

Answer №4

Have you experimented with alternative routerLink syntax to observe any variations in behavior?

<a [routerLink]="javascript code that produces a string or an array"> </a>

rather than using

<a routerlink="/one">ONE</a>

Answer 8

Have you experimented with alternative routerLink syntax to observe any variations in behavior?

<a [routerLink]="javascript code that produces a string or an array"> </a>

rather than using

<a routerlink="/one">ONE</a>

Answer 9

Answer №5

I came across a clever solution for incorporating the routerLink attribute within the innerHTML in Angular Elements:

Install Custom Elements ng add @angular/elements
Create Component as desired with an input for "href"
Utilize it in the template like so:

<a [routerLink]="href"><ng-content></ng-content></a>

Declare Custom Element within the chosen Component where you intend to include the routerLink in the innerHTML
In the innerHTML string, replace the <a> tag with your custom element like this

<your-custom-element href="/your/link">THE LINK TITLE</your-custom-element>

This method provides full control over the router link while still using innerHTML with content sourced externally (and considered trustworthy).

Answer 10

I came across a clever solution for incorporating the routerLink attribute within the innerHTML in Angular Elements:

Install Custom Elements ng add @angular/elements
Create Component as desired with an input for "href"
Utilize it in the template like so:

<a [routerLink]="href"><ng-content></ng-content></a>

Declare Custom Element within the chosen Component where you intend to include the routerLink in the innerHTML
In the innerHTML string, replace the <a> tag with your custom element like this

<your-custom-element href="/your/link">THE LINK TITLE</your-custom-element>

This method provides full control over the router link while still using innerHTML with content sourced externally (and considered trustworthy).

Answer 11

Answer №6

I'm not exactly sure what your goal is here, but it's recommended not to fetch the entire code snippet from the backend. Instead, simply retrieve the value 'one' and utilize interpolation on the client side to create

<a routerLink="/one">ONE</a>

:

Within the template:

<a routerLink="value">{{value}}</a>

Answer 12

I'm not exactly sure what your goal is here, but it's recommended not to fetch the entire code snippet from the backend. Instead, simply retrieve the value 'one' and utilize interpolation on the client side to create

<a routerLink="/one">ONE</a>

:

Within the template:

<a routerLink="value">{{value}}</a>

Answer 13

Answer №7

It is recommended to send back

<a href="/one">ONE</a>

rather than

<a routerLink="/one">ONE</a>

from the server.

I tested this approach and confirmed its effectiveness.

Answer 14

It is recommended to send back

<a href="/one">ONE</a>

rather than

<a routerLink="/one">ONE</a>

from the server.

I tested this approach and confirmed its effectiveness.

Converting Angular 4 RouterLink within InnerHTML to lowercase

Answer №1

RouteTransformerDirective

Component

Template

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Incorporating information into Observable in Angular 2

Getting a 404 error despite the status code being properly set to 200 in the response

Is it true that NativeScript with Angular2's UI does not provide mobile client support?

How does the use of nodejs, a server-side scripting language, tie into ReactJs or other front-end languages?

Is it necessary to unsubscribe from multiple switchmaps?

Challenges in transmitting values from Angular to NodeJS

Is it possible to eliminate auxiliary routes in Angular 4?

Angular: efficient exchange of information among components

Stop allowing the entry of zero after a minus sign

What sets apart a class from a service in NativeScript?

Mastering the utilization of custom input events in PrimeNG with Angular

The CORS policy has blocked access to 'http://localhost:8080/BeginSignup' from 'http://localhost:4200'

What is the best way to transform this Ajax query into an HTTP client request in Angular 8?

Trouble with storing data in Angular Reactive Form

"Encountered an issue while attempting to access the 'visit' property of an undefined entity

The clash between a static property name type and a dynamic property name on an interface is causing

Transform a string with delimiter into a JSON object containing key-value pairs extracted from the string

What is the best way to incorporate master/detail components without relying on hierarchical routes?

How to effectively handle null values using try..catch statement in typescript

Error: The method map is not a valid function for the HTTP GET operation