Event only returns first letter of input angular

Issue

Question: why is the event only returning the first letter of input form.

Background: There is a input form in which a user can type a string into. The method I created that handles the event is only capturing the first letter entered. So for example someone types in "hello" and the method will fire and event handler in this order 'h' 'e' 'l' 'l' 'o'

I have tried to capture the value and push it to array but in every attempt I have not achieved the intended outcome.

Intended outcome: I would like to capture the letters in a method that would dynamically store it in an array, so if someone deletes a character that would be reflected.

The template

<mat-form-field appearance="outline" class="name-search">
    <mat-label>Search Stands</mat-label>
    <button mat-icon-button matSuffix>
        <mat-icon>search</mat-icon>
    </button>
    <input matInput type="text" (input)="onSearchTextChanged($event)" />
</mat-form-field>

The logic

export interface Filter {
    query: string
    groupBy: GroupBy
}

interface GroupBy {
    field: string
    value: string
}

@Component({
    selector: 'app-searchbar',
    templateUrl: './searchbar.component.html',
    styleUrls: ['./searchbar.component.sass'],
})
    export class SearchbarComponent implements OnInit {

  
    @Output() searchTextChanged: EventEmitter<Filter> = new EventEmitter()


    filter = {
        query: '',
        groupBy: { field: 'status', value: this.statusGroupBy },
    }

    constructor() {}

    ngOnInit(): void {}


    onSearchTextChanged(event) {
        const { data } = event

        const filter: Filter = {
            ...this.filter,
            query: data,
        }
        this.searchTextChanged.emit(filter)
    }
}

Solution

I ended up binding the input to a FormControl. Link to form Control here.

Template

<mat-form-field appearance="outline" class="name-search">
    <mat-label>Search Stands</mat-label>
    <button mat-icon-button matSuffix>
        <mat-icon>search</mat-icon>
    </button>
    <input matInput [formControl]="searchControl" />
</mat-form-field>

logic

export class StandsSearchbarComponent implements OnInit {
    @Output() filterUpdate: EventEmitter<Filter> = new EventEmitter()


    searchControl = new FormControl()
    querySubscription = this.searchControl.valueChanges
        .pipe(
            distinctUntilChanged(),
            startWith('')
        )
        .subscribe((query) => this.onSearchTextChanged(query))

    filter = {
        query: '',
        groupBy: { field: 'status', value: this.statusGroupBy },
    }

    constructor() {}

    ngOnInit(): void {}


    onSearchTextChanged(query: string) {
        const filter: Filter = {
            ...this.filter,
            query: query,
        }
        this.filterUpdate.emit(filter)
    }
}

Answered By - Mark Wild