Estoy haciendo un sistema en angular en el cual utilizo un modal; hasta ahí todo bien, sin embargo, al momento de confirmar la operación de borrar que está en el modal, lo que hace esta petición es un http delete y regresar a la pantalla del componente principal. Esto no se quita hasta que actualizo la página, que es cuando desaparece el registro borrado ya que en mi backend sí lo borra al realizar la petición.
Ya he intentado varias cosas que he visto en diferentes foros pero hasta ahora nada me ha funcionado.
En caso de que hubiera una forma de forzar a angular a actualizar la página cuando se da click en un botón les agradecería que me dijeran cuál es.
publication.html este es el componente principal
<section class="section" >
<div class="background">
</div>
<section class="main col-xy-flexbox-center">
<button class="create" (click)="postear()"><i class="fa-solid fa-clone"></i>Publicar Noticia</button>
<ng-container class="news" *ngIf="error!='' ">
<p>No existen mas oticias para mostrar</p>
</ng-container>
<article class="news col-xy-flexbox-center" *ngFor="let item of datos; let indice=index">
<div class="options">
<button class="btn" (click)="edit()"><i class="fa-solid fa-pen-to-square"></i> Editar</button>
<button class="btn" (click)="confirm(id[indice])"><i class="fa-solid fa-trash-can"></i>Eliminar</button>
</div>
<div class="date">Fecha: <strong>{{item.date}}</strong></div>
<img src="{{item.img}}" alt="">
<h1 class="title">{{item.tittle}}</h1>
<p>{{item.text.slice(0,300)}}</p>
<ng-container *ngIf="modal$==true">
<app-modal-publication></app-modal-publication>
</ng-container>
</article>
</section>
</section>
publication.ts
datos:Array<any>=[];//Aqui tendremos que delcarar que la incializacion se realizara con array ya que de otra forma marcara el error object object
id:Array<String>=[];
page:number=0;
currentPage:number=1;
pagina=0;
modal$=false
error:String="";
constructor(private newservice:NewsService, private messageservise:MessageService, private router:Router, private publicationservice:PublicationService) {}
ngOnInit(): void {
this.loadNews();
this.messageservise.modal$.subscribe(res => {this.modal$=res})
}
loadNews(){
let value=this.newservice.getAllData().subscribe(res=>{
if(res){
let temp =Object.values(res).reverse();
this.datos=temp;
let identifier=Object.keys(res).reverse();
this.id=identifier;
}
else{this.error="No existen mas publicaciones para mostrar";}
})
}
confirm(value:String){
this.modal$=true;
this.publicationservice.deleteId=value;
}
edit(){
this.router.navigate(['dashboard/publication/edit'])
}
postear(){
this.router.navigate(['noticias/postear']);
}
el siguiente componente es el modal:
modal.html
<div class="modal">
<div class="modalDelete">
<p class="title"><i class="fa-solid fa-triangle-exclamation"></i>ELIMINAR PUBLICACION</p>
<P class="text">Estas seguro que deseas eliminar esta publicacion esta operacion no se puede revertir</P>
<div class="modalDelete__btn">
<button type="button" (click)="deletePublication()"><i class="fa-solid fa-eraser"></i>BORRAR</button>
<button type="button" (click)="closeModal()"><i class="fa-solid fa-ban"></i>CANCELAR</button>
</div>
</div>
</div>
modal.ts
constructor(private messageservice:MessageService, private router: Router, private publicacionservice: PublicationService) { }
modal$:boolean=false;
ngOnInit(): void {
this.messageservice.modal$;
}
closeModal(){
this.messageservice.modal$.emit(false);
}
deletePublication(){
let temp=this.publicacionservice.deleteId;
this.publicacionservice.deletePublcation(temp).subscribe();
alert("publicacion eliminada con exito");
this.router.navigate(['dashboard/publication']);
this.messageservice.modal$.emit(false);
}
Este es mi servicio:
deletePublcation(id:String){
return this.http.delete(`${this.db}/Post/${id}.json`);
}