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

15 comments:

  1. Replies
    1. IEEE Final Year projects Project Centers in Chennai are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes. IEEE Final Year project centers ground for all fragments of CSE & IT engineers hoping to assemble.Final Year Projects for CSE

      Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining .

      Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai

      The Angular Training covers a wide range of topics including Angular Directives, Angular Services, and Angular programmability.Angular Training

      Delete
  2. You can find a number of various kinds of levels you get with the LA Weight reduction eating plan each and every one may be vital. Incredibly stage would be the factual throwing away of this extra pounds. la weight loss ny web design firms

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

    ReplyDelete
  4. 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