Filtering asynchronous data and reflecting data into table

Context

I am creating a web application in Angular 11 and I am using asynchronous data received from a specific back-end server. I am receiving the data from the back-end and I am subscribing to it in order for it to reflect into my table view. Now I want to implement a filter feature that filters based on a certain predicate (in this case row name).

Problem statement

There are issues when I try to make changes in the filtered list, once the filtering is done and I remove the predicate in the text input form, the table is being repopulated by the "this.ngOnInit()" function. It does not incorporate any changes made to the object, as it is being reloaded from the back end server again.

Source code of the problem:

components: Comp[] = [];
searchComponent: any

ngOnInit(): void {
   this.load();
}

private load(): void {
    this.componentService.getComponents().subscribe(component => {
        this.components = component;
    }, error => {
    console.error(`${error}`);
    });
}

searchAvailable(): void {
    if (this.searchComponent === '') {
        this.ngOnInit();
    } else {
        this.components = this.components.filter(comp => {
             return comp.Komponente.toLocaleLowerCase().match(this.searchComponent.toLocaleLowerCase());
    }
}

Presentation code:

<input type="text" class="form-control" placeholder="Filter"
           [(ngModel)]="searchComponent"
           (ngModelChange)="searchAvailable()" #filter>

Table filling:

<tr *ngFor="let component of components>

Result I am looking for:

My goal is to be able to filter the observable list based on a given predicate, make some changes in the received list and incorporate that back into the original list in order to view the list in the table.

What would be an approach to fix this and persist the correct data into the table? Thanks beforehand!