Bootstrap table using angular 2

We can display an html table as a grid using bootstrap css class.



In this example we have a simple structure of the html table using boostrap css class without data

<div class="panel panel-primary">
    <div class="panel-heading">
        Product Listing
    </div>
    <div class='panel-body'>
        <div class='row'>
              <div class='col-md-2'>Filter by:</div>
              <div class='col-md-4'><input type='text'/></div>
        </div>
        <div class='table-responsive'>
            <table class='table'>

               <thead>
                 <tr>
                     <th>
                         <button class='btn btn-primary'>
                            Show Image
                         </button>
                     </th>
                     <th>Product</th>
                     <th>Code</th>
                     <th>Available</th>
                     <th>Price</th>
                     <th>5 Star Rating</th>
                  </tr>

               </thead>

                <tbody>

                     <tr> <td></td></tr>
                     <tr> <td></td></tr>
                </tbody>
            </table>

    </div>
</div>    
</div>

HTML

• In this code snippet Image is shown based on the toggle properties of the object
• Object.name is displayed in each td

<div class="panel panel-primary">
    <div class="panel-heading">
       {{pageTitle}}
    </div>
    <div class='panel-body'>
        <div class='row'>
              <div class='col-md-2'>Filter by:</div>
              <div class='col-md-4'><input type='text'[(ngModel)]='listFilter'/></div>
        </div>
        <div class='row'>
              <div class='col-md-6'>
                  <h3>Filter by:{{listFilter}}</h3>
              </div>
        </div>
        <div class='table-responsive'>
            <table class='table' *ngIf='products && products.length' >
                <thead>
                    <tr>
                        <th>
                            <button class='btn btn-primary'
                            (click)='toggleImage()'>  {{ showImage ? "Hide Image":  "Show Image" }}
                        
                            </button>
                        </th>
                        <th>Product</th>
                        <th>Code</th>
                        <th>Available</th>
                        <th>Price</th>
                        <th>5 Star Rating</th>
                    </tr>
             <thead>  
               <tbody>
                <tr *ngFor='let product of products'>
                     <td ><img *ngIf='showImage'  [src]='product.imageUrl' 
                       [title]='product.productname'
                       [style.width.px]='imageWidth'
                       [style.margin.px]='imageMargin' >
                        </td>
                     <td>{{product.productName}}</td>
                     <td>{{product.productCode| lowercase}}</td>
                     <td>{{product.releaseDate |date}}</td>
                     <td>{{product.price | currency:'USD':true:'1.2-2'}}</td>
                     <td>{{product.starRating}}</td>
                </tr>
               
                </tbody>
            </table>

    </div>
</div>    
</div>

Component
Here we are creating a ProductList component.The array of object is mocked for demo purpose.

import {Component} from '@angular/core';
//view for the component
@Component({
    selector:'pm-products',
    templateUrl:'app/products/product-list.component.html'

})
//class
export class ProductListComponent{
    pageTitle:string='Product List';
     products:any[]=[
                    {
                      "productId": 1,
                      "productName": "Leaf Rake",
                      "productCode": "GDN-0011",
                      "releaseDate": "March 19, 2016",
                      "description": "Leaf rake with 48-inch wooden handle.",
                      "price": 19.95,
                      "starRating": 3.2,
                      "imageUrl": "http://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png"
                  },
                  {
                      "productId": 2,
                      "productName": "Garden Cart",
                      "productCode": "GDN-0023",
                      "releaseDate": "March 18, 2016",
                      "description": "15 gallon capacity rolling garden cart",
                      "price": 32.99,
                      "starRating": 4.2,
                      "imageUrl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"
                  }
 ];
}