<igx-select [(ngModel)]="contractNumber" name="contractNumber" formControlName="contractId" (selectionChanging)="handleContractSelectionChanged($event)">

                    <label igxLabel for="contractId">Contract Number</label>

                    <igx-suffix *ngIf="contractNumber">

                        <igx-icon (click)="clearContractNumber($event)">clear</igx-icon>

                    </igx-suffix>

                    <igx-select-item *ngFor="let item of contractList" [value]="item.commonCodeId">

                        {{item.code}}

                    </igx-select-item>

                </igx-select>

  handleContractSelectionChanged(event): void {

    if (!Utils.isBlank(event.newSelection.value)) {

      let index = this.contractList.findIndex(x => x.commonCodeId == event.newSelection.value);   

  }

   clearContractNumber(event: MouseEvent) {

    this.contractNumber = null;

    this.filterpbpList = [];

    // prevent the drop-down container from opening

    event.stopPropagation();

    this.tPbpIDs = [];

  }