title: Angular 2 bootstrap modal pass data
body: <p>I am newbie on angular 2. I am trying to do simple crud operations. However I have problem with using bootstrap modal. The code below, opens bootstrapmodal but I can't send selected movie on DeleteMovie() method.</p>
  
  <pre><code>&lt;div style="margin: 20px"&gt;
      &lt;h2&gt;Movies List&lt;/h2&gt;
  
      &lt;input type="button" Value="Add Movie" class="btn btn-primary" (click)="AddMovie()"/&gt;
  &lt;hr/&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;table class="table table-bordered"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Movie Name&lt;/th&gt;
                          &lt;th&gt;Genre&lt;/th&gt;
                          &lt;th&gt;Edit&lt;/th&gt;
                          &lt;th&gt;Delete&lt;/th&gt;
                          &lt;th&gt;Delete2&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr *ngFor="let mv of movies"&gt;
                          &lt;td&gt;{{mv.MovieName}}&lt;/td&gt;
                          &lt;td&gt;{{mv.MovieGenre}}&lt;/td&gt;
                          &lt;td&gt;&lt;a routerLink="/movies/{{mv.movieID}}"&gt;&lt;i class="glyphicon glyphicon-edit"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;i class="glyphicon glyphicon-remove clickable" (click)="removeMovie(mv)"&gt;&lt;/i&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;i class="glyphicon glyphicon-remove clickable" data-toggle="modal" data-target="#myModal2" data-id="{{mv.MovieName}}" (click)="SelectMovie(mv)"&gt;&lt;/i&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  
  &lt;div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;h4 class="modal-title" id="myModalLabel"&gt;Delete Record&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  Do you want to delete {{selectedMovie.MovieName}}
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary" (click)="removeMovieV2(selectedMovie)" data-dismiss="modal"&gt;Delete&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <pre><code>@Component({
      selector: 'movies2',
      templateUrl: '/templates/movies.component.html',
      providers: [MoviesService]
  })
  export class MoviesComponent implements OnInit {
  
      isLoading = true;
      movies: any = [];
      selectedMovie:any={};
  
      constructor(private _moviesService: MoviesService, private router: Router, private notificationService: NotificationService) {
      }
  
      ngOnInit() {
          this.GetMovies();
      }
  
  
      AddMovie() {
          this.router.navigate(['/newmovie']);
      }
  
      GetMovies() {
          this._moviesService.getMovies().subscribe(p =&gt; {
              this.movies = p;
          });
      }
  
      SelectMovie(mv: any) {
          this.selectedMovie = mv;
      }
  
      removeMovieV2(val: any) {
          this._moviesService.deleteMovie(val).subscribe(res =&gt; {
              this.notificationService.printSuccessMessage(val.MovieName + ' has been deleted.');
              this.GetMovies();
          }, error =&gt; {
              this.notificationService.printErrorMessage(error);
          });
      }
  }
  </code></pre>