How to handle exceptions when using routerLink in Angular

Question

I have a component with routerLink, and the routing module has a route. The ngOnInit calls a service

this.myService.create(aId).subscribe(
data => { this.ourdata = data;
this.dataSource = new MatTableDataSource<test>(data.some);
},
err => console.error(err),
() => console.log('Done '+ JSON.stringify(this.ourdata))
);

and html shows spinner till data is received

<div *ngif="!ourdata">
<mat-spinner></mat-spinner>
</div>
<div *ngif="ourdata" class="centering-div">
...
</div>

In case I get an exception, how can I show a dialog and stop the spinner? I am looking for change in html template

Answer 1

You can use the err callback of the subscribe.

error: boolean;
.....
this.myService.create(aId).subscribe(
data => { 
   this.ourdata = data;
   this.error = false;
   this.dataSource = new MatTableDataSource<test>(data.some);
},
err => { 
   console.error(err); 
   this.error = true;
   // call method that shows the dialog
   // or show the dialog in the HTML based on the value of error being true
}
() => console.log('Done '+ JSON.stringify(this.ourdata))
);

<div *ngif="!ourdata && !error">
<mat-spinner></mat-spinner>
</div>
<div *ngif="ourdata" class="centering-div">
...
</div>