Live page scorecard data connection

src/app/live/live.page.html

@@ -25,13 +25,59 @@
 
             <section class="score-card" *ngIf="currentMatch.Innings">
                 <div class="team" *ngFor="let inning of currentMatch.Innings">
-                    <header> <h5> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Name_Short }} </h5> </header>
+                    <header> <h5> {{ currentMatch.Teams[inning.Battingteam].Name_Short }} </h5> </header>
                     <div class="score"> {{ inning.Total }}/{{ inning.Wickets }} <span> ({{ inning.Overs }}) </span> </div>
                 </div>
             </section>
         </section>
 
         <ul class="statistical-pages">
+            <li class="collapsible-card" [ngClass]="{'active' : showScoreCard}" *ngIf="currentMatch.Innings">
+                <header>
+                    <label> Scorecard </label>
+                    <button (click)="showScoreCard = !showScoreCard"> 
+                        <span *ngIf="!showScoreCard"> + </span> 
+                        <span *ngIf="showScoreCard"> - </span>
+                    </button>
+                </header>
+                
+                <section class="card" *ngFor="let inning of currentMatch.Innings">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>
+                                    Player
+                                </th>
+                                <th>
+                                    Score
+                                </th>
+                                <th>
+                                    Balls
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <ng-container *ngFor="let batsman of inning.Batsmen">
+                                <tr *ngIf="batsman.Runs >= 0">
+                                    <td>
+                                        {{ currentMatch.Teams[inning.Battingteam].Players[Batsman].Name_Full }} <br>
+                                        <span> {{ batsman.Howout }} </span>
+                                    </td>
+    
+                                    <td>
+                                        {{ batsman.Runs }}
+                                    </td>
+    
+                                    <td>
+                                        {{ batsman.Balls }}
+                                    </td>
+                                </tr>
+                            </ng-container>                            
+                        </tbody>
+                    </table>
+                </section>
+            </li>
+
             <li class="collapsible-card" [ngClass]="{'active' : showFixtures}">
                 <header>
                     <label> Fixtures </label>

src/app/live/live.page.ts

@@ -261,6 +261,8 @@ export class LivePage implements OnInit {
             });
 
             closestMatch = this.fixtures[closestIndex];
+            
+            this.slides.slideTo(closestIndex);
 
             if (closestMatch) {
                 this.matchService.getMatchDetails(closestMatch.match_id).then((match_data: RawMatchData) => {