Blog

  • Create Dynamic Data Table In Angular 4

    Posted by Yash Arora | Last Updated: 28-Jun-18

    In this blog, I am going to explain how to generate dynamic drop-down option values and how to show dynamic table data on selecting any of the options from the drop-down list

    Let's Start:-

    1. Dynamic drop-down options values

    As an example, I am taking hard-coded values to explain but you can take values from API response to show data in the drop-down

    component.ts file:-
     
    initialize this variable in the class and either this can be the response from API So you can show dynamic option in the drop-down

    this.companydepartments =[
          {name:"All"},{name:"It"},{name:"HR"},{name:"Infra"},{name:"Finance"}
        ] 
    

    component.html file

    
     

    <div class="dropdown">
    <select id="events" [(ngModel)]= "selectedoption" (ngModelChange)="getDetails($event)" class="form-control">
     <option *ngFor="let department of companydepartment" [value]="department.name">{{department.name}}</option>
      </select>
      </div>

    Here companydepartment is same field as initialized in component.ts file 
    It will create dynamic drop-down option and if we want to select any one as default. Add this lines in component.ts file
    this.selectedoption='It'     selectedoption is same as mentioned in ngModel in .html file


    2.Generate dynamic table data on the selection of particular drop-down option

    
     

    Add in component.ts file
    public DropDownCollector : any;

    getDetails(DropDownCollector){
    if(DropDownCollector == 'HR'){this.showHrTable()}
    if(DropDownCollector == 'It'){this.showItTable()}
    }

     

    here getDetails() is the same function as specified in div section in .html file

     

    Now in showHrTable() and showItTable() you can get the response from api and collect the response in some variable like ResponseApi

    To explain better i am taking hardcoded values in function

    
    showHrTable(){
    
    this.hrDetails=[{
    
      "EmployeeName":"Diksha",
    
      "Department":"HR",
    
      "Profile":"Assocaite HR",
    
      "Salary":"4.5"
    
    }]
    
    this.ResposneApi=this.hrDetails;

     

    }

    Now to show the table data according to selected drop-down option

    component.html file
    
     <table style="width:100%" class="order-history-table">
    
                        <thead>
    
                            <tr>
    
                                <th>EmployeeName</th>
    
                                <th>Department</th>
    
                                <th>Profile</th>
    
                                <th>Salary</th>
    
                            </tr>
    
                        </thead>
    
                        <tbody>
    
                            <tr *ngFor="let response of  ResponseApi ">
    
                                <td>{{response.employeeName}}</td>
    
                                <td>{{response.department}}</td>
    
                                <td>{{response.profile}}</td>
    
                                <td>{{response.salary}}</td>
    
                        </tbody>

    Now it will show dynamic data according to selected option from the drop-down.

     

Tags: Angular2