how to select from drop down list in Angular

Question

I have drop down list showing existing tag/chip that all user created in the past but I'm not sure why when I select one from drop down list, the item is not showing in my input field (just like Chart tag right now). I'm able create chip/tags by inputting text and pressing enter but I also want the feature where I user can just select a tags that have been created by someone from drop down list.

Chart tag is example that I created by entering it (not selected from the list)

Will be really appreciated if anyone can give me suggestion or help me.

TS

  selected(event: MatAutocompleteSelectedEvent): void {
    const tag = {tag: event.option.viewValue, type: TagType.user};
    this.normalTags.push(tag);
    if(this.input){
      this.input.nativeElement.value = "";
    }
    this.tagCtrl2.setValue(null);
    //remove the selected one from the option list
    var index = this.allTagNames.indexOf(tag.tag);
    this.allTagNames.splice(index, 1);
    this.mapper();
  }

  mapper(){
    this.filteredTags = this.tagCtrl2.valueChanges.pipe(
      startWith(null),
      map((tag: string | null) => tag ? this._filter(tag) : this.allTagNames.slice()))
  }

HTML

    <mat-form-field class="demo-chip-list" appearance="fill">
        <mat-chip-list #chipList>
            <mat-chip  *ngFor="let chip of chips" [selectable]="selectable" [removable]="removable" (removed)="removeTags(chip)">
                {{chip.tag}}
                <mat-icon matChipRemove *ngIf="chip.pending !== true && removable" matTooltip="Remove a tag">cancel</mat-icon>
                <mat-spinner *ngIf="chip.pending === true" [diameter]="16" mode="indeterminate"></mat-spinner>
            </mat-chip>

            <input matInput  #input [(ngModel)]="tagIn" placeholder="Select or Create a tag" [formControl]="tagCtrl2" [matAutocomplete]="auto"
                (focusout)="hideTagInput()" (keyup.enter)="addTag()"(keyup.escape)="hideTagInput()"
                (keydown.backspace)="$event.stopPropagation();" (keydown.space)="$event.stopPropagation();" [matChipInputFor]="chipList" />
        </mat-chip-list>

        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
            <mat-option *ngFor="let tag of filteredTags | async" [value]="tag">
                {{tag}}
            </mat-option>
        </mat-autocomplete>

    </mat-form-field>

Answer 1

First of all, it looks like that you are using both Reactive Forms and Template Drive Forms in the same input. If it is not a requirement, I would consider to remove and leave this way (Reactive forms):

<input matInput placeholder="Select or Create a tag" [formControl]="tagCtrl2" 
[matAutocomplete]="auto" (focusout)="hideTagInput()" (keyup.enter)="addTag()"
(keyup.escape)="hideTagInput()" (keydown.backspace)="$event.stopPropagation();" 
(keydown.space)="$event.stopPropagation();" [matChipInputFor]="chipList" />

(Will need to refactor you component.ts if you change)

But answering your question:

On the selected function you are not adding the tag to the chips array, and the chips array is the one that you are using to show the tags, so you will need to change to:

selected(event: MatAutocompleteSelectedEvent) : void {
    const tag = {tag: event.option.viewValue, type: TagType.user};
    this.normalTags.push(tag);
    this.chips.push(tag); <---- new line
    if(this.input){
      this.input.nativeElement.value = "";
    }
    this.tagCtrl2.setValue(null);
    var index = this.allTagNames.indexOf(tag.tag);
    this.allTagNames.splice(index, 1);
    this.mapper();
  }