Wednesday, January 25, 2017

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"
                  }
 ];
}

11 comments:

  1. Awesome read , I am going to spend more time learning about this subject new york website design company

    ReplyDelete
  2. Youre so cool! I dont suppose Ive learn anything like this before. So good to search out someone with some authentic ideas on this subject. realy thank you for beginning this up. this web site is one thing that’s needed on the web, someone with somewhat originality. useful job for bringing something new to the internet! branding san francisco

    ReplyDelete
  3. It is truly a well-researched content and excellent wording. I got so engaged in this material that I couldn’t wait to read. Read more info about angular agency

    ReplyDelete
  4. Well written and insightful blog, Wording is easy to understand by anyone. Thanks for sharing.

    Cross Platform App Development

    ReplyDelete