CODEWITHSUNDEEP
angulartypescriptfunction
Unknown Coder
Unknown Coder

Reputation: 1738

Better way of calling function in HTML angular

I'm using Angular-10 and created one shared function as below (inside dom.ts file):

export function toSafeHtml(value) : any {
  return new DOMParser().parseFromString(value, "text/html").documentElement.textContent;
}

And I want to call this wherever I have a [innerHtml] attributes. For example :

<div style="margin: 0 auto;">
    <mat-spinner></mat-spinner>
    <div [innerHtml]="toSafeHtml(loaderTitle)"></div>
</div>

How to do this? Is there any better way to call the shared function directly in DOM?

Upvotes: 0

Views: 4795

Answers (4)

N.F.
N.F.

Reputation: 4182

Another solution is to create a pipe.

safe-html.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {

  constructor() {}
  transform(value: any) {
    return new DOMParser().parseFromString(value, 'text/html').documentElement.textContent;
  }
}

html

<div style="margin: 0 auto;">
    <mat-spinner></mat-spinner>
    <div innerHtml="{{loaderTitle | safeHtml}}"></div>
</div>

Upvotes: 2

er-sho
er-sho

Reputation: 9771

You can do the one trick here, so you don't need to write your toSafeHtml function again and again,

First create one service like

import { Injectable } from "@angular/core";

@Injectable({
  providedIn: "root",
})
export class YourServiceName {

  toSafeHtml(value): any {
    return new DOMParser().parseFromString(value, "text/html").documentElement.textContent;
  }
}

Then you have to add dependency in constructor of your component where you need to use above function

constructor(public yourServiceName: YourServiceName) {  
}

And then you can use it in you template like

<div [innerHtml]="yourServiceName.toSafeHtml(loaderTitle)"></div>

Edit 1:

I don't want repeat the same for each and every component

You can also create a attribute directive to achieve your goal

import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[appHtmlParser]'
})
export class HtmlParserDirective implements OnInit {

   @Input('html') html: any;
 
   constructor(private el: ElementRef) {    
   }

   ngOnInit(): void {
    this.el.nativeElement.textContent = this.toSafeHtml(this.html);
   }

   toSafeHtml(value): any {
        return new DOMParser().parseFromString(value, "text/html").documentElement.textContent;
   }
}

And then you can use it in your template like

<div appHtmlParser [html]="loaderTitle"></div>

Stackblitz Demo

Upvotes: 0

Sanka Sanjeeva
Sanka Sanjeeva

Reputation: 3520

Can you check whether it is helpful?.

import { Component } from '@angular/core';

import * as fun from './function';

@Component({
  selector: 'my-app',
  template: `<p [innerHTML]="myFun.toSafeHtml(loaderTitle)"></p>`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  myFun = fun;
  loaderTitle = 'my-text'

  constructor() {
  }
}

and the function.ts in the same directory

export function toSafeHtml(value) : any {
  return new DOMParser().parseFromString(value, "text/html").documentElement.textContent;
}

Upvotes: 1

N.F.
N.F.

Reputation: 4182

You have to write wrapper method in your component ts file.

your.component.ts

wrapperToSafeHtml(value) {
  return toSafeHtml(value);
}

your.component.html

<div style="margin: 0 auto;">
    <mat-spinner></mat-spinner>
    <div [innerHtml]="wrapperToSafeHtml(loaderTitle)"></div>
</div>

Upvotes: 0

Related Questions