How to pass argument in Angular

Question

I'm working with mat-autocomplete and some reason my function is not working when I select the item from drop down list so I think I need to pass add() function in my select but I'm getting that it's "expected 1 argument but got 0". I'm not really sure what to pass.

Any suggestion,

  add(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;
    this.tagService.addTag(this.workspace.guid, 'workspace', value).subscribe((tag) => console.log("added", tag));
    if ((value || '').trim()) {
      this.superTags.push({tag: value.trim(), type: TagType.super});
    }
    if (input) {
      input.value = '';
    }
    this.tagCtrl.setValue(null);
  }

 selected(event: MatAutocompleteSelectedEvent): void {
    const tag = {tag: event.option.viewValue, type: TagType.super};
    this.superTags.push(tag);
    this.add()             //I'm getting error that it expected 1 argument

    if(this.input){
      this.input.nativeElement.value = "";
    }
    this.tagCtrl.setValue(null);
    var index = this.allSuperTagNames.indexOf(tag.tag);
    this.allSuperTagNames.splice(index, 1);
    this.mapper();
  }

HTML

    <mat-form-field class="form" appearance="fill">
        <mat-label>Select a Super Tag</mat-label>
        <mat-chip-list #chipList>
            <div>
                <mat-chip *ngFor="let superTag of superTags" [selectable]="selectable" [removable]="removable"
                    (removed)="remove(superTag)">
                    {{superTag.tag}}
                    <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                </mat-chip>
            </div>
            <div>
                <input matInput #input [formControl]="tagCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="add($event)">
            </div>
        </mat-chip-list>
        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
            <mat-option *ngFor="let tag of filteredSuperTags | async" [value]="tag">
                {{tag}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>

Answer 1

you need to pass your event to the add() function :

 selected(event: MatAutocompleteSelectedEvent): void {
    const tag = {tag: event.option.viewValue, type: TagType.super};
    this.superTags.push(tag);
    this.add(event)             //pass the event 

    if(this.input){
      this.input.nativeElement.value = "";
    }
    this.tagCtrl.setValue(null);
    var index = this.allSuperTagNames.indexOf(tag.tag);
    this.allSuperTagNames.splice(index, 1);
    this.mapper();
  }

to check declare the add function like this :

 add(event){
    const input = event.input;
    const value = event.value;
    this.tagService.addTag(this.workspace.guid, 'workspace', value).subscribe((tag) => console.log("added", tag));
    if ((value || '').trim()) {
      this.superTags.push({tag: value.trim(), type: TagType.super});
    }
    if (input) {
      input.value = '';
    }
    this.tagCtrl.setValue(null);
  }