how to print only error message in Angular - html

Question

I'm trying to find out a way to print only the "message" part from my api call error but not sure how to get only that part so I would be really appreciated if I can get any suggestion or help.
So this is what it show me in the network tab when there is error in the api call (pic)
saveChartClick(err: any) {
// update the chart data here
if(!this.isTextChart && !this.isFigure && !this.isGrid){
this.chartService.updateChart(this.chart).pipe(takeUntil(this.death$)).subscribe((updated) => {
if(updated) {
this.chart = updated;
this.snackbar.open("Chart has been updated.", " ", {duration: 2500});
this.store.dispatch(updateChart({chart: this.chart}));
} else {
this.snackbar.open(err.message, "close ", { duration: 2500 });
}
}, err => {
this.snackbar.open(err.message, "close ", { duration: 2500 });
})
}
else{
// save the new data here
this.store.dispatch(saveChartData({ guid: this.chart.guid, data: this.chartData }));
}
}
Right now it showing me this, which is not what I want to display since it doesn't really tell what is the error.
Error Message it showing me right now (pic)
This is hard coded but this one example of what I want to display (pic)
The errors are handle in the backend and I can get different error message sometime so I don't want to hard code it.

Answer 1

In Angular's HttpErrorResponse object, this is how the message property looks like. What you want isn't
this.snackbar.open(err.message, "close ", { duration: 2500 });
but
this.snackbar.open(err.error.message, "close ", { duration: 2500 });
Or maybe, to be on the safe side (error can be null),
const errorMessage = err.error ? err.error.message : err.message;
this.snackbar.open(errorMessage, "close ", { duration: 2500 });