Angular 2 bootstrap modal pass data

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">&times;</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);
        });
    }
}

Can you add the code for the modal ? And is there only one modal that needs to be called or are there multiple modals that should have different ID's ? — MatWaligora
– MatWaligora, Commented Sep 28, 2016 at 14:11
I updated the code, now it is working but I don't think that this solution is a good practice. What is the best practice of using modals? — hsyn
– hsyn, Commented Sep 29, 2016 at 7:14

Günter Zöchbauer · Accepted Answer · 2016-09-29 07:14:08Z

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)

answered Sep 29, 2016 at 7:14

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 bootstrap modal pass data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related