CODEWITHSUNDEEP
angularionic2
Domy
Domy

Reputation: 71

remove an html div after confirming deletion in alert box in angular2

I have a code that simply shows my list of models. Here you see a div repeatedly added until all my comments are displayed. Within each div is a button that shows an ionic popover that gives a user options to edit or delete comment.

<div *ngFor="let comment_details of comments">
    <div id="content-wrap">
        <div class="col-md-6 col-bordered">
            <button icon-only (click)="presentPopover(comment_details.id) style="float: right;">
                  <ion-icon name="more"></ion-icon>
            </button> 

       <div class="row1">
            @{{comment_details.author_name}}
        </div>
        <div class="row2">
                   {{comment_details.content.rendered}}
         </div>
      </div>
    </div>  
</div>

The popover has a separate class. When you choose delete option, an alert box pops up and asks for confirmation if you want to delete the comment.

@Component({
    template: `
    <ion-list>
       <button ion-item (click)="close()">Edit</button>
       <button ion-item (click)="delete()">Delete</button>
     </ion-list>
  `
})

export class PopoverPage{
   id: number;
   constructor(public viewCtrl: ViewController, public navParams: NavParams, private alertCtrl: AlertController, public comment: Comment) { 
       this.id = navParams.get('id');
}

delete(){    
    let alert = this.alertCtrl.create({
    title: 'Confirm deletion',
    message: 'Do you delete this' + this.id + ' comment?',
    buttons: [
    {
      text: 'delete',
      handler: () => {
         this.comment.deleteComment(this.id).map(res => res.json())
         .subscribe(data => {           
              let alert = this.alertCtrl.create({
              title: 'Comment deleted',
              subTitle: 'Comment' + this.id + 'deleted',
              buttons: ['Okay']
            });
            alert.present();
      });
      }
    }
  ]
});
alert.present();
this.viewCtrl.dismiss();
  }
}

after I confirm that I want to delete a comment, in a different class I splice the comments array so that the comment will be removed from the array and there's no problem there.. Now the what I want next is that the deleted comment div in the html will be removed. How can this be achieved?

PS. I'm open to changing the div to list if that helps..

Upvotes: 0

Views: 659

Answers (1)

Rebar
Rebar

Reputation: 1115

try to develop more with the Angular controll structures. For example you can trigger the Tags that have to be deleted or manipulated by the *ngIf! For example just set a boolean variable like: PressedDelete: boolean; And connect your wished tags in your template.html with *ngIf=PressedDelete. Here it means for example: If PressedDelete == true, than render this Tag in my Page, otherwise delete it! This is rendered clientside and you can play around so simple with that.

My recommandation:

<div id="CommentToBeDeleted" *ngIf="PressedDelete" ></div>

Now you can controll the rendering in your Page.Component.ts file 👍.

Hope it helped

Upvotes: 1

Related Questions