title: Show NestJs api data/data stored in mongodb , in Angular app in html page
body: <p>I want to show all the data(genres) on Angular Front End Page. But I'm facing difficulty how to do that, or how to bring data in html page. The Angular is connected with NestJS api and MongoDB.</p>
  <p><strong>html file of Angular Project, and I want to show all the data present in the database, in the table structure below the form, but facing difficulty how to put all the fields in the table to show, and the ID is generated by MongoDb automatically</strong></p>
  <pre><code> &lt;form [formGroup]=&quot;GenreForm&quot;&gt;
        &lt;label for=&quot;name&quot;&gt;ID: &lt;/label&gt;
        &lt;input name=&quot;name&quot; type=&quot;text&quot; [formControl]=&quot;id&quot; /&gt;&lt;br /&gt;&lt;br /&gt;
      
        &lt;label for=&quot;name&quot;&gt;Name: &lt;/label&gt;
        &lt;input name=&quot;name&quot; type=&quot;text&quot; formControlName=&quot;name&quot; /&gt;&lt;br /&gt;&lt;br /&gt;
      
        &lt;label for=&quot;name&quot;&gt;Floor: &lt;/label&gt;
        &lt;input name=&quot;name&quot; type=&quot;text&quot; formControlName=&quot;floor&quot; /&gt;&lt;br /&gt;&lt;br /&gt;
      
        &lt;label name=&quot;name&quot;&gt;Genre Number: &lt;/label&gt;
        &lt;input name=&quot;name&quot; type=&quot;text&quot; formControlName=&quot;genre_number&quot; /&gt;&lt;br /&gt;&lt;br /&gt;
      
        &lt;label for=&quot;name&quot;&gt;Shelves: &lt;/label&gt;
        &lt;input name=&quot;name&quot; type=&quot;text&quot; formControlName=&quot;shelves&quot; /&gt;&lt;br /&gt;&lt;br /&gt;
        &lt;button (click)=&quot;getallgenres()&quot;&gt;All Genres&lt;/button&gt;&lt;br /&gt;&lt;br /&gt;
        &lt;button (click)=&quot;addgenres()&quot;&gt;Add Genres&lt;/button&gt;&lt;br /&gt;&lt;br /&gt;
        &lt;button (click)=&quot;putupdateGenres()&quot;&gt;Put Update Genres&lt;/button&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;/form&gt;
  
      &lt;table style=&quot;width: 100&quot;&gt;
        &lt;tr&gt;
         &lt;th&gt;ID&lt;/th&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Floors&lt;/th&gt;
      &lt;th&gt;Genre Number&lt;/th&gt;
      &lt;th&gt;Shelves&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;{{}}&lt;/td&gt;
          &lt;td&gt;{{}}&lt;/td&gt;
          &lt;td&gt;{{}}&lt;/td&gt;
          &lt;td&gt;{{}}&lt;/td&gt;
          &lt;td&gt;{{}}&lt;/td&gt;
  
        &lt;/tr&gt;
        &lt;tr&gt;&lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  <p><strong>component.ts file of Angular</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormControl, FormGroup } from '@angular/forms';
  import { ApiService } from './api.service';
  
  @Component({
    selector: 'app-genres',
    templateUrl: './genres.component.html',
    styleUrls: ['./genres.component.css'],
  })
  export class GenresComponent implements OnInit {
    id = new FormControl('');
    GenreForm = new FormGroup({
      name: new FormControl(''),
      floor: new FormControl(''),
      genre_number: new FormControl(''),
      shelves: new FormControl(''),
    });
    constructor(private readonly apiService: ApiService) {}
  
    ngOnInit() {}
    getallgenres() {
      this.apiService.getallgenres().subscribe((result) =&gt; {
        console.log(result);
      });
    }
    addgenres() {
      this.apiService.addgenres(this.GenreForm.value).subscribe((result) =&gt; {
        console.log(result);
      });
    }
  
    async putupdateGenres() {
      (
        await this.apiService.putupdategenre(this.id.value, this.GenreForm.value)
      ).subscribe((result: any) =&gt; {
        console.log(result);
      });
    }
    async patchupdateGenres() {
      this.apiService
        .patchupdategenres(this.id.value, this.GenreForm.value)
        .subscribe((result: any) =&gt; {
          console.log(result);
        });
    }
    deletegenres() {
      this.apiService.deletegenres(this.id.value).subscribe((result) =&gt; {
        console.log(result);
      });
    }
  }
  </code></pre>
  <p><strong>api.service.file of Angular Project (in case somebody needs)</strong></p>
  <pre><code>import { HttpClient, HttpParams } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  import { Genres } from './genres_schema';
  
  @Injectable({
    providedIn: 'root',
  })
  export class ApiService {
    API_SERVER = 'http://localhost:3000';
    constructor(private httpclient: HttpClient) {}
  
    public getallgenres() {
      return this.httpclient.get&lt;Genres[]&gt;(`${this.API_SERVER}/genres`);
    }
    public getdepartmentbyid(genreID: Genres) {
      return this.httpclient.get&lt;Genres&gt;(
        `${this.API_SERVER}/genres/${genreID}/singlegenres`
      );
    }
    async getallBooksofSingleGenere(name: string) {
      return this.httpclient.get&lt;Genres&gt;(
        `${this.API_SERVER}/genres/${{ genres_name: name }}/bookofsinglegenres`
      );
    }
    public addgenres(genres: Genres) {
      return this.httpclient.post&lt;Genres&gt;(`${this.API_SERVER}/genres`, genres);
    }
    public putupdategenre(genre_id: string, body: any) {
      let params = new HttpParams().set('ID', genre_id).set('Body', body);
      return this.httpclient.put&lt;Genres&gt;(
        `${this.API_SERVER}/genres/putupdate/${params}`,
        { params }
      );
    }
    public patchupdategenres(genre_id: Genres, body: any) {
      return this.httpclient.put&lt;Genres&gt;(
        `${this.API_SERVER}/genres/${genre_id}/patchupdate`,
        genre_id
      );
    }
  
    public deletegenres(id: number) {
      return this.httpclient.delete(`${this.API_SERVER}/genres/${id}`);
    }
  }
  </code></pre>