title: How to pass ID to ngx-bootstrap modal for delete confirmation
body: <p>I'm using Angular 6 and NGX-Bootstrap</p>
  
  <p>I have a component and service that upon visiting the page, I retrieve all 'locations' from my mongodb database - using Nodejs and Mongoose.</p>
  
  <p>I've looped over the result of the http get call and put the name of the 'location' in a table. To the right of the table, and part of the loop to fill the table (ngFor) I've added a delete button. I'd like to have a user click the button and then be prompted with an alert modal before deleting. My issue is with passing the location ID to the modal which can then call a delete function and pass back the ID (mongodb object id)</p>
  
  <p>I'm having a hard time figuring out how to move this data around becuase I believe the ngFor loop only contains references to the ID for that scope, but the modal is loaded by templateRef and the function won't take another passable input as a second parameter.</p>
  
  <p>Any help is greatly appreciated</p>
  
  <p>---- Component</p>
  
  <pre><code>import { Component, OnInit, TemplateRef } from '@angular/core';
  import { LocationService } from '../services/location.service';
  import { Observable } from 'rxjs';
  import { BsModalService } from 'ngx-bootstrap/modal';
  import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
  import { Location } from '../models/location.model';
  import { NgForm } from '@angular/forms';
  
  @Component({
    templateUrl: './location.component.html',
    styleUrls: ['./location.component.css']
  })
  export class LocationComponent implements OnInit {
    public locations: Location[] = [];
    addLocationForm = false;
    modalRef: BsModalRef;
  
    constructor(private locationService: LocationService, private modalService: BsModalService) {}
  
    ngOnInit() {
      this.locationService.loadAll().subscribe(result =&gt; {
        this.locations = result;
      });
    }
  
    showLocationForm() {
      this.addLocationForm = !this.addLocationForm;
    }
  
    onSaveLocation(form: NgForm) {
      if (form.invalid) {
        return;
      }
      const location = {
        name: form.value.name
      };
      this.locationService.saveLocation(location).subscribe(result =&gt; {
        this.ngOnInit();
        this.addLocationForm = !this.addLocationForm;
      });
    }
  
    deleteLocation(id) {
      this.locationService.deleteLocation(id).subscribe(result =&gt; {
        console.log('Deleted location from inside the delete location function', id);
        this.ngOnInit();
      });
    }
  
    openModal(template: TemplateRef&lt;any&gt;) {
      this.modalRef = this.modalService.show(template, { class: 'modal-sm' });
    }
  
    confirm(): void {
      this.deleteLocation('10');
      this.modalRef.hide();
    }
  
    decline(): void {
      this.modalRef.hide();
    }
  }
  </code></pre>
  
  <p>---- Template</p>
  
  <pre><code>    &lt;table class="table table-hover table-bordered"&gt;
    &lt;thead class="thead bg-info text-white"&gt;
      &lt;tr&gt;
        &lt;th style="width: 85%" scope="col"&gt;Locations&lt;/th&gt;
        &lt;th scope="col"&gt;Action&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor="let loc of locations"&gt;
        &lt;td&gt;{{ loc.name | titlecase }}&lt;/td&gt;
        &lt;td&gt;
          &lt;button class="actionBtn btn btn-warning"&gt;
            &lt;i class="fa fa-pencil-square-o"&gt;&lt;/i&gt;
          &lt;/button&gt;
          &lt;button class="btn btn-danger" (click)="openModal(template)"&gt;
            &lt;i class="fa fa-times"&gt;&lt;/i&gt;
          &lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;button class="btn btn-info" (click)="showLocationForm()"&gt;Add Location&lt;/button&gt;
  
  
  
  
  &lt;ng-template #template&gt;
    &lt;div class="modal-header"&gt;
      &lt;h4 class="modal-title pull-left"&gt;Delete Location&lt;/h4&gt;
      &lt;button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()"&gt;
        &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="modal-body text-center"&gt;
      &lt;p&gt;Do you really want to delete this location?&lt;/p&gt;
      &lt;button type="button" class="btn btn-primary" (click)="decline()"&gt;Cancel&lt;/button&gt;
      &lt;button type="button" class="btn btn-default" (click)="confirm()"&gt;Delete&lt;/button&gt;
  
    &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>