pass html with styles from controller to view in angular4

Question

I have a dialog in whose content i am passing data from a factory Html of dailog is as follows:

<mat-dialog-content>
            <div [innerHTML]="data.message"></div>

</mat-dialog-content>

I have passed my data as shown below:

 const message = `<div style="display:inline">
 <div style="float:left ; width: 70%">I love angular</div>
 <div style="float:right ; width: 30%">
 <img src="../../../assets/images/angular.jpg" /></div>
 </div>`;

I am getting html rendered correctly but without styles. I want to reduce the size of image but when i get output i don't styles in dom. Where am i going wrong?

score 1 · Answer 1 · answered Feb 21 '18 at 11:20

1

You need to use this one of this down there

[ngStyle]="{'display': 'inline'}"

or

 [style.display]="'inline'"

to get things done

answered Feb 21 '18 at 11:20

Kraken

1,905
12
22

score 1 · Accepted Answer · answered Feb 21 '18 at 11:26

I believe that Angular sanitizes the HTML that you pass from the controller, so it does not add the styles in your .ts file. To avoid this, you can add the DomSantizer service in your constructor

private sanitizer:DomSanitizer

and use it to sanitize your HTML like so

return this.sanitizer.bypassSecurityTrustHtml(message);

Or, by creating a pipe

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

  transform(style) {
    return this.sanitizer.bypassSecurityTrustHtml(style);
    //return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

and then just use

<div [innerHTML]="data.message | safeHtml">

See Docs here: https://angular.io/api/platform-browser/DomSanitizer

And reference from here: https://stackoverflow.com/a/41089093/7435344

Swanand Taware · Answer 3 · 2018-02-21T12:30:16.077

For security reason, Angular prevents attackers from injecting malicious client-side scripts into web pages.

For Bypassing Angular protection

Some applications genuinely need to include executable script or styles. In such cases, you disable Angular’s built-in sanitization. To do that we create a pipe and inject DomSanitizer service to the constructor of the pipe and call one of the following methods depending upon the context to mark the value safe.

bypassSecurityTrustHtml
bypassSecurityTrustScript
bypassSecurityTrustStyle
bypassSecurityTrustUrl
bypassSecurityTrustResourceUrl.

You need to create Pipe for it below are the code for same: htmlParse.ts:

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

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}

 public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
            case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
            case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
            case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
            case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
            case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
            default: throw new Error(`Invalid safe type specified: ${type}`);
        }
  }
}

then you need to declare it in your module.ts file:

import { SafePipe } from '../pipes/htmlparse';

@NgModule({
  declarations: [
    AppComponent,
    SafePipe
  ],
  imports: [
    BrowserModule,
    HttpModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

and then you can use pipe with your innerHtml attribute:

<div [innerHTML]="data.message | safe:'html'"></div>

pass html with styles from controller to view in angular4

3 Answers3