String replace in Angular

Question

I am using Angular 5 and I have the following JSON response from a Rest API call. I was able to get the value of the info key inside a variable in my component. I would like to use the HTML inside my view. However, since it's not a valid HTML, I would like to replace \" with " :

{
  "id": "1234",
  "body": {
  "content": {
    "info": "<p><div class=\"abc\">xyzdef</div><span class=\"egg\"></span></p>"
  }
}

How do I do that? Should I do it in html or typescript?

If you parsed the JSON correctly, there is no need to replace anything. — Henry
– Henry, Commented Oct 29, 2018 at 7:18
It's basically HTML. So, I want to embed it in the .html file inside a div — Jake
– Jake, Commented Oct 29, 2018 at 7:21
When you parse this JSON, the string value of the info property will be <p><div class="abc">xyzdef</div><span class="egg"></span></p>, ready to be put into HTML as it is. — Henry
– Henry, Commented Oct 29, 2018 at 7:32

Krishna Rathore · Accepted Answer · 2018-10-29 07:20:26Z

2

use .replace("'\'") for this.

"<p><div class=\"abc\">xyzdef</div><span class=\"egg\"></span></p>".replace("'\'")

answered Oct 29, 2018 at 7:20

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

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

Comments

SiddAjmera · Accepted Answer · 2018-10-29 07:30:18Z

1

Just use [innerHTML]:

<div [innerHTML]="res"></div>

In TypeScript Class:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ...
  res = "<p><div class=\"abc\">xyzdef</div><span class=\"egg\"></span></p>";
  ...
}

Here's a Sample StackBlitz for your ref.

answered Oct 29, 2018 at 7:30

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Comments

ashish pal · Accepted Answer · 2018-10-29 07:30:26Z

1

No need to replace anything it's working properly. component code is

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = "<p><div class=\"abc\">xyzdef</div><span class=\"egg\"></span></p>";
}

html code is

<div [innerHTML]="title"></div>

answered Oct 29, 2018 at 7:30

ashish pal

4774 silver badges10 bronze badges

Collectives™ on Stack Overflow

String replace in Angular

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related