title: How to display an [object Object] on angular UI?
body: <p>I am trying to display the response of my backend api <code>http://localhost:3000/api/radar_life_cycle</code> on the angular UI but somehow I get the output as <code>[object Object]</code> ,console.log on the response shows the correct object but not on the UI,what am I missing?any guidance on how to display the object on UI?</p>
  
  <p>html</p>
  
  <pre><code>&lt;textarea rows="6" [(ngModel)]="enteredValue"&gt;&lt;/textarea&gt;
  &lt;hr&gt;
  &lt;button (click)="get_radar_lifecycle_data()"&gt;Search&lt;/button&gt;
  &lt;p&gt;{{newPost}}&lt;/p&gt;
  </code></pre>
  
  <p>component.ts</p>
  
  <pre><code>import { Component, OnInit, Injectable } from '@angular/core';
  import { HttpClient } from "@angular/common/http";
  import { Subject } from "rxjs";
  import { map } from 'rxjs/operators';
  
  @Component({
    selector: 'app-radar-input',
    templateUrl: './radar-input.component.html',
    styleUrls: ['./radar-input.component.css']
  })
  
  
  export class RadarInputComponent  {
  
  constructor(private http: HttpClient) {}
  newPost = '';
  get_radar_lifecycle_data(){
       this.http.get('http://localhost:3000/api/radar_life_cycle',{params:this.enteredValue}).subscribe(response =&gt; {
       console.log(response);
        this.newPost = response
        });
  }
  
  }
  </code></pre>
  
  <p>response:-</p>
  
  <pre><code>{message: "Posts fetched successfully!", posts: Array(1)}
  </code></pre>
  
  <p>CURRENT OUTPUT:-</p>
  
  <p><a href="https://i.stack.imgur.com/9rbvD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9rbvD.png" alt="enter image description here"></a></p>