Convert stored string that contain html tag into html text formatting

Question

I have an Angular project that stores data inside firebase. The data is stored as string (prdName: string;) inside the database. I want to ask if is it possible if i put a html tag inside the string like <b>this is text</b> and store it and then bind/view them as html text format? (the text become bold)

//service.ts
getData() {
  this.List = this.firebase.list('Product');
  return this.List;
}

insertProduct(Product: Product) {
  this.productList.push({
    prdName: Product.prdName,
    prdCategory: Product.prdCategory,
    prdSup: Product.prdSup,
    prdImage: Product.prdImage,
    prdDescription: Product.prdDescription
  });
}

//component.ts
ngOnInit() {
  var x = this.ListService.getData();
  x.snapshotChanges().subscribe(item => {
    this.List = [];
    item.forEach(element => {
      var y = element.payload.toJSON();
      y["$prdKey"] = element.key;
      this.List.push(y as List);
    });
  });
}

<!--component.html-->
<label>Product Name: </label> {{ListService.selectedProduct.prdName}}

Please let me know if more snippets are needed. Thank you very much in advance.

br.julien · Accepted Answer · 2017-12-18 09:48:32Z

1

You have to use innerHtml to bind html tags :

<div [innerHTML]="ListService.selectedProduct.prdName"></div>

Check this : https://angular.io/guide/template-syntax#!#property-binding-or-interpolation-

answered Dec 18, 2017 at 9:48

br.julien

3,4582 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kriss · Accepted Answer · 2017-12-18 09:56:45Z

1

I used such pipe in my project to make it work right

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

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}

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

then in the place where you want to have your html you simply do

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

pipe is needed to make this html content trusted, more information about this:

https://angular.io/guide/security#bypass-security-apis

edited Dec 18, 2017 at 9:56

answered Dec 18, 2017 at 9:50

kriss

1,02519 silver badges28 bronze badges

Collectives™ on Stack Overflow

Convert stored string that contain html tag into html text formatting

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related