Category / Section
How to handle errors in Angular Grid component?
1 min read
When any Grid component action gets fail, you can handle the Error by using the `actionFailure` event of Grid component. The exceptions belong to Angular application can be handled through ‘ErrorHandler’ class.
The following code example demonstrates how to handle the errors in Essential JavaScript 2 Angular Grid component.
ActionFailure
Render the Grid with the actionFailure event. Here the given ‘format’ property for the ‘OrderDate’ column is invalid.
HTML
<ejs-grid #grid [dataSource]="data" (actionFailure)="fail($event)" allowPaging=true width="auto" height="300px"> <e-columns> <e-column field='OrderID' headerText='Order ID' textAlign='Right'></e-column> <e-column field='CustomerID' headerText='Customer ID'></e-column> <e-column field='OrderDate' headerText='Order Date' format='abc'></e-column> </e-columns> </ejs-grid>
Handle the error in the actionFailure event
Component.ts
export class AppComponent implements OnInit {
public data: Object[];
ngOnInit(): void {
this.data = data;
}
fail(e: FailureEventArgs){
// handle the error.
console.log(e.error);
}
}
Console Action
|
ErrorHandler
Define the custom error handler with ErrorHandler class.
Module.ts
class MyErrorHandler implements ErrorHandler {
handleError(error) {
// do something with the exception
console.log(error);
}
}
@NgModule({
providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
})
class MyModule {}
Console Output
|
