title: Display JSON value from component in Angular 5
body: <p>I am using Angular 5 and have an Angular service that returns a JSON object.</p>
  
  <p>Here is the component that uses the service:</p>
  
  <pre><code>  export class PageComponent implements OnInit {
  
    public wikiContents : Object;
  
    constructor(private data:MyWikiService) { }
  
    ngOnInit() {
      this.data.GetPageContent('1234').subscribe((data) =&gt; {
        this.wikiContents = data;
        console.log(this.wikiContents);
    }, error =&gt; {
       console.log(error);
    });
    }}
  </code></pre>
  
  <p>This has the following JSON object in console.log()</p>
  
  <pre><code>{
      "body": {
          "view": {
              "value": "&lt;p&gt;apples&lt;/p&gt;&lt;p&gt;oranges&lt;/p&gt;",
          }
      }
  }
  </code></pre>
  
  <p>I would like to display the HTML in <code>value</code> key. How do I do that?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>From the answers below, one person suggested to use an interface for typescript. My interface for the entire JSON is like this. How can I map the component or Service to an Interface and then use it in the HTML File?</p>
  
  <pre><code>export interface WikiInt {
    id: string;
    type: string;
    status: string;
    title: string;
    body: Body;
    extensions: Extensions;
    _links: Links;
    _expandable: Expandable;
  }
  export interface Body {
    view: View;
    _expandable: Expandable1;
  }
  export interface View {
    value: string;
    representation: string;
    _expandable: Expandable2;
  }
  export interface Expandable2 {
    webresource: string;
    content: string;
  }
  export interface Expandable1 {
    editor: string;
    export_view: string;
    styled_view: string;
    storage: string;
    anonymous_export_view: string;
  }
  export interface Extensions {
    position: string;
  }
  export interface Links {
    webui: string;
    edit: string;
    tinyui: string;
    collection: string;
    base: string;
    context: string;
    self: string;
  }
  export interface Expandable {
    container: string;
    metadata: string;
    operations: string;
    children: string;
    restrictions: string;
    history: string;
    ancestors: string;
    version: string;
    descendants: string;
    space: string;
  }
  </code></pre>