Angular 2 bootstrap modal pass data - angularjs

Question

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.
<div style="margin: 20px">
<h2>Movies List</h2>
<input type="button" Value="Add Movie" class="btn btn-primary" (click)="AddMovie()"/>
<hr/>
<div class="row">
<div class="col-md-12">
<table class="table table-bordered">
<thead>
<tr>
<th>Movie Name</th>
<th>Genre</th>
<th>Edit</th>
<th>Delete</th>
<th>Delete2</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let mv of movies">
<td>{{mv.MovieName}}</td>
<td>{{mv.MovieGenre}}</td>
<td><a routerLink="/movies/{{mv.movieID}}"><i class="glyphicon glyphicon-edit"></i></a></td>
<td><i class="glyphicon glyphicon-remove clickable" (click)="removeMovie(mv)"></i></td>
<td><i class="glyphicon glyphicon-remove clickable" data-toggle="modal" data-target="#myModal2" data-id="{{mv.MovieName}}" (click)="SelectMovie(mv)"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Delete Record</h4>
</div>
<div class="modal-body">
Do you want to delete {{selectedMovie.MovieName}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" (click)="removeMovieV2(selectedMovie)" data-dismiss="modal">Delete</button>
</div>
</div>
</div>
</div>
#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 => {
this.movies = p;
});
}
SelectMovie(mv: any) {
this.selectedMovie = mv;
}
removeMovieV2(val: any) {
this._moviesService.deleteMovie(val).subscribe(res => {
this.notificationService.printSuccessMessage(val.MovieName + ' has been deleted.');
this.GetMovies();
}, error => {
this.notificationService.printErrorMessage(error);
});
}
}

Answer 1

I think you need to use attribute binding instead of property binding for boostrap to get the value
attr.data-id="{{mv.MovieName}}"
(only for strings)
or
[attr.data-id]="mv.MovieName"
(also supports objects)