Angular Material=> Mat-chip- Autocomplete(input) on selecting dropdown through space key

Question

How to populate mat-chip onkeypress(spacebar) when we select mat-option by going on option through arrow key and pressing space key(32).

However, it is working fine when we select dropdownmenu by going to option through arrowkey and then pressing enter key(keycode- 13) but not working on similarly on space key(keycode -32).

Here, is stackblitz link:- https://stackblitz.com/edit/angular-ytk8qk-feaqaw?file=app/chips-autocomplete-example.html

1) How to add select dropdown option by going through
  arrowkey(not mouse) and populating selected option using spacebar(keycode- 32).

2)How to remove option from dropdown that is already populated or used.

3)Show dropdown only when user enters some charcter in input text else show 
  class="info"` text only in dropdown, when no input text is there and no 
 option in dropdown matches enter charcters in input.

Note:- The user can create chips by typing in input and then press ENTER or SPACE key (separator key) for creating chips.

chip.component.ts

export class ChipsAutocompleteExample {
  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  separatorKeysCodes: number[] = [ENTER,SPACE, COMMA];
  fruitCtrl = new FormControl();
  filteredFruits: Observable<string[]>;
  fruits: string[] = ['Lemon'];
  allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];

  @ViewChild('fruitInput') fruitInput: ElementRef<HTMLInputElement>;
  @ViewChild('auto') matAutocomplete: MatAutocomplete;

  constructor() {
    this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
        startWith(null),
        map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
  }

  add(event: MatChipInputEvent): void {
    // Add fruit only when MatAutocomplete is not open
    // To make sure this does not conflict with OptionSelected Event
    if (!this.matAutocomplete.isOpen) {
      const input = event.input;
      const value = event.value;

      // Add our fruit
      if ((value || '').trim()) {
        this.fruits.push(value.trim());
      }

      // Reset the input value
      if (input) {
        input.value = '';
      }

      this.fruitCtrl.setValue(null);
    }
  }

  remove(fruit: string): void {
    const index = this.fruits.indexOf(fruit);

    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }

  selected(event: MatAutocompleteSelectedEvent): void {
    this.fruits.push(event.option.viewValue);
    this.fruitInput.nativeElement.value = '';
    this.fruitCtrl.setValue(null);
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0);
  }
}

Answer 1

1) How to add select dropdown option by going through arrowkey(not mouse) and populating selected option using spacebar(keycode- 32).

1. Add properties to hold the selected fruit and the currently displayed fruits (filtered ones):

   selectedFruit = -1; displayedFruits = [];

2. After view init, subscribe to changes on keyManager to get the selected option and to changes on filtered fruits to get the filtered list and store it on displayedFruits :

ngAfterViewInit() {
  this.matAutocomplete._keyManager.change.subscribe((index) => {
    if (index >= 0) {
      this.selectedFruit = index;
    }
  })
  this.filteredFruits.subscribe((filteredFruits) => {
    this.displayedFruits = filteredFruits;
  });
}

3. On add method, include an else clause to include the fruit and reset selectedFruit to -1:

add(event: MatChipInputEvent): void {
   // Add fruit only when MatAutocomplete is not open
   // To make sure this does not conflict with OptionSelected Event
   if (!this.matAutocomplete.isOpen) {
     // ...
   } else {
     if (this.selectedFruit >= 0) {
       this.fruits.push(this.displayedFruits[this.selectedFruit])
       this.fruitInput.nativeElement.value = '';
       this.fruitCtrl.setValue(null);
     } else if (this.fruitInput.nativeElement.value !== '' && this.displayedFruits.length === 0) {
       this.fruits.push(this.fruitInput.nativeElement.value)
       this.fruitInput.nativeElement.value = '';
       this.fruitCtrl.setValue(null);
     }
   }
   this.selectedFruit = -1;
}    

2)How to remove option from dropdown that is already populated or used.

Enhance the filter to also check for already used fruit:

private _filter(value: string): string[] {
   const filterValue = value.toLowerCase();
   return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0 && !this.fruits.find( existingFruit => existingFruit === fruit ));
}  

3)Show dropdown only when user enters some charcter in input text else show class="info"` text only in dropdown, when no input text is there and no option in dropdown matches enter charcters in input.

If I got it right, you may do this:

1. Bind to input focus event to show autocomplete when input is focused

<input
placeholder="New fruit..."
#fruitInput
(focus)="matAutocomplete.showPanel = true"
[formControl]="fruitCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">

2. Modify your autocomplete template to show an extra class="info" option when no text is entered or no value matches:

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
  <mat-option class="info" *ngIf="displayedFruits.length === 0 || fruitInput.value === ''" disabled>Test</mat-option>
  <ng-container *ngIf="fruitInput.value !== ''">
    <mat-option *ngFor="let fruit of displayedFruits" [value]="fruit">
      {{fruit}}
    </mat-option>
  </ng-container>
</mat-autocomplete>

Working stackblitz here