Angular4データをブートストラップモーダルに渡す

現在、ng2-bs3-modalを使用しています。データベースからいくつかのサッカークラブをテーブルに一覧表示する「クラブ」コンポーネントがあります。私はその部分で成功しましたが、クラブの詳細をモーダルに示したいと思います。これどうやってするの？私はいくつかの同様の質問を見つけましたが、私は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);
    }}

どんな助けでも大歓迎です！前もって感謝します！