Angular-6 based on the select multi-select dropdown show and hide not working properly

Question

This question is maybe asked, but that is not solving my issue for multi-select.

In my angular project the drop-down of key contains database, desktop and account. Based on the drop-down of key the value multi-select or drop-down and inputbox will be changed.

https://stackblitz.com/edit/angular-ivy-kioexw

My issue: When I click 1st row as database it showing multi-select, but in same 1st row if I select desktop that database multi-select not hided. Please check below image.

app.component.ts

import { Component, VERSION } from '@angular/core';
declare var $: any;
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
rowArray: Array<any> = [];
  newRowArray: any = {};
  dbValue = ["mysql", "oracle", "mongo"];
  desktopValue = [
    { id: "1", name: "dell" },
    { id: "2", name: "lenovo" },
    { id: "3", name: "hp" }
  ];
  ngOnInit(): void {
    this.newRowArray = {
      title1: "",
      title2: "",
      dropdownDataDb: [],
      dropdownDataDesktop: [],
      isDropDown: true
    };
    this.rowArray.push(this.newRowArray);
    console.log( $('.multiple-select').multiselect())
  }
  addRow(index) {
    
    this.newRowArray = {
      title1: "",
      title2: "",
      dropdownDataDb: [],
      dropdownDataDesktop: [],
      isDropDown: true,
      isText: false
    };
    this.rowArray.push(this.newRowArray);
    console.log(this.rowArray);
    return true;
  }

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

  //multiselect code
     multiSelectJquery(){
        setTimeout(()=>{            
             $('.multiple-select').multiselect({
                includeSelectAllOption: false,
                enableFiltering: true,
                includeFilterClearBtn: false,
                enableCaseInsensitiveFiltering: true               
            });
        },1);
    } 
     //multiselect code 

  changed(value: any, index: any) {
    this.multiSelectJquery();
    if (value == 1) {
      this.rowArray[index].isDropDown = true;
      this.rowArray[index].isText = false;
      this.rowArray[index].dropdownDataDb = this.dbValue;
    }

    if (value == 2) {
      this.rowArray[index].isDropDown = true;
      this.rowArray[index].isText = false;
      this.rowArray[index].dropdownDataDesktop = this.desktopValue;
    }

    if (value == 3) {
      this.rowArray[index].isDropDown = false;
      this.rowArray[index].isText = true;
    }
  }
}

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 rowArray; let i = index;">
                <td (click)="deleteRow(i)">
                    <i class="fa fa-trash fa-2x"></i>
                </td>
                <td>
                    <select [(ngModel)]="rowArray[i].title1" class="form-control" #sel (change)="changed(sel.value, i)">
            <option [value]='1'>Database</option>
            <option [value]='2'>Desktop</option>
            <option [value]='3'>Account</option>
          </select>
                </td>
                <td>
                    <!-- show db data -->
                    <select *ngIf="rowArray[i].title1 == 1 && dynamic?.isDropDown" [(ngModel)]="rowArray[i].title2" class="form-control multiple-select"  multiple="multiple">
            <option *ngFor="let data of rowArray[i].dropdownDataDb;">{{data}}</option>
          </select>
                    <!-- show desktop data -->
                    <select *ngIf="rowArray[i].title1 == 2 && dynamic?.isDropDown" [(ngModel)]="rowArray[i].title2" class="form-control">
            <option *ngFor="let data of rowArray[i].dropdownDataDesktop;">{{data?.name ? data?.name : data}}</option>
          </select>

                    <!-- show account data -->
                    <input *ngIf="rowArray[i].title1 == 3 && dynamic?.isText" type="text" [(ngModel)]="rowArray[i].title2" class="form-control">
                </td>

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

Please help me to solve this issue. Thanks in advance.

Answer 1

You can replace the code <!-- show db data --><select *ngIf="rowArray[i].title1 == 1 && dynamic?.isDropDown" [(ngModel)]="rowArray[i].title2" class="form-control multiple-select" multiple="multiple"> <option *ngFor="let data of rowArray[i].dropdownDataDb;">{{data}}</option> </select> with this:

<!-- show db data -->
                <span *ngIf="rowArray[i].title1 == 1 && dynamic?.isDropDown">
                    <select  [(ngModel)]="rowArray[i].title2" class="form-control multiple-select"  multiple>
        <option *ngFor="let data of rowArray[i].dropdownDataDb;">{{data}}</option>
      </select>
                </span>