how to disable/enable dropdown angular 4

Here is example with reactive forms as answer with template-driven forms is already posted:

<form [formGroup]="form">
  <select name="field1" formControlName="field1">
    <option *ngFor="let value of [1, 2, 3]" [value]="value">{{value}}</option>
  </select>
</form>

<form [formGroup]="form">
  <select name="field1" formControlName="field2">
    <option *ngFor="let value of [1, 2, 3]" [value]="value">{{value}}</option>
  </select>
</form>

TS:

  form;

  ngOnInit(): void {
    this.form = new FormGroup({
      field1: new FormControl(),
      field2: new FormControl()
    });

    this.form.controls.field1.valueChanges.subscribe(value => {
      value === '2' ? this.form.controls.field2.disable() : this.form.controls.field2.enable();
    });
  }

We can do this by using 2-way data binding. First, we bind the first <select> element to data1. This will contain the value data.code of the selected option from the first element.

Let's assume that we will disable the second <select> element if the user selects the option with the data.code value of '1'.

Then, on our second <select> element, we bind the disabled attribute to the condition, such that the disabled arribute will be true when data1 === '1'.

<select class="custom-select" [(ngModel)]="data1" id="dropdown1">
  <option value="" hidden>Select</option>
  <option *ngFor="let data of datay" [ngValue]="data.code"> 
    {{data.name}} 
  </option>
</select>

<select class="custom-select" [(ngModel)]="data2" [disabled]="data1==='1'">
  <option value="" hidden>Select</option>
  <option *ngFor="let data of datay2" [ngValue]="data.code"> 
    {{data.name}} 
  </option>
</select>

Give this a try:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  selectedFruit = null;
  fruits = [
    { name: 'Apple', code: 'Apple' },
    { name: 'Mango', code: 'Mango' },
    { name: 'Orange', code: 'Orange' },
    { name: 'Grapes', code: 'Grapes' },
    { name: 'Peach', code: 'Peach' },
  ];

  models = [
    { name: 'iPhone XS Max', code: 'iPhone XS Max' },
    { name: 'iPhone XS', code: 'iPhone XS' },
    { name: 'iPhone X', code: 'iPhone X' },
    { name: 'iPhone 8 Plus', code: 'iPhone 8 Plus' },
    { name: 'iPhone 8', code: 'iPhone 8' },
  ]
}

And in your template:

<h2>Fruits</h2>
<select class="custom-select" id="abc" [(ngModel)]="selectedFruit">
  <option value="null" hidden>Select</option>
  <option *ngFor="let fruit of fruits" [ngValue]="fruit.code"> {{fruit.name}}</option>
</select>

<h2>Phone Models</h2>
<select class="custom-select" id="abc" [disabled]="selectedFruit !== 'Apple'">
  <option value="" hidden>Select</option>
  <option *ngFor="let model of models" [ngValue]="model.code"> {{model.name}}</option>
</select>

Here's a Working Sample StackBlitz for your ref.

It depends on if the dropdown is connected to a FormGroup.

If yes, simply disable the FormControl with formGroup.get('yourPath').disable({onlySelf: true});

If not, you can also just use the [disabled]="isFieldDisabled" property on the <select> property.

If you use a FormGroup with your DropDownField but choose to disable the DropDownField via [disabled]="...", then you will get much yellow text in your console.