Usiung a type instead of a header in flashmessages
This commit is contained in:
@@ -1,5 +1,18 @@
|
|||||||
<ngb-toast
|
<ngb-toast
|
||||||
*ngFor="let flashmessage of flashmessagesService.toasts"
|
*ngFor="let flashmessage of flashmessagesService.toasts"
|
||||||
[header]="flashmessage.header" [autohide]="true" [delay]="flashmessage.delay || 5000"
|
[header]="flashmessage.type" [autohide]="true" [delay]="flashmessage.delay || 1500"
|
||||||
(hiddden)="flashmessagesService.remove(flashmessage)"
|
(hiddden)="flashmessagesService.remove(flashmessage)"
|
||||||
>{{flashmessage.body}}</ngb-toast>
|
>
|
||||||
|
<ng-container [ngSwitch]="flashmessage.type">
|
||||||
|
<div *ngSwitchCase="'Success'" class="alert alert-success" role="alert">
|
||||||
|
{{flashmessage.body}}
|
||||||
|
</div>
|
||||||
|
<div *ngSwitchCase="'Info'" class="alert alert-primary" role="alert">
|
||||||
|
{{flashmessage.body}}
|
||||||
|
</div>
|
||||||
|
<div *ngSwitchCase="'Error'" class="alert alert-danger" role="alert">
|
||||||
|
{{flashmessage.body}}
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</ngb-toast>
|
||||||
|
|
||||||
|
|||||||
@@ -1,20 +1,34 @@
|
|||||||
import {Injectable} from "@angular/core";
|
import {Injectable} from "@angular/core";
|
||||||
|
|
||||||
export interface Flashmessage {
|
export interface Flashmessage {
|
||||||
header: string;
|
body: string;
|
||||||
body: string;
|
delay?: number;
|
||||||
delay?: number;
|
type: "Error"|"Success"|"Info";
|
||||||
}
|
}
|
||||||
|
|
||||||
@Injectable({ providedIn: 'root' })
|
@Injectable({ providedIn: 'root' })
|
||||||
export class FlashmessagesService {
|
export class FlashmessagesService {
|
||||||
toasts: Flashmessage[] = [];
|
toasts: Flashmessage[] = [];
|
||||||
|
|
||||||
show(header: string, body: string) {
|
success(body: string) {
|
||||||
this.toasts.push({ header, body });
|
this.show("Success", body);
|
||||||
}
|
}
|
||||||
|
|
||||||
remove(toast: Flashmessage) {
|
error(body: string) {
|
||||||
this.toasts = this.toasts.filter(t => t != toast);
|
this.show("Error", body);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
show(type: string, body: string) {
|
||||||
|
if (type == "Success") {
|
||||||
|
this.toasts.push({ type, body });
|
||||||
|
} else if (type == "Error") {
|
||||||
|
this.toasts.push({ type, body });
|
||||||
|
} else {
|
||||||
|
this.toasts.push({ type: "Info", body });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
remove(toast: Flashmessage) {
|
||||||
|
this.toasts = this.toasts.filter(t => t != toast);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user