how to remove chart completely in Angular - html

Question

I have multiple charts in my home page and I have a search box to filter them by chart name.
when I filter particular chart I can delete that chart while it's begin filtered and it disappear from UI but some reason the chart that I just deleted still appear in the home page with the rest of the other charts when I unfiltered/removed all the text in the search box.
It got deleted in the backend but the deleted chart is still appearing in the front end. Also for some reason I can still search it again the one that I just deleted but this time I can not delete it again since it throw 404.
It only disappear completely when I refresh the browser. Any suggestion on how I can make the chart to disappear even after I unfiltered in the search box.
HTML
//Imported this component to display a list of chart
<ng-container *ngFor="let chart of charts">
<mc-chart-list [chart]="chart" [wsType]="workspace.type" (removeFromList)="onRemoveFromList($event)"></mc-chart-list>
</ng-container>
//I use this searchbar to filter by the name of the chart
<input class="input" matInput name="query" [formControl]="query" placeholder="Filter Workspace">
TS
#Input() chart: Chart;
workspace: Workspace;
private death$: Subject<void> = new Subject();
query: FormControl = new FormControl();
charts: Chart[] = [];
searchText: string;
ngOnInit(): void {
this.activatedRoute.paramMap.pipe(takeUntil(this.death$)).subscribe((paramMap) => {
const guid = paramMap.get('guid');
if (guid) {
this.workspaceService.getWorkspace(guid, this.isPublished).subscribe(ws => {
this.workspace = ws;
}, () => this.loading = false);
}
})
//For search bar
this.query.valueChanges
.pipe(takeUntil(this.death$))
.subscribe((value: string) => {
this.search(value);
});
}
search(searchText: string){
// reset
searchText = searchText.toLowerCase();
if (!searchText || searchText.length == 0) {
this.charts = this.workspace.charts;
}
// search
else {
this.charts = this.charts.filter(chart => chart.name.toLowerCase().indexOf(searchText) >= 0);
}
}
onRemoveFromList(id: number) {
const index = this.charts.findIndex(e => e.id === id);
if (index >= 0) {
this.charts.splice(index, 1);
}
I can do this.ngOnIt() inside the search funtion but I don't think that will be best way to do it so I'll be really appreciated if someone can help me fix this.

Answer 1

your workspace.charts have the all the charts.you are assigning value for charts from workspace.charts.In your onRemoveFromList function you only remove it from chart.but workspace.charts still have that removed value.then whenever you reset the search the removed values going in to the charts that is why you see those removed charts.
Solution: in your onRemoveFromList remove the chart from workspace.charts too.
onRemoveFromList(id: number) {
const index = this.charts.findIndex(e => e.id === id);
if (index >= 0) {
this.charts.splice(index, 1);
this.workspace.charts = this.workspace.charts.filter(e => e.id !== id);
}