CODEWITHSUNDEEP
angularmodal-dialog
Matt Philips
Matt Philips

Reputation: 25

Angular4 Passing data into bootstrap modal

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!

Upvotes: 1

Views: 400

Answers (1)

mitschmidt
mitschmidt

Reputation: 516

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>

Upvotes: 1

Related Questions