I am in the process of building an Angular application and I have a requirement to implement alerts. These alerts should be displayed in response to POST/PUT/DELETE requests, showing a success message. Previously, I achieved this by creating a class:
export class Alert{
"status" : boolean;
"text": string;
constructor(){
this.status=false;
this.text="";
}
public setAlert(text){
this.status = true;
this.text = text;
}
public close(){
this.status = false;
}
}
Followed by the HTML:
<div *ngIf = "alert.status" class="alert alert-success
alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"
(click) = "alert.close()">
<span aria-hidden="true">×</span>
</button>
{{alert.text}}
</div>
and in the component.ts file:
import { Alert } from './alert';
alert: Alert;
ngOnInit() {
this.alert = new Alert();
}
editForm() {
fetch(this.formService.formsUrl + "/" + this.formService.form.id, {
method: 'PUT',
body: JSON.stringify(this.formService.form),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(json => console.log(json));
this.alert.setAlert("Post has been successfully saved !");
}
I was advised that using EventEmmiter is a better approach for implementing alerts. Can you provide guidance on how to proceed with this method?