title: Display fetched data from API with ng2 smart tbl
body: <p>I am trying to use <code>ng2-smart-table</code>. The issue is that I don't know how to display fetched data from API in my HTML.</p>
  
  <p>I generate <code>model.ts</code> </p>
  
  <pre><code>export class Clients {
      id:number;
      name:string;
      phone:string;
      address:string;
      type:string;
      account:number;
      nots:string;
      branchId:number;
  }
  </code></pre>
  
  <p>In my <code>service.ts</code> I create a method to get data from API like this:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Clients } from './clients.model';
  import { HttpClient, HttpErrorResponse } from '@angular/common/http';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ClientsService {
  
    url="http://localhost:21063/api/clints"
    clients:Clients[];
  
    constructor(private http:HttpClient) { }
  
    getAllClients(){
      this.http.get&lt;Clients[]&gt;(this.url).subscribe(
          data =&gt; {
            this.clients = data;
            console.log(this.clients);
        },
        (err: HttpErrorResponse) =&gt; {
          if (err.error instanceof Error) {
            console.log("Client-side error occurred.");
          } else {
            console.log("Server-side error occurred.");
          }
        });
      }
  
    }
  </code></pre>
  
  <p>I try to call the method in <code>component.ts</code> in this way "I don't know this is right or not":</p>
  
  <pre><code>import { Clients } from './../clients.model';
  import { Component, OnInit } from '@angular/core';
  import { IAngularMyDpOptions, IMyDateModel } from 'angular-mydatepicker';
  import { FormGroup, FormBuilder, Validators } from '@angular/forms';
  import { ClientsService } from '../clients.service';
  
  @Component({
    selector: 'app-client-info',
    templateUrl: './client-info.component.html',
    styleUrls: ['./client-info.component.css']
  })
  export class ClientInfoComponent implements OnInit {
  
    // start main stores tbl
    settMain = {
      noDataMessage: 'عفوا لا توجد بيانات',
  
      actions: {
        columnTitle: 'إجراءات',
        position: 'right',
      },
      pager: {
        perPage: 25,
      },
      add: {
        addButtonContent: '  إضافة جديد ',
        createButtonContent: '',
        cancelButtonContent: '',
      },
      edit: {
        editButtonContent: '',
        saveButtonContent: '',
        cancelButtonContent: '',
  
  
      },
      delete: {
        deleteButtonContent: '',
      },
  
      columns: {
        index: {
          title: 'مسلسل',
          width: '80px',
        },
        id: {
          title: 'كود العميل',
          width: '80px',
        },
        name: {
          title: 'اسم العميل',
          width: '160px'
        },
        phone: {
          title: ' الهاتف'
        },
        address: {
          title: ' العنوان'
        },
        nots: {
          title: 'ملاحظات'
        }
      }
    };
    data= [
      {
        index:1,
        id:"",
        name: "",
        phone:"",
        address: "",
        nots: "",
      }];
  
    private myForm: FormGroup;
  
    constructor(private formBuilder: FormBuilder,private Service:ClientsService) { }
  
  
    ngOnInit() {
  
      this.Service.getAllClients();
  
    }
  </code></pre>
  
  <p>Are there any mistakes in my code? And how can I display the fetched data?</p>