pop notification when clicked on disable option in angular

Question

i am trying to pop a notification (alert) when i click on disable option.

First i have this component.html:

      <div class="col-lg-6 col-md-6">
        <div class="from-group">
          <label for="vehicle"> Vehicle </label>
          <select
            type="text"
            class="form-control"
            formControlName="vehicle_index"
            (click)="showAlert()"

           >
           <option value="">--Select a Vehicle--</option>
            <option
              *ngFor="let vehicle of vehicles; let i = index"
              value="{{ i }}"
              [disabled]="vehicle.id == 8"
            >
               {{vehicle.model}} - {{vehicle.plate_number}}
            </option>
          </select>
        </div>
      </div>

As we see i disable from option when id = 8.

function showAlert() :

  showAlert(){
    if (this.plannedRouteForm.get("vehicle_index").value.disabled == true) {
      alert(" Disabled");
  }
  }

what i am thinking about is when i click on value in option i check if is disable? then show alert.

But unfortunately NOT WORK.

What i do wrong?

Answer 1

mat select item disabled can't clicked...

material.angular.io/components/select/overview

Try to add a custom CSS, you can change [disabled] with [class.nameyourclass]="vehicle.id ==8" try to add a background red only for test.