CODEWITHSUNDEEP
angular
Jake
Jake

Reputation: 26107

String replace in Angular

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?

Upvotes: 1

Views: 3393

Answers (3)

ashish pal
ashish pal

Reputation: 467

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>

Upvotes: 1

SiddAjmera
SiddAjmera

Reputation: 39432

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.

Upvotes: 1

Krishna Rathore
Krishna Rathore

Reputation: 9687

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

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

Upvotes: 2

Related Questions