What can be used instead of $sce in angular 7?

Question

We were using $sce in angular 1 to show html tags like this

> <p><strong>xyzz</strong> yttryrtyt <span
> style="color:#e74c3c">abc</span>.</p>

in user readable form. What is substitute for same in Angular 7. Can anybody answer this and how to use same in angular 7. After Searching on web i found DomSanitizer .. not able to get how to use it exactly.

check out [here](https://angular.io/api/platform-browser/DomSanitizer) — Julien METRAL, Apr 18 '19 at 12:52
@SachilaRanawaka I have to use this in many part of my projects.. so Is this good solution to use [innerHtml] everywhere. — Shilpi Jaiswal, Apr 18 '19 at 12:55

score 1 · Answer 1 · answered Apr 18 '19 at 13:02

You can create a pipe to check the dom sanitizer.

public myVal = "<p><strong>xyzz</strong> yttryrtyt <span> style="color:#e74c3c">abc</span>.</p>";

<div [innerHTML]="myVal | safeHtml"></div>

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustHtml(style); 
  }
}

score 0 · Accepted Answer · answered Apr 19 '19 at 10:28

After trying for long with different approaches Finally I got success by creating shared module(without shared module i was getting multiple errors every time)

1) I have created custom pipe sanitizeHtml under src/app/pipes/custom/sanitizeHtml.ts

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

@Pipe({
    name: 'sanitize',
})
export class SanitizeHtml implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}

    transform(v: string): SafeHtml {
        return this.sanitizer.bypassSecurityTrustHtml(v);
    }
}

2) Then created a shared module src/app/app.sharemodule.ts

import { CommonModule } from '@angular/common';
import { SanitizeHtml } from './pipes/custom/sanitizeHtml';
import { NgModule } from '@angular/core';

@NgModule({
    imports: [CommonModule],
    declarations: [SanitizeHtml],
    exports: [SanitizeHtml],
})
export class SharedModule {}

3) Then imported it in my lazy loaded module

import { SharedModule } from '../../app.sharemodule';
 imports: [
        CommonModule,
        SharedModule,
    ],

4)In html file used it as

[innerHTML]="rowData[col.field] | sanitize"

What can be used instead of $sce in angular 7?

2 Answers2