Skip to main content
código de los componentes agregado
Origen Enlace

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

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`);
  }
Etiquetas y ruido removidos, correcciones en redacción
Origen Enlace
padaleiana
  • 3.3k
  • 13
  • 19
  • 27

Soy medio nuevo en esto de angular y tengo una duda, estoyEstoy haciendo un sistema en angular en el cual utilizo un modalmodal; hasta ahí todo bien, sin embargo, al momento de confirmar la operación de borrar que está en el modal (lo, lo que hace esta peticionpetición es un http delete ) y regresar a la pantalla del componente principal. Esto no se quita hastahasta que actualizo la página, que es cuando desaparece el registro borrado ya que en mi backend si 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, espero puedan ayudarme gracias.

En caso de que hubiera una forma de forzar a angular a actualizar la paginapágina cuando se da click en uun botón les agraeceriaagradecería que me dijieran cualdijeran cuál es.

Soy medio nuevo en esto de angular y tengo una duda, 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 peticion 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 si 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, espero puedan ayudarme gracias.

En caso de que hubiera una forma de forzar a angular a actualizar la pagina cuando se da click en u botón les agraeceria que me dijieran cual es.

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 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.

Hola buenas tardes que tal a todos aqui estrenando cuenta de stackoverflow ya que no pude recuperar mi otra cuenta :(.

Soy medio nuevo en esto de angular y tengo una duda, estoy haciendo un sistema en angular en el cual utilizo un modal hasta hayahí todo bien, sin embargo, al momento de confirmar la operación de borrar que estaestá en el modal (lo que hace esta peticion es un http delete ) y regresar a la pantalla del componente principal hay esta todavia la publicacion que acabo de eliminar hasta. Esto no se quita hasta que actualizo la paginapágina, que es cuando desaparece el registro borrado ya que en mi backend si lo borra al realizar la petición ya tengo unos días atorado en esto ustedes como creen que podría solucionar esto.

Ya he intentado varias cosas que he visto en diferentes foros pero hasta ahora nada me aha funcionado, espero puedan ayudarme gracias.

Oh siEn caso de que hubiera una forma de forzar a angular a actualizar la pagina cuando sedase da click en u botonbotón les agraeceria que me dijieran cual es gracias de antemano por su ayuda.

Hola buenas tardes que tal a todos aqui estrenando cuenta de stackoverflow ya que no pude recuperar mi otra cuenta :(.

Soy medio nuevo en esto de angular y tengo una duda, estoy haciendo un sistema en angular en el cual utilizo un modal hasta hay todo bien, sin embargo, al momento de confirmar la operación de borrar que esta en el modal (lo que hace esta peticion es un http delete ) y regresar a la pantalla del componente principal hay esta todavia la publicacion que acabo de eliminar hasta que actualizo la pagina es cuando desaparece el registro borrado ya que en mi backend si lo borra al realizar la petición ya tengo unos días atorado en esto ustedes como creen que podría solucionar esto.

Ya he intentado varias cosas que he visto en diferentes foros pero hasta ahora nada me a funcionado espero puedan ayudarme gracias.

Oh si hubiera una forma de forzar a angular a actualizar la pagina cuando seda click en u boton les agraeceria que me dijieran cual es gracias de antemano por su ayuda

Soy medio nuevo en esto de angular y tengo una duda, 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 peticion 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 si 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, espero puedan ayudarme gracias.

En caso de que hubiera una forma de forzar a angular a actualizar la pagina cuando se da click en u botón les agraeceria que me dijieran cual es.

Origen Enlace
Loading