CODEWITHSUNDEEP
angularng2-bootstrap
Stathis Ntonas
Stathis Ntonas

Reputation: 1262

How to pass data to the ng2-bs3-modal?

I have this snippet that comes from an *ngFor so it's being populated many times. Every profile has a unique id and i want to delete it when i prees this button:

<a data-toggle="modal" data-target="#deleteProfile" (click)="deleteProfile.open()" role="button" style="color:red;"><i class="fa fa-trash-o" aria-hidden="true"></i> Delete</a>

the html modal:

    <modal #deleteProfile>
  <modal-header [show-close]="true">
    <h4 class="modal-title">Delete Profile</h4>
  </modal-header>
  <modal-body>
    <div class="text-center">
      Are you sure you want to delete this profile?
    </div>
  </modal-body>
  <modal-footer>
    <div class="control-group confirm-buttons">
      <div class="row text-center">
        <div class="col-md-6">
          <button type="button" class="btn btn-cancel" data-dismiss="modal" (click)="closeDeleteProfile()">No</button>
        </div>
        <div class="col-md-6">
          <button type="button" class="btn btn-confirm" (click)="deleteProfile()">Yes</button>
        </div>
      </div>
      <div class="col-md-12 text-center">
        <small>This is the footer</small>
      </div>
    </div>
  </modal-footer>
</modal>

this is called when 'Yes' button is clicked:

deleteProfile(id: string) {
this.modalDeleteProfile.dismiss();
this.profileService.delete(id)
  .subscribe(
    //  data =>  console.log(data),
    //  error =>  console.log(error)
  );
this.router.navigateByUrl('/dashboard');
}

How i can pass the id to the modal so the above code gets the id in order to delete the profile?

this is the modal I'm using: https://github.com/dougludlow/ng2-bs3-modal

Upvotes: 1

Views: 758

Answers (1)

AVJT82
AVJT82

Reputation: 73367

As per requested by OP in comments, here is an alternative solution to the question. The problem can be solved by adding extra method in the component.

You said you have an *ngFor which iterates through an Array. Instead of using the button to open the modal directly, let's open a method instead, which passes the id of the profile, so your iteration could look like this:

<table>
  <tr *ngFor="let profile of profiles">
    <td>{{profile.id}}</td>
    <td>{{profile.name}}</td>
    <td><button (click)="openDeleteModal(profile.id)">Delete Profile</button</td>
  </tr>
</table>

Then the openDeleteModal-method would instead open the modal window after we have bound the id to a local variable in the component.

// declare an extra variable that can be used in deletion
idForDeletingProfile;

openDeleteModal(id) {
  // here we bind the chosen id, so that we can use it in your delete-method
  this.idForDeletingProfile = id;
  this.modalDeleteProfile.open()
}

Then we have your modal, which I have shortened to just show the buttons:

<modal #deleteProfile>
  <!-- more code here -->
     <button type="button" class="btn btn-cancel" data-dismiss="modal" (click)="closeDeleteProfile()">No</button>
     <button type="button" class="btn btn-confirm" (click)="deleteProfile()">Yes</button>
  <!-- more code here -->
</modal>

And if user clicks the deleteProfile()-button, we have stored the chosen id in the idForDeletingProfile before, which can now be used for deletion.

deleteProfile() {
  this.modalDeleteProfile.dismiss();
  // use the local variable here!
  this.profileService.delete(this.idForDeletingProfile)
    .subscribe( data => {
       console.log(data);
       this.router.navigateByUrl('dashboard');
    });
}

Upvotes: 3

Related Questions