How to disable mat drop down option from one to two?

Admin 1
Viewed 4132

TS Code:

import {Component} from '@angular/core';
import {MatTableDataSource} from '@angular/material';

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
 timeSelection1='';
 timeSelection2=''; 

  resTimePeriodData= [
    "1",
    "2",
    "3",
    "4"
  ] 
}

HTML Code:

<div class="row">
    <div class="col-md-2 ">
        <!-- DROP DOWN FOR CURRENT TIME PERIOD -->
        <mat-form-field>
            <mat-select placeholder="Current Time Period" multiple 
 name="select1" [(ngModel)]="timeSelection1" (ngModelChange)="onchange()" >
                <mat-option *ngFor="
 let time1 of resTimePeriodData
 " [value]="time1">{{ time1 }}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>
<div class="row">
    <div class="col-md-2">
        <mat-form-field >
            <!-- DROP DOWN FOR PREVIOUS TIME PERIOD -->
            <mat-select  placeholder="Previous Time Period" multiple name="select2" [(ngModel)]="timeSelection2" >
                <mat-option *ngFor="
  let time2 of resTimePeriodData
 " [value]="time2">{{ time2 }}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>

How to disable 1st selected element to drop down two that element selected in the dropdown one. If I select 3 in the dropdown one and I select 2 in dropdown two and if I want to select 2 from the dropdown one I will get selected and both drop down having the same option!

The code that I tried StackBlitz

angular5 angular-material angular typescript
2 Answers

I would do something like this:

HTML:

<div class="row">
    <div class="col-md-2 ">
        <!-- DROP DOWN FOR CURRENT TIME PERIOD -->
        <mat-form-field>
            <mat-select [(value)]="selected" placeholder="Current Time Period" multiple name="select1" [(ngModel)]="timeSelection1">
                <mat-option *ngFor="let time1 of resTimePeriodData" [value]="time1">{{ time1 }}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>
<div class="row">
    <div class="col-md-2">
        <mat-form-field>
            <!-- DROP DOWN FOR PREVIOUS TIME PERIOD -->
            <mat-select placeholder="Previous Time Period" multiple name="select2" [(ngModel)]="timeSelection2">
                <mat-option *ngFor="let time2 of resTimePeriodData" [value]="time2" [disabled]="isDisable(time2)">{{ time2 }}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>

TS:

isDisable(obj) {
   var index = this.selected.indexOf(obj);
   if (index == -1) {
      return false;
   }
   else {
     return true;
   }
}

You can also try to improve the existing code!

Stackblitz

user_71247610

The value is being interpereted as a number. You can compare the time options in the disabled attribute using to string:

<mat-option [disabled]="time2.toString() === timeSelection1.toString()" *ngFor="
  let time2 of resTimePeriodData
 " [value]="time2">{{ time2 }}</mat-option>

I would recommend using numbers only though.

user_108894440
Related