CODEWITHSUNDEEP
angulartypescriptkendo-ui
Adibah Hanun Abu Seman
Adibah Hanun Abu Seman

Reputation: 15

How to display div based on selected multiselect

I am trying to show/hide elements based on multiselect dropdown, but my code doesn't seem to work. For example, one of the data for nameList is Name, and when Name is selected, I would like to display a div with another drop-down menu. I am using Angular and Typescript. Below are my codes for your reference:

<kendo-multiselect [data]="nameList" [(ngModel)]="selectedname "></kendo-multiselect>


<div *ngIf="selectedname === 'Name'">
<div class="col-4">
   You selected {{selectedname}}
</div>
<div class="col-2">Name:</div>
<div class="col-6">
  <kendo-dropdownlist style="width: 100%" [data]="anotherList" [valuePrimitive]="true"></kendo-dropdownlist>
</div>
</div>

Upvotes: 0

Views: 623

Answers (2)

Serkan KONAKCI
Serkan KONAKCI

Reputation: 1360

On change event of "kendo-mutliselecet" push selectedname item to "anotherList" then set kendo-dropdownlist [(ngModel)] to this selectedname. 

<div *ngIf="selectedname.indexOf('Name')>=0">

I think it will be solution. Not tested.

Upvotes: 1

Pardeep Jain
Pardeep Jain

Reputation: 86800

Basically here selectedname returns an array, so you need to check whether an item exists in an array or not. So you can use the below code to check -

<kendo-multiselect [data]="nameList" [(ngModel)]="selectedname "></kendo-multiselect>


<div *ngIf="isShown('Name')">
<div class="col-4">
   You selected {{selectedname}}
</div>
<div class="col-2">Name:</div>
<div class="col-6">
  <kendo-dropdownlist style="width: 100%" [data]="anotherList" [valuePrimitive]="true"></kendo-dropdownlist>
</div>
</div>


isShown(flag) {
      console.log(this.selectedname.indexOf(flag));
      if (this.selectedname.indexOf(flag) !== -1) {
        return true;
      } else {
        return false;
      }
    }

Working example

Upvotes: 0

Related Questions