title: How to populate table's row of Parent component from child component data in Angular 4 with correct style?
body: <p>I am trying to populate the tables row with the data from Child component. Though the data is populated but the format is not correct. All the value in row goes under a single column instead of spreading equally.   
  Please guide to achieve it. Thanks!!! Below is code. PS: I have imported all required Modules/Classes.</p>
  
  <p><em>mro-item-list.component.ts</em></p>
  
  <pre><code>export class MroItemListComponent implements OnInit {
      mockMROItems: Mro[] = MRO_ITEMS;
      index: number;
      constructor() { }
      ngOnInit() {}
      }
  </code></pre>
  
  <p><em>mro-item-list.component.html</em></p>
  
  <pre><code>&lt;table class="table table-striped"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;#Index&lt;/th&gt;
      &lt;th&gt;Ticket Number&lt;/th&gt;
      &lt;th&gt;Activity&lt;/th&gt;
      &lt;th&gt;comments&lt;/th&gt;
      &lt;th&gt;Date&lt;/th&gt;        
      &lt;th&gt;Portfolio&lt;/th&gt;
      &lt;th&gt;UserID&lt;/th&gt;
      &lt;th&gt;Hrs&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;app-mro-item *ngFor="let mockMROItem of mockMROItems"   [mroElement]="mockMROItem"&gt;&lt;/app-mro-item&gt;           
  &lt;/tbody&gt;
  </code></pre>
  
  <p>                          </p>
  
  <p><em>mro-item.component.ts</em></p>
  
  <pre><code>export class MroItemComponent implements OnInit {
  @Input() mroElement: Mro;
  constructor() { }
  ngOnInit() { }
  }
  </code></pre>
  
  <p><em>mto-item.component.html</em></p>
  
  <pre><code>&lt;th&gt;Index&lt;/th&gt;
  &lt;td&gt;{{mroElement.tickteNumber}}&lt;/td&gt;
  &lt;td&gt;{{mroElement.activity}}&lt;/td&gt;
  &lt;td&gt;{{mroElement.comments}}&lt;/td&gt;
  &lt;td&gt;{{mroElement.date}}&lt;/td&gt;
  &lt;td&gt;{{mroElement.portfolio}}&lt;/td&gt;
  &lt;td&gt;{{mroElement.userID}}&lt;/td&gt;
  &lt;td&gt;{{mroElement.hrsSpent}}&lt;/td&gt;
  </code></pre>