Angular-6 dynamic add and remove column not render proper data Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Angular-6 dynamic add and remove column not render proper data without wasting too much if your time.

The question is published on by Tutorial Guruji team.

In my project I have dynamic row add and remove column demo link here

enter image description here

The drop-down of key contains database and desktop. Based on the drop-down of key the value drop-down will be changed.

My issue: When I click 1st row it seems good. But when I move on to 2nd row the data append not properly

Eg:

  1. In 1st row I select Database,value should append ['mysql', 'oracle', 'mongo']
  2. In 2nd row I select desktop, value should append ['dell', 'lenovo', 'hp']

app.component.html

<div class="container" style="margin-top: 5%">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Action</th>
                <th>key</th>
                <th>value</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let dynamic of dynamicArray; let i = index;">
                <td (click)="deleteRow(i)">
                    <i class="fa fa-trash fa-2x"></i>
                </td>
                <td>
                    <select [(ngModel)]="dynamicArray[i].title1" class="form-control" #sel (change)="changed(sel.value)">
            <option [value]='1'>Database</option>
            <option [value]='2'>Desktop</option>
          </select>

          </td>
                <td>
                    <select [(ngModel)]="dynamicArray[i].title2" class="form-control">
            <option *ngFor="let data of dropdownData;">{{data}}</option>
          </select>
                </td>
            
            </tr>
            <tr>
                <td (click)="addRow(0)">
                    <i class="fa fa-plus fa-2x"></i>
                </td>
            </tr>
        </tbody>
    </table>
</div>

app.component.ts

import { Component, VERSION, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  dynamicArray: Array<any> = [];
  newDynamic: any = {};
  dbValue= ['mysql', 'oracle', 'mongo'];
  desktopValue = ['dell', 'lenovo', 'hp'];
  dropdownData:any = [];
  ngOnInit(): void {
      this.newDynamic = {title1: "", title2: ""};
      this.dynamicArray.push(this.newDynamic);
  }
  addRow(index) {  
      this.newDynamic = {title1: "", title2: ""};
      this.dynamicArray.push(this.newDynamic);
      console.log(this.dynamicArray);
      return true;
  }
  
  deleteRow(index) {
      if(this.dynamicArray.length ==1) {
        return false;
      } else {
          this.dynamicArray.splice(index, 1);
          return true;
      }
  }

  changed(value) {
    if(value == 1){
      this.dropdownData = this.dbValue;
    }

    if(value == 2){
      this.dropdownData = this.desktopValue;
    }

  }
}

Please help me on this issue. Thanks in advance.

Answer

You need to add dropdownData to dynamicArray every time when you are adding a new row. Try this

<div class="container" style="margin-top: 5%">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Action</th>
                <th>key</th>
                <th>value</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let dynamic of dynamicArray; let i = index;">
                <td (click)="deleteRow(i)">
                    <i class="fa fa-trash fa-2x"></i>
                </td>
                <td>
                    <select [(ngModel)]="dynamicArray[i].title1" class="form-control" #sel (change)="changed(sel.value, i)">
            <option [value]='1'>Database</option>
            <option [value]='2'>Desktop</option>
          </select>

                </td>
                <td>
                    <select [(ngModel)]="dynamicArray[i].title2" class="form-control">
            <option *ngFor="let data of dynamicArray[i].dropdownData;">{{data}}</option>
          </select>
                </td>

            </tr>
            <tr>
                <td (click)="addRow(0)">
                    <i class="fa fa-plus fa-2x"></i>
                </td>
            </tr>
        </tbody>
    </table>
</div>

app.component.ts

import { Component, VERSION, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  dynamicArray: Array<any> = [];
  newDynamic: any = {};
  dbValue = ["mysql", "oracle", "mongo"];
  desktopValue = ["dell", "lenovo", "hp"];
  ngOnInit(): void {
    this.newDynamic = { title1: "", title2: "", dropdownData: [] };
    this.dynamicArray.push(this.newDynamic);
  }
  addRow(index) {
    this.newDynamic = { title1: "", title2: "", dropdownData: [] };
    this.dynamicArray.push(this.newDynamic);
    console.log(this.dynamicArray);
    return true;
  }

  deleteRow(index) {
    if (this.dynamicArray.length == 1) {
      return false;
    } else {
      this.dynamicArray.splice(index, 1);
      return true;
    }
  }

  changed(value, index) {
    let dropdownData;
    if (value == 1) {
      this.dynamicArray[index].dropdownData = this.dbValue;
    }

    if (value == 2) {
      this.dynamicArray[index].dropdownData = this.desktopValue;
    }
  }
}

Stackblitz link : https://stackblitz.com/edit/angular-ivy-psdnpa?file=src/app/app.component.ts

We are here to answer your question about Angular-6 dynamic add and remove column not render proper data - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji