Angular4 Passing data into bootstrap modal

Question

I'm currently using ng2-bs3-modal. I have a "club" component which lists some football clubs from my database into a table. I succeeded at that part but I want to show details of the club into a modal. How can I do this? I found some similar questions but nothing seemed to help as I'm a beginner at Angular.

club.component.html

    <div class='panel panel-primary clubtable'>
    <div class='panel-heading'> Premier League Clubs Season 2018-2019 </div>
    <div class='panel-body'>
        <div class='table-responsive'>

            <div class="alert alert-info" role="alert" *ngIf="indLoading">
                <img src="../../images//misc/loader.gif" width="32" height="32" />
            </div>
            <div *ngIf='clubs && clubs.length==0' class="alert alert-info" role="alert"> No clubs found! </div>
            <table class='table table-striped' *ngIf='clubs && clubs.length'>
                <thead > <tr> <th> Name </th>   </tr> </thead>
                <tbody> <tr *ngFor="let club of clubs">  <td>   {{ club.ClubName }} </td> <button title="Details" class="btn btn-primary" (click)="modal.open()"> Details </button>  </tr> </tbody>
            </table>
            <div> </div>
        </div>
        <div *ngIf="msg" role="alert" class="alert alert-info alert-dismissible">
            <button type="button" class=" close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true"> &times; </span></button> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
            <span class="sr-only"> Error: </span> {{ msg }}
        </div>
    </div>
</div>

<modal #modal>

    <modal-header [show-close]="true" *ngFor="let club of clubs">
        <h4 class="modal-title"> {{club.ClubName }} </h4>
    </modal-header>
    <modal-body>
        <div class="container-fluid" *ngFor="let club of clubs" >

            <div class="row"> <img src={{club.BadgeURL}} />  </div>
            <div class="row"> <span> Year founded: </span> {{club.YearFounded}}  </div>
            <div class="row"> <span> Location: </span> {{club.Location}}  </div>
            <div class="row"> <span> Nickname: </span> {{club.NickName}}  </div>

        </div>
    </modal-body>
    <modal-footer> <div> <a class="btn btn-default" (click)="modal.dismiss()"> Cancel </a>  </div> </modal-footer>

</modal>

club.component.ts

import { Component, OnInit, ViewChild } from "@angular/core";
import { UserService } from '../Service/user.service';
import { IClub } from '../Models/club';
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
import { Observable } from 'rxjs/Rx';
import { Global } from '../Shared/global';
@Component({
    templateUrl: 'app/components/clubs.component.html'
})
export class ClubsComponent implements OnInit {


    @ViewChild('modal')
    modal: ModalComponent;
    clubs: IClub[];
    club: IClub;
    msg: string;
    indLoading: boolean = false;
    modalTitle: string;
    badgeURL: string;
    yearfounded: Date;
    location: string;
    nickname: string;

    constructor(private _userService: UserService) { }

    ngOnInit(): void {
        this.LoadClubs();
    }



    LoadClubs(): void {
        this.indLoading = true;
        this._userService.get(Global.BASE_USER_ENDPOINT).subscribe(clubs => {
            this.clubs = clubs;
            this.indLoading = false;

        }, error => this.msg = <any>error);
    }}

Any help would be extremely much appreciated! Thank you in advance!

What exactly does not work in your example? Can you access your clubs property within the modal? — mitschmidt
– mitschmidt, Commented Feb 3, 2019 at 20:21
The problem is when I click on the "Details" button, it loads all of the clubs information and not only the clicked club information. That part is what I can't resolve. — Matt Philips
– Matt Philips, Commented Feb 3, 2019 at 20:28

mitschmidt · Accepted Answer · 2019-02-03 20:41:36Z

1

Well, you are using ngFor to iterate over all clubs in the modal component - so obviously all clubs will be rendered. You will somehow have to use your club.id in the function call to determine which club to display. You could achieve this by wrapping your modal.show() in another function, and call that in the (click) event of your details button.

<button title="Details" class="btn btn-primary" (click)="openClubModal(club.id)"> Details </button>

The function could look like this:

openClubModal(modalId: number) {
    this.club = this.clubs.filter((club) => club.id === clubId));
    this.modal.show();
}

... and then display the single club in your modal:

    <modal-body>
        <div class="container-fluid">
            <div class="row"> <img src={{club.BadgeURL}} />  </div>
            <div class="row"> <span> Year founded: </span> {{club.YearFounded}}</div>
            <div class="row"> <span> Location: </span> {{club.Location}}  </div>
            <div class="row"> <span> Nickname: </span> {{club.NickName}}  </div>
        </div>
    </modal-body>

You will have to adjust the header as well:

    <modal-header [show-close]="true">
        <h4 class="modal-title"> {{club.ClubName }} </h4>
    </modal-header>

answered Feb 3, 2019 at 20:41

mitschmidt

5263 silver badges11 bronze badges

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

1 Comment

Matt Philips Over a year ago

Thank you very much, it worked flawlessly!! I'll forever be grateful, thank you again for your time!

Collectives™ on Stack Overflow

Angular4 Passing data into bootstrap modal

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related