title: Angular 5 - need to create multiple rows inside a table
body: <p>I have the following component.ts file.</p>
  
  <pre><code>selector: 'app-product-search',
  template: `
      &lt;div class="col-lg-12"&gt;
          &lt;table class="table table-bordered"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;SKU&lt;/th&gt;
                      &lt;th&gt;MRP&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                      &lt;my-product-list [product]="product" *ngFor="let product of products | product: searchText"&gt;
                     &lt;/my-product-list&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  `
  </code></pre>
  
  <p>And the following HTML file.</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;{{ product.SKU }}&lt;/td&gt;
      &lt;td&gt;{{ product.mrp }}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The output HTML comes as a single row compressed inside a single column.</p>
  
  <pre><code> SKU           MRP
   ABC749XYZ849
  </code></pre>
  
  <p>The ideal output should be.</p>
  
  <pre><code> SKU           MRP
   ABC           749
   XYZ           849
  </code></pre>
  
  <p>I am not sure why I am getting this strange behavior.</p>