title: Bootstrap table with nested components in angular4
body: <p>I'm the begginer with angular4, and i  am trying to build bootstrap table with nested components, the child component is display in single row.
  But table is not display correctly.please see the below image</p>
  
  <p><a href="https://i.stack.imgur.com/tsuNf.png" rel="nofollow noreferrer">snapshot</a> </p>
  
  <p>parent component</p>
  
  <pre><code>&lt;table class="table table-dark"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Title&lt;/th&gt;
        &lt;th&gt;Done&lt;/th&gt;
        &lt;th&gt;Action&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;app-child *ngFor="let todo of this.todos " [todo]="todo" (eventRemove)="remove(todo)"&gt;&lt;/app-child&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;hr&gt;
  &lt;div&gt;
    &lt;form #f="ngForm" (ngSubmit)="formSubmit(f.value)"&gt;
      &lt;label for="title"&gt;&lt;/label&gt;
      &lt;input type="text" name="title" id="title" [(ngModel)]="this.todo.title"&gt;
      &lt;button type="submit"&gt;Add&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  
  
  import { Todo } from '../todo';
  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
  
    public todos: Todo[] = [];
    public todo: Todo = { title: "", done: false };
    formSubmit(value) {
      var todo = { title: value.title, done: false };
      this.todos.push(todo);
    }
    constructor() {
  
  
    }
  
    ngOnInit() {
      this.todos.push({ title: "clean your room", done: false });
      this.todos.push({ title: "clean your desk", done: true });
  
    }
    remove(t) {
      let index = this.todos.indexOf(t);
      this.todos.splice(index, 1);
      console.log("removed", t);
    }
  
  }
  </code></pre>
  
  <p>Child component</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;
          {{todo.title}}
      &lt;/td&gt;
      &lt;td&gt;
          &lt;input type="checkbox" [checked]="todo.done"&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;button class="btn btn-success btn-sm" (click)="onRemove(todo)"&gt;Remove&lt;/button&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>import { Todo } from '../todo';
  import { Component, Input,Output, OnInit ,EventEmitter} from '@angular/core';</p>
  
  <pre><code>@Component({
    selector: 'app-child',
    templateUrl: './child.component.html',
    styleUrls: ['./child.component.css']
  })
  
      export class ChildComponent implements OnInit {
  
        @Input()
        todo: Todo;
        @Output()
        eventRemove = new EventEmitter&lt;Todo&gt;();
        constructor() { }
  
        ngOnInit() {
        }
        onRemove(data) {
  
          this.eventRemove.emit(data);
        }
      }
  </code></pre>