How to disable already selected dropdown value in Angular

Question

I have a dropdown which contains the following values, Customer name - Group Name :

I am quite new to Angular.
What I am looking to do is once I select the "Work-Testing" option from the dropdown, the next time it should get disabled. Also, the other options showing as Testing should also get disabled. For now, the entire dropdown is getting disabled.

By the way, I am using Angular 6.

customer.html
=============
<form [formGroup]="customerForm" class="add-customer add-dynamic-customer">
    <div class="col-md-6">
          <span class="ui-float-label marB-0">
            <p-dropdown class="cusPdropDown" [options]="existingGroups" width="auto" filter="true" required="true" formControlName="custGrpDropDown"
            (onChange)="changeCustomerGroup($event)" [class.disabled]="(customerForm.get('customerID').invalid)">
              <ng-template let-item pTemplate="item">
                <span style="vertical-align: middle">{{item.label}}</span>
              </ng-template>
            </p-dropdown>
            <label for="float-input">{{ 'Existing Customer Groups' | translate}}
              <!-- <span class="redstar">*</span> -->
            </label>
          </span>
    </div>
</form>


customer.component.ts :
======================   

allGroup: FormArray;
existingCustGrpSelected: boolean;


initForm() {
    this.customerForm = this.fb.group({
      'customerID': ['', Validators.required],
      'productID': [''],
      'projectID': ['', Validators.required],
      // 'customerName': [''],
      'type': [''],
      allGroup: this.fb.array([]),
      
      ** this code disables the dropdown completely**
      custGrpDropDown :[
         { 
           value: '', disabled: !this.existingCustGrpSelected
         }
      ]
    });
    
    this.spinner.hide();
}


 changeCustomerGroup(event) {
    let ccdGroupId;
    ccdGroupId=parseInt(event.value);
    console.log('hello :::', ccdGroupId)

    let custName = event.originalEvent.target.innerText.split("-")[0];
    console.log('custName :::', custName) // prints "Work"

    let gName = event.originalEvent.target.innerText.split("-")[1];
    console.log('gName :::', gName)  // prints "Testing"

    this.ccdService.getExistingGroup(ccdGroupId,custName).subscribe((ccdG:CCDCustomerGroup) =>
    {
      console.log("ccdG label :::", ccdG.label, "---- ccdG name ---- ", ccdG.name)
      this.addGroupForEdit(ccdG.label,ccdG.name,ccdG.email,ccdG.priority,ccdGroupId);
    });
  }
  
  addGroupForEdit(groupName: string, name?, email?, priority?,ccdGroupId?) {
    this.allGroup = this.customerForm.get('allGroup') as FormArray;
    console.log("groupName here ::::" , groupName)
    this.allGroup.push(this.createGroupForEdit(groupName.split(' - ')[1], name, email, priority ,ccdGroupId));
    console.log("this.allGroup here :::" , this.allGroup)
    this.updateFlag(true, groupName.split(' - ')[1]);
    this.spinner.hide();
  }
  
   createGroupForEdit(labelName: string, teamName: string, email, priority , ccdGroupId): FormGroup {
    return this.fb.group({
      'label': [labelName],
      'name': [teamName],
      'email': [email, Validators.required],
      'priority': [priority],
      'ccdGroupId':[ccdGroupId]
    });
  }

Answer 1

What you need to add one more property isDisabled to your array like:

yourArray.map(x => ({
    ...x,
    isDisabled: [conditional code to match]
}));

<options *ngFor="let item in yourArray" 
         [disabled]="item.isDisabled">...</options>