title: bind nested object from service to ng2-smart table in angular 2
body: <p>i am new to angular 2 
  i have a page that contains a select menu driven from a service , when select an item i get the Full object , this object contains child object i need to bind this child to a ng2-smart table , how can i do this </p>
  
  <p>this is my type.html </p>
  
  <pre><code>    &lt;div class="widgets"&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="exampleSelect1"&gt;Types&lt;/label&gt;
    &lt;select [ngModel]="selectedObj" (ngModelChange)="onChangeObj($event)"  name="sel3"  class="form-control" id="exampleSelect1"&gt;
      &lt;option [ngValue]="obj"  *ngFor="let obj of objects"&gt;{{ obj.objectName }}&lt;/option&gt;
  
    &lt;/select&gt;
  &lt;/div&gt;
  
   &lt;div class="row"&gt;
      &lt;ba-card title="Types" baCardClass="with-scroll"&gt;
        &lt;ng2-smart-table class='form-control' [settings]="settings" [source]="source"  (deleteConfirm)="onDeleteConfirm($event)"&gt;&lt;/ng2-smart-table&gt;
  
      &lt;/ba-card&gt;
    &lt;/div&gt;
  
  &lt;/div&gt; 
  </code></pre>
  
  <p>and this is my type.component.ts </p>
  
  <pre><code>import {Component, ViewEncapsulation} from '@angular/core';
  
  import { CustomerTypeService } from './customerType.service';
  import { LocalDataSource } from 'ng2-smart-table';
  import {TypeService} from './type.service';
  
  
  
  @Component({
    selector: 'basic-tables',
    encapsulation: ViewEncapsulation.None,
    styles: [require('./type.scss')],
    template: require('./type.html'),
      providers: [TypeService],
  
  })
  export class Type {
  
    query: string = '';
  
  
  
  
  
    settings = {
      add: {
        addButtonContent: '&lt;i class="ion-ios-plus-outline"&gt;&lt;/i&gt;',
        createButtonContent: '&lt;i class="ion-checkmark"&gt;&lt;/i&gt;',
        cancelButtonContent: '&lt;i class="ion-close"&gt;&lt;/i&gt;',
      },
      edit: {
        editButtonContent: '&lt;i class="ion-edit"&gt;&lt;/i&gt;',
        saveButtonContent: '&lt;i class="ion-checkmark"&gt;&lt;/i&gt;',
        cancelButtonContent: '&lt;i class="ion-close"&gt;&lt;/i&gt;',
      },
      delete: {
        deleteButtonContent: '&lt;i class="ion-trash-a"&gt;&lt;/i&gt;',
        confirmDelete: true
      },
      columns: {
  
        CustomerType: {
          title: 'Type Name',
          type: 'string'
        }
  
      }
    };
  
    source: LocalDataSource = new LocalDataSource();
  
      public objects: Array&lt;any&gt; = new Array&lt;any&gt;();
      public type: Array&lt;any&gt; = new Array&lt;any&gt;();
      public id : number;
        public objectsNum: number = 0;
  
  
    constructor(protected _typeService: TypeService) {
      this._typeService.getObject().subscribe((res) =&gt; {
        this.objects = res;
  
        this.objectsNum = (res) ? res.length : 0;
      }, error =&gt; {
        alert(error);
      });
    }
        selectedObj = this.objects;
        onChangeObj(newObj) {
      console.log(newObj);
         this.source.load(this.selectedObj)
  
        }
  
  
    onDeleteConfirm(event): void {
      if (window.confirm('Are you sure you want to delete?')) {
        event.confirm.resolve();
      } else {
        event.confirm.reject();
      }
    }
  } 
  </code></pre>
  
  <p>the selected object structure like </p>
  
  <p><a href="https://i.stack.imgur.com/cz2wn.png" rel="nofollow noreferrer">object strucure</a></p>
  
  <p>i need to take types list in Object objects to bind it in the table , </p>
  
  <p>Thanks in ADVANCE!</p>