NgHttpNotifier
Library for handeling Http reponse .
Project Goals:
-
configurable Notification messages per(uri, method, status) can use server response each notification has 4 basic Severity levels
- info
- success
- warning
- error
use
assets/config/http-notification-config.json
file to configure notification messages no need to redeploy if you want to change some message.
- Plugable Toastr providers if any advanced Toastr exists it can be used and also can be configured
- UI consistency
if you are using ui libraries like prime - boot strap- material that has their own toastr
just just provide
ToastrService
implementation that uses the toolkit toastr.
- for i18n just provide Toastr that implements NotifierToastr interface that has translation cabability
- Has Default Impel(provider)
its not good and not recommended its alert
alret()
. just use your favorite toastr library or what matches UI library you use ex angular material, primeng
Repositories
contents
Getting Started
first create assets/config/http-notification-config.json
file make sure of correct path and file name
add some configurations
its an object with property config witch is a list of endpoint configs
{
"config": [
{
"url": "",
"method": "",
"messages": [
{
"message": "success",
"status": 200,
"severity": "success",
"useResponseBody": true
}
]
}
]
}
the above configuration matches any method any url with status 200
for the default impl add the module to your app imports its ugly not recommended
NgHttpNotifierModule.forRoot()
Use ngx-toastr for notification
install ngx-toastr and its dependencies
create new module called app-notifier.module.ts it will provide toastr service and configurations
@NgModule({
declarations: [],
imports: [
CommonModule,
BrowserAnimationsModule,
ToastrModule.forRoot({
timeOut: 10000,
positionClass: 'toast-bottom-right',
preventDuplicates: true,
}),
],
})
export class AppNotifierModule {}
create toaster provider which extends ToastrService
from "ng-http-notifier"
import { Injectable } from "@angular/core";
import { ToastrService } from "ng-http-notifier";
import { ToastrService as NgXToasterService} from 'ngx-toastr';
@Injectable()
export class NgxToastrProviderService extends ToastrService{
constructor(private ngXToasterService: NgXToasterService){
super();
}
override info(message: string, options?: any): void {
this.ngXToasterService.info(message);
}
override success(message: string, options?: any): void {
this.ngXToasterService.success(message);
}
override warning(message: string, options: any): void {
this.ngXToasterService.warning(message);
}
override error(message: string, options?: any): void {
this.ngXToasterService.error(message);
}
}
configure NgHttpNotifierModule
to use NgxToastrProviderService
@NgModule({
declarations: [],
imports: [
CommonModule,
BrowserAnimationsModule,
ToastrModule.forRoot({
timeOut: 10000,
positionClass: 'toast-bottom-right',
preventDuplicates: true,
}),
NgHttpNotifierModule.forRoot(NgxToastrProviderService), // confiured toastr provider
],
})
export class AppNotifierModule {}
now you provide any impelmentation not just ngx-toastr use the same way to enhance the functionality example translation just configure the module with provider that has translation capabilities.
Interfaces
http-notification-config.json
will be loaded as an instance of HttpNotificationConfig
and this is the JSON
configuration file structure.
interface HttpNotificationConfig{
config: EndpointNotificationConfig[];
}
interface EndpointNotificationConfig{
method: string;
url: string;
messages: NotificationMessageConfig[];
}
interface NotificationMessageConfig{
status: string; // http status codes
message: string;
useResponseBody?: boolean; // to use return body of server response
severity: 'info'|'success'|'warrning'|'error';
options?: {[x:string]: any}
}
abstract class ToastrService{
abstract info(message: string , options?:any):void;
abstract success(message: string , options?:any):void;
abstract warning(message: string , options:any):void;
abstract error(message: string , options?:any):void;
}
// default provider
@Injectable()
export class AlertToastrProvider extends ToastrService{
override info(message: string, options?: any): void {
this.showAlert(message);
}
override success(message: string, options?: any): void {
this.showAlert(message);
}
override warning(message: string, options: any): void {
this.showAlert(message);
}
override error(message: string, options?: any): void {
this.showAlert(message);
}
private showAlert(message: string):void{
console.log("showAlert", message);
alert(message);
}
}