title: Split HTML Content and Text from JSON response to use different places in Angular 2 - Typescript
body: <p><strong>HI, I am using Angular 2 for frontend with wordpress rest api backend.</strong>
  I am getting a json response from service. But Wp rest api send the content along with HTML tags and images. I am unabale split it and use it in my HTML.
  I want use image and text should be at different places. also I need to remove <p></p> tag from the content.</p>
  
  <p>service Like:</p>
  
  <pre><code>@Injectable()
  export class VtkraHomeService {
      private url = 'http://myapplication.com/wp-json/wp/v2/posts';
      private headers = new Headers({'Content-Type': 'application/json'});
      constructor (private http : Http){
  
      }
  
      getFeeds(){
          return this.http
          .get(this.url)
          //.then( (res) =&gt; res.json);
          .map((res: Response) =&gt; res.json());
      }
  </code></pre>
  
  <p>and ComponentLike:</p>
  
  <pre><code>export class HomeComponent implements OnInit { 
  
    homefeed: any;
    showLoader = false;
  
    constructor( private VtkraHomeService: VtkraHomeService ) {  }
  
  getHomeFeeds(){
    this.showLoader = true;
    this.VtkraHomeService
    .getFeeds()
    .subscribe(data =&gt; {
      this.homefeed = data;
      console.log(this.homefeed);
      this.showLoader = false;
    });
  }
  
  
  
    ngOnInit(){
      this.getHomeFeeds()
    }
  
  }
  </code></pre>
  
  <p>I am getting a Json response something like this:</p>
  
  <pre><code>    [
         {
            id: 15953,
            date: '2016-10-22T07:55:34',
            title: {
                     rendered: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum',
                     protected: false
                   },
            content: {
                      rendered: '&lt;p&gt;&lt;img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" /&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. &lt;a href="htts://www.w3schools.com/css/paris"&gt;Link&lt;/a&gt;&lt;/P&gt;',
                     protected: false
                      },
             link: 'htts://www.w3schools.com/css/paris',
             type: 'post',
             author: 1
         },
  {
            id: 15954,
            date: '2016-10-22T07:55:34',
            title: {
                     rendered: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum',
                     protected: false
                   },
            content: {
                      rendered: '&lt;p&gt;&lt;img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" /&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. &lt;a href="htts://www.w3schools.com/css/paris"&gt;Link&lt;/a&gt;&lt;/P&gt;',
                     protected: false
                      },
             link: 'htts://www.w3schools.com/css/paris',
             type: 'post',
             author: 1
         },
  {
            id: 15955,
            date: '2016-10-22T07:55:34',
            title: {
                     rendered: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum',
                     protected: false
                   },
            content: {
                      rendered: '&lt;p&gt;&lt;img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" /&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. &lt;a href="htts://www.w3schools.com/css/paris"&gt;Link&lt;/a&gt;&lt;/P&gt;',
                     protected: false
                      },
             link: 'htts://www.w3schools.com/css/paris',
             type: 'post',
             author: 1
         }
      ];
  </code></pre>
  
  <p>I wanted to get html and text separate from "content (rendered)" </p>
  
  <pre><code>content: {
             rendered: '&lt;p&gt;&lt;img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" /&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. &lt;a href="htts://www.w3schools.com/css/paris"&gt;Link&lt;/a&gt;&lt;/P&gt;',
             protected: false
           },
  </code></pre>
  
  <p>My Html code should be like:</p>
  
  <pre><code>&lt;md-list class="home-feed-list"&gt;
    &lt;div *ngFor="let item of homefeed"&gt;
    &lt;md-list-item routerLink="/Story"&gt;
    &lt;img md-list-avatar src="item.content.rendered(image url)" alt="" class="list-avatar"&gt;
    &lt;h4&gt;{{item.title.rendered}}&lt;/h4&gt;
  &lt;p&gt;{{item.content.rendered(remaining text)}}&lt;/p&gt;
    &lt;/md-list-item&gt;
    &lt;md-divider&gt;&lt;/md-divider&gt;
    &lt;/div&gt;
  &lt;/md-list&gt;
  </code></pre>
  
  <p>Please help me to get it proper: I am beginner in angular2 and Typescript</p>