How To Bind table in Angular

                 

To Bind data in Datatable very Easy in Angular.Lets See How my HTML Code Look Like.

HTML

 
 " <table class="table table-sm" style="margin-top: 35px;">

              <thead>

                <tr>

                  <th scope="col">Name</th>

                  <th scope="col">Relationship</th>

                  <th scope="col">Date of Birth</th>

                  <th scope="col">Phone</th>

                </tr>

              </thead>

              <tbody>

                <tr  *ngFor="let element of Familyinfodata"  >

                  <td>{{element.Name}}</td>

                  <td>{{element.Relationship}}</td>

                  <td>{{element.DatofBirth|date:"dd-MM-yy"}}</td>

                  <td>{{element.Phonenumber}}</td>


                </tr>
              </tbody> "

We bind the data in <tr> using *ngFor to iterate the array data in Table.Here Data come in an array of "Familyinfodata" . Lets See ts Component for More information.

TS 

   
    Familyinfodata:any=[];

  Getfamilyinfo(EmployeeID) {

    this.services.Getfamilyinformation(EmployeeID)

      .subscribe(data => { this.Familyinfodata= data;  });

   }

we store the data in any array  and used this array in <tr> of the table.

Service

     
       Getfamilyinformation(EmployeeID) {

      return       this.http.get(`${Global.Url}/employee/GetEmpFamilyInfo/${EmployeeID}`).pipe(catchError(this.ErrorResponce));


  }