title: Angular-6 based on the select inputbox and select dropdown not showing properly
body: <p>This question is maybe asked, but that is not solving my issue.</p>
  <p>The <code>drop-down</code> of key contains <code>database</code>, <code>desktop</code> and <code>account</code>. Based on the drop-down of key the value <code>drop-down</code> and <code>inputbox</code> will be changed.</p>
  <p><a href="https://stackblitz.com/edit/angular-ivy-zahevb?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-zahevb?file=src%2Fapp%2Fapp.component.html</a></p>
  <blockquote>
  <p>My issue: When I click 1st row it seems good.
  But when I move on to 2nd row the data append not properly. And when I select <code>account</code> previuos row drop-down also changed as <code>inputbox</code></p>
  </blockquote>
  <p><strong>Eg:</strong></p>
  <ol>
  <li>In 1st row I select Database,value should append ['mysql', 'oracle', 'mongo'] in <code>drop-down</code></li>
  <li>In 2nd row I select Desktop, value should append ['dell', 'lenovo', 'hp']</li>
  <li>In 3rd row I select Account the <code>inputbox</code> will show</li>
  </ol>
  <p><strong>app.component.ts</strong></p>
  <pre><code>import { Component, VERSION } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  {
    dynamicArray: Array&lt;any&gt; = [];
    newDynamic: any = {};
    dbValue = [&quot;mysql&quot;, &quot;oracle&quot;, &quot;mongo&quot;];
    desktopValue = [{'id':'1', 'name':'dell'}, {'id':'2', 'name':'lenovo'}, {'id':'3', 'name':'hp'}];
    isdbShow:boolean = false;
    isdesktopShow:boolean = false;
    isaccountShow:boolean = false;
    ngOnInit(): void {
      this.newDynamic = { title1: &quot;&quot;, title2: &quot;&quot;, dropdownDataDb: [], dropdownDataDesktop: [] };
      this.dynamicArray.push(this.newDynamic);
    }
    addRow(index) {
      this.newDynamic = { title1: &quot;&quot;, title2: &quot;&quot;, dropdownDataDb: [], dropdownDataDesktop: [] };
      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 dropdownDataDb;
      let dropdownDataDesktop;
      if (value == 1) {
        this.isdbShow = true;
        this.isdesktopShow = false;
        this.isaccountShow = false;
        this.dynamicArray[index].dropdownDataDb = this.dbValue;
      }
  
      if (value == 2) {
        this.isdbShow = false;
        this.isdesktopShow = true;
        this.isaccountShow = false;
        this.dynamicArray[index].dropdownDataDesktop = this.desktopValue;
      }
  
      if (value == 3) {
        this.isdbShow = false;
        this.isdesktopShow = false;
        this.isaccountShow = true;
      }
    }
  }
  </code></pre>
  <p><strong>app.componet.html</strong></p>
  <pre><code>&lt;div class=&quot;container&quot; style=&quot;margin-top: 5%&quot;&gt;
      &lt;table class=&quot;table table-striped table-bordered&quot;&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Action&lt;/th&gt;
                  &lt;th&gt;key&lt;/th&gt;
                  &lt;th&gt;value&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr *ngFor=&quot;let dynamic of dynamicArray; let i = index;&quot;&gt;
                  &lt;td (click)=&quot;deleteRow(i)&quot;&gt;
                      &lt;i class=&quot;fa fa-trash fa-2x&quot;&gt;&lt;/i&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;select [(ngModel)]=&quot;dynamicArray[i].title1&quot; class=&quot;form-control&quot; #sel (change)=&quot;changed(sel.value, i)&quot;&gt;
              &lt;option [value]='1'&gt;Database&lt;/option&gt;
              &lt;option [value]='2'&gt;Desktop&lt;/option&gt;
              &lt;option [value]='3'&gt;Account&lt;/option&gt;
            &lt;/select&gt;
  
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;!-- show db data --&gt;
                      &lt;select *ngIf=&quot;isdbShow&quot; [(ngModel)]=&quot;dynamicArray[i].title2&quot; class=&quot;form-control&quot;&gt;
              &lt;option *ngFor=&quot;let data of dynamicArray[i].dropdownDataDb;&quot;&gt;{{data}}&lt;/option&gt;
            &lt;/select&gt;
                      &lt;!-- show desktop data --&gt;
                      &lt;select *ngIf=&quot;isdesktopShow&quot; [(ngModel)]=&quot;dynamicArray[i].title2&quot; class=&quot;form-control&quot;&gt;
              &lt;option *ngFor=&quot;let data of dynamicArray[i].dropdownDataDesktop;&quot;&gt;{{data?.name ? data?.name : data}}&lt;/option&gt;
            &lt;/select&gt;
  
            &lt;!-- show account data --&gt;
            &lt;input *ngIf=&quot;isaccountShow&quot; type=&quot;text&quot; [(ngModel)]=&quot;dynamicArray[i].title2&quot; class=&quot;form-control&quot;&gt;
                  &lt;/td&gt;
  
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td (click)=&quot;addRow(0)&quot;&gt;
                      &lt;i class=&quot;fa fa-plus fa-2x&quot;&gt;&lt;/i&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>