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`);
}