Post
Ask Question

How To Bind Data To A Drop-Down List And An HTML Table With *ngfor In Angular

I am taking one real time example which displays a list of available products based on the product selection. In this example, you will learn -
  1. How to create a Products array object using TypeScript in a class;
  2. Bind Products to dropdown list with *ngFor;
  3. Call a method to search a list of products using "ngModelChange" ;
  4. Bind Product details object to an HTML table. 
Now, let's start entering the code step by step.
 
Build an array object and store some data in it using TypeScript in a component class. 
  1. export class ProductComponent {  
  2.    
  3. /// this data used to display in products dropdown   
  4.    
  5. public ProductHeader = [{ name: 'Hp' }, { name: 'Dell'}, { name: 'Lenovo' }];  
  6.    
  7.    
  8. /// this data used to display in products details in a html table   
  9.    
  10. public Products = [  
  11. {Name:'Hp', title: 'HP ENVY Laptop - 15t touch', price: '1099', store: 'Best Buy', model: '15-BS013DX' },  
  12. { Name: 'Dell', title: 'Dell Laptop', price: '700', store: 'Amazon', model: 'I7378-3000SLV-PUS' },  
  13. { Name: 'Lenovo', title: 'Lenovo Touch-Screen Laptop', price: '670', store: 'Target', model: '81A40025US' },  
  14. { Name: 'Hp', title: 'HP OfficeJet Pro 6978 All-in-One Printer', price: '100', store: 'Target', model: 'T0F29A#B1H' },  
  15. { Name: 'Hp', title: 'HP Laptop - 17t touch ', price: '420', store: 'Target', model: '1EZ78AV_1' },  
  16. { Name: 'Dell', title: 'Dell - XPS 27" Touch-Screen All-In-One', price: '670', store: 'Target', model: 'BBY-311C3FX' },  
  17. { Name: 'Dell', title: 'Dell - Inspiron 21.5" Touch-Screen All-In-One', price: '469.90', store: 'Target', model: 'I3265-A067BLK-PUS' },  
  18. { Name: 'Lenovo', title: 'Lenovo - 520-24AST 23.8" Touch-Screen All-In-One', price: '679.99', store: 'Target', model: 'F0D3000EUS' },  
  19. { Name: 'Dell', title: 'Dell - XPS 2-in-1 13.3" Touch-Screen Laptop', price: '1199.99', store: 'Target', model: 'XPS9365-7086SLV-PUS' }  
  20. ];  
  21.    
  22. constructor() {  
  23.   
  24.              }  
  25.    
  26.    
  27. }   
Bind a ProductHeader array object to a drop-down list with *ngFor
 
I have used *ngFor to iterate the items in an array object. For displaying a value, use {{object.key}} (this is nothing but {{ prod.name}})
 
 
  1. import { Component, } from '@angular/core';  
  2.    
  3. @Component({  
  4.    
  5. selector: 'my-product-view',  
  6. styleUrls: ['styles.css'],  
  7. template: `  
  8. <div>  
  9. Select Product :  
  10. <select>  
  11.         <option *ngFor="let prod of ProductHeader">{{prod.name}} </option>  
  12. </select>  
  13. ',  
  14.    
  15. })  
  1. export class ProductComponent {  
  2.    
  3.  public ProductHeader = [{ name: 'Hp' }, { name: 'Dell'}, { name: 'Lenovo' }];  
  4.    
  5.      constructor() {  
  6.    /// this constructor will call once the ProductComponent class object is ready.  
  7.                    this.getProducts();  
  8.               }  
  9.    
  10. getProducts() {  
  11.           
  12.        return this.ProductHeader;  
  13.     }  
  14.    
  15. }  
Call a method on selected dropdown list item

Whenever a user changes a value in a dropdown list, the ngModelChange changes will call a method.
  1. <select [(ngModel)]="ProductHeader.name" (ngModelChange)="SearchProduct(ProductHeader.name)">  
  2.      <option *ngFor="let prod of ProductHeader">{{prod.name}} </option>  
  3.  </select>  
Create a serach ProductDetails method in a Component class as below.
  1. export class ProductComponent {  
  2.    
  3. //Create a object for storing filter data and bind to html table.  
  4. public ProductDetails: object = [];  
  5.    
  6. //filter product details on name and return productDetails object.
  7. SearchProduct(name: string) {  
  8. let obj = this.Products.filter(m => m.Name == name);  
  9. this.ProductDetails = obj;  
  10. return this.ProductDetails;  
  11. }  
  12.    

  14. }  
Bind Product details object to an HTML table
 
Create an HTML table with <tr> and <td> to display the product title, store, price, and model.
  1. <table class="TFtable">  
  2. <tr >  
  3. <th>Name</th> <th>Store</th> <th>Price</th> <th>Model</th>  
  4. </tr>  
  5. <tr *ngFor="let Prod of ProductDetails">  
  6. <td>{{Prod.title}}</td>  
  7. <td>{{Prod.store}}</td>  
  8. <td>{{Prod.price}}</td>  
  9. <td>{{Prod.model}}</td>  
  10. </tr>  
  11.   
  12. </table>  
 Here is the complete code.
  1. import { Component, } from '@angular/core';  
  2.   
  3. @Component({  
  4.      
  5.     selector: 'my-product-view',  
  6.     styleUrls: ['styles.css'],  
  7.     template: `  
  8.                 <div>  
  9.                         Select Product :  
  10.                         <select  [(ngModel)]="ProductHeader.name" (ngModelChange)="SearchProduct(ProductHeader.name)">  
  11.                              <option *ngFor="let prod of ProductHeader">{{prod.name}} </option>  
  12.                          </select>  
  13.   
  14.   
  15.   
  16. <div *ngIf="ProductHeader.name">  
  17.     <h5>You have selected: {{ProductHeader.name}} Product </h5>  
  18. </div>  
  19.                 </div>  
  20. <div>  
  21. <h4>Product Details:</h4>  
  22. <table class="TFtable">  
  23. <tr >   
  24.     <th>Name</th> <th>Store</th>  <th>Price</th> <th>Model</th>  
  25. </tr>  
  26.  <tr  *ngFor="let Prod of ProductDetails">  
  27.     <td>{{Prod.title}}</td>  
  28.     <td>{{Prod.store}}</td>  
  29.     <td>{{Prod.price}}</td>  
  30.     <td>{{Prod.model}}</td>  
  31. </tr>  
  32.   
  33. </table>  
  34. </div>  
  35.                `,  
  36. })  
  37.   
  38. export class ProductComponent {  
  39. gi
  40.   //Create a object for storing filter data and bind to html table.
  41.     public ProductDetails: object = [];  

  43.   //filter product details on name and return productDetails object.
  44.     public ProductHeader = [{ name: 'Hp' }, { name: 'Dell'}, { name: 'Lenovo' }];  
  45.     
  46.     public Products = [  
  47.         {Name:'Hp', title: 'HP ENVY Laptop - 15t touch', price: '1099', store: 'Best Buy', model: '15-BS013DX' },  
  48.         { Name: 'Dell', title: 'Dell Laptop', price: '700', store: 'Amazon', model: 'I7378-3000SLV-PUS' },  
  49.         { Name: 'Lenovo', title: 'Lenovo Touch-Screen Laptop', price: '670', store: 'Target', model: '81A40025US' },  
  50.         { Name: 'Hp', title: 'HP OfficeJet Pro 6978 All-in-One Printer', price: '100', store: 'Target', model: 'T0F29A#B1H' },  
  51.         { Name: 'Hp', title: 'HP Laptop - 17t touch ', price: '420', store: 'Target', model: '1EZ78AV_1' },  
  52.         { Name: 'Dell', title: 'Dell - XPS 27" Touch-Screen All-In-One', price: '670', store: 'Target', model: 'BBY-311C3FX' },  
  53.         { Name: 'Dell', title: 'Dell - Inspiron 21.5" Touch-Screen All-In-One', price: '469.90', store: 'Target', model: 'I3265-A067BLK-PUS' },  
  54.         { Name: 'Lenovo', title: 'Lenovo - 520-24AST 23.8" Touch-Screen All-In-One', price: '679.99', store: 'Target', model: 'F0D3000EUS' },  
  55.         { Name: 'Dell', title: 'Dell - XPS 2-in-1 13.3" Touch-Screen Laptop', price: '1199.99', store: 'Target', model: 'XPS9365-7086SLV-PUS' }  
  56.        ];  
  57.   
  58.     constructor() {  
  59.       
  60.         this.getProducts();  
  61.     }  
  62.     getProducts() {  
  63.         console.log("getProducts");  
  64.         return this.ProductHeader;  
  65.     }  
  66.   
  67.   
  68.     SearchProduct(name: string) {  
  69.   
  70.         let obj = this.Products.filter(m => m.Name == name);  
  71.         this.ProductDetails = obj;  
  72.         return this.ProductDetails;  
  73.     }  
  74.   
  75.   
  76. }  
Output


Similar Articles