title: Disable selected option from drop down One to drop down Two in angular 2 - Material
body: <pre><code>&lt;div class="row no-overflow"&gt;
      &lt;div class="col-md-1 window-pad-height"&gt;
          &lt;mat-label&gt; Opportunity 1: &lt;/mat-label&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2 no-overflow"&gt;
          &lt;mat-form-field class="no-overflow"&gt;
              &lt;mat-select placeholder="select" [(ngModel)]="oppurtunityOne" [disabled]="selectedRankingCriteria.viewValue!=='Custom'"&gt;
                  &lt;mat-option *ngFor="let op1 of OppurtunityList" [value]="op1"&gt;
                      {{op1.viewValue}}
                  &lt;/mat-option&gt;
              &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row no-overflow"&gt;
      &lt;div class="col-md-1 window-pad-height"&gt;
          &lt;mat-label&gt; Opportunity 2: &lt;/mat-label&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2 no-overflow"&gt;
          &lt;mat-form-field class="no-overflow"&gt;
              &lt;mat-select placeholder="select" [(ngModel)]="oppurtinityTwo" [disabled]="selectedRankingCriteria.viewValue!=='Custom'"&gt;
                  &lt;mat-option *ngFor="let op of OppurtunityList" [value]="op" [disabled]="oppurtunityOne.viewValue"&gt;
  
                      {{op.viewValue}}
                  &lt;/mat-option&gt;
              &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="row no-overflow"&gt;
      &lt;div class="col-md-1 window-pad-height"&gt;
          &lt;mat-label&gt; Opportunity 3: &lt;/mat-label&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2 no-overflow"&gt;
          &lt;mat-form-field class="no-overflow"&gt;
              &lt;mat-select placeholder="select" [disabled]="selectedRankingCriteria.viewValue!=='Custom'"&gt;
                  &lt;mat-option *ngFor="let op3 of OppurtunityList" [value]="op3"&gt;
                      {{op3.viewValue}}
                  &lt;/mat-option&gt;
              &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="row no-overflow"&gt;
      &lt;div class="col-md-1 window-pad-height"&gt;
          &lt;mat-label&gt; Opportunity 4: &lt;/mat-label&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2 no-overflow"&gt;
          &lt;mat-form-field class="no-overflow"&gt;
              &lt;mat-select placeholder="select" [disabled]="selectedRankingCriteria.viewValue!=='Custom'"&gt;
                  &lt;mat-option *ngFor="let op4 of OppurtunityList" [value]="op4"&gt;
                      {{op4.viewValue}}
                  &lt;/mat-option&gt;
              &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;
          &lt;button mat-raised-button color="primary"&gt;View&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JSON DATA</p>
  
  <pre><code>    OppurtunityList: any[] = [
      { value: 'col-1', viewValue: 'datatoDisplay1' },
      { value: 'col-2', viewValue: 'datatoDisplay2' },
      { value: 'col-3', viewValue: 'datatoDisplay3' },
      { value: 'col-4', viewValue: 'datatoDisplay4' },
      { value: 'col-5', viewValue: 'datatoDisplay5' },
      { value: 'col-6', viewValue: 'datatoDisplay6' },
      { value: 'col-7', viewValue: 'datatoDisplay7' },
      { value: 'col-8', viewValue: 'datatoDisplay8' },
      { value: 'col-9', viewValue: 'datatoDisplay9' }
    ];
  </code></pre>
  
  <p>How to disabled selected option from drop down using typescript ?<br>
  What logic should I put here, I dont know how to disabled the selected option.<br>
  Is it possible to handle using ngModel?</p>