From 77fd3aebeefaee82e7a58f465159bd4edeaf7de4 Mon Sep 17 00:00:00 2001
From: ShashwatMDas <shashwatmdas@gmail.com>
Date: Fri, 28 May 2021 18:12:53 +0530
Subject: [PATCH] Actions added

---
 documentation.json                            | 400 ++++++++++++++----
 src/app/components/league/League.stories.ts   |  18 +-
 .../components/league/league.component.html   |   2 +-
 src/app/components/league/league.component.ts |  11 +-
 .../components/leagues/leagues.component.ts   |   4 +-
 .../leaguetable-container.component.ts        |   2 +-
 .../leaguetable/Leaguetable.stories.ts        |   8 +-
 .../leaguetable/leaguetable.component.css     |   3 +
 .../leaguetable/leaguetable.component.html    |   4 +-
 .../leaguetable/leaguetable.component.ts      |  11 +-
 .../team-card/team-card.component.html        |   8 +-
 .../team-card/team-card.component.ts          |   2 +
 12 files changed, 382 insertions(+), 91 deletions(-)

diff --git a/documentation.json b/documentation.json
index 2dfef80..3aea6d5 100644
--- a/documentation.json
+++ b/documentation.json
@@ -482,7 +482,7 @@
         },
         {
             "name": "LeagueComponent",
-            "id": "component-LeagueComponent-a41f203baf9272238e4bb49c5d5c4f85",
+            "id": "component-LeagueComponent-c22d35daff0bc3591ed3587ffed86dca",
             "file": "src/app/components/league/league.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -505,7 +505,14 @@
                     "type": "LeaguesInterface | undefined"
                 }
             ],
-            "outputsClass": [],
+            "outputsClass": [
+                {
+                    "name": "onClickLeague",
+                    "defaultValue": "new EventEmitter()",
+                    "line": 17,
+                    "type": "EventEmitter"
+                }
+            ],
             "propertiesClass": [],
             "methodsClass": [
                 {
@@ -514,7 +521,40 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 16
+                    "line": 25
+                },
+                {
+                    "name": "onNavigate",
+                    "args": [
+                        {
+                            "name": "id",
+                            "type": "any"
+                        },
+                        {
+                            "name": "name",
+                            "type": "any"
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 19,
+                    "jsdoctags": [
+                        {
+                            "name": "id",
+                            "type": "any",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        },
+                        {
+                            "name": "name",
+                            "type": "any",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
                 }
             ],
             "hostBindings": [],
@@ -522,7 +562,7 @@
             "description": "",
             "rawdescription": "",
             "type": "component",
-            "sourceCode": "import { Component, OnInit, Input } from '@angular/core';\n\nimport { LeaguesInterface } from '../../models/leagues.model';\n\n@Component({\n  selector: 'app-league',\n  templateUrl: './league.component.html',\n  styleUrls: ['./league.component.css']\n})\nexport class LeagueComponent implements OnInit {\n\n  constructor() { }\n\n  @Input() league: LeaguesInterface | undefined;\n\n  ngOnInit(): void {\n  }\n\n}\n",
+            "sourceCode": "import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';\n\nimport { LeaguesInterface } from '../../models/leagues.model';\n\n@Component({\n  selector: 'app-league',\n  templateUrl: './league.component.html',\n  styleUrls: ['./league.component.css']\n})\nexport class LeagueComponent implements OnInit {\n\n  constructor() { }\n\n  @Input() league: LeaguesInterface | undefined;\n\n  @Output()\n  onClickLeague = new EventEmitter();\n\n  onNavigate(id: any, name: any) {\n    this.onClickLeague.emit([id, name]);\n    window.location.href = `/leagues/${id}`;\n    // alert(`Ideally would navigate to the ${name}'s table`);\n  }\n\n  ngOnInit(): void {\n  }\n\n}\n",
             "assetsDirs": [],
             "styleUrlsData": [
                 {
@@ -540,11 +580,11 @@
             "implements": [
                 "OnInit"
             ],
-            "templateData": "<div *ngIf=\"!league\">\n    Undefined\n</div>\n<div *ngIf=\"league\" class=\"league-div\" [title]=\"league.name\">\n    <img class=\"image\" src={{league.logo}} />\n    <div class=\"league-info\">\n        <span class=\"league-name\">{{league.name}}</span><br />\n        <span class=\"league-country\">{{league.country}}</span>\n    </div>\n</div>"
+            "templateData": "<div *ngIf=\"!league\">\n    Undefined\n</div>\n<div *ngIf=\"league\" class=\"league-div\" [title]=\"league.name\" (click)=\"onNavigate(league.id, league.name)\" >\n    <img class=\"image\" src={{league.logo}} />\n    <div class=\"league-info\">\n        <span class=\"league-name\">{{league.name}}</span><br />\n        <span class=\"league-country\">{{league.country}}</span>\n    </div>\n</div>"
         },
         {
             "name": "LeaguesComponent",
-            "id": "component-LeaguesComponent-cb1532a3d86539a252d5565261795706",
+            "id": "component-LeaguesComponent-57cd0c992242a758c536e21c1524cd60",
             "file": "src/app/components/leagues/leagues.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -556,7 +596,7 @@
                 "./leagues.component.css"
             ],
             "styles": [],
-            "template": "  <div class=\"container\" >\n\n    <h2>Leagues</h2>\n    <a *ngFor=\"let league of leagues\" [routerLink]=\"['/leagues', league.id]\">\n      <app-league [league]=\"league\"></app-league>\n    </a>\n</div>\n",
+            "template": "  <div class=\"container\" >\n\n    <h2>Leagues</h2>\n    <div *ngFor=\"let league of leagues\">\n      <app-league [league]=\"league\"></app-league>\n    </div>\n</div>\n",
             "templateUrl": [],
             "viewProviders": [],
             "inputsClass": [],
@@ -586,7 +626,7 @@
             "description": "",
             "rawdescription": "",
             "type": "component",
-            "sourceCode": "import { Component, OnInit, Input } from '@angular/core';\n\nimport { LeaguesInterface } from '../../models/leagues.model';\n\nimport { leagueslist } from '../../models/leagues'\n\n@Component({\n  selector: 'app-leagues',\n  template: `\n  <div class=\"container\" >\n\n    <h2>Leagues</h2>\n    <a *ngFor=\"let league of leagues\" [routerLink]=\"['/leagues', league.id]\">\n      <app-league [league]=\"league\"></app-league>\n    </a>\n</div>\n`,\n  styleUrls: ['./leagues.component.css']\n})\nexport class LeaguesComponent implements OnInit {\n\n  constructor() { }\n\n  leagues : LeaguesInterface[] = leagueslist;\n\n  ngOnInit(): void {\n  }\n\n}\n",
+            "sourceCode": "import { Component, OnInit, Input } from '@angular/core';\n\nimport { LeaguesInterface } from '../../models/leagues.model';\n\nimport { leagueslist } from '../../models/leagues'\n\n@Component({\n  selector: 'app-leagues',\n  template: `\n  <div class=\"container\" >\n\n    <h2>Leagues</h2>\n    <div *ngFor=\"let league of leagues\">\n      <app-league [league]=\"league\"></app-league>\n    </div>\n</div>\n`,\n  styleUrls: ['./leagues.component.css']\n})\nexport class LeaguesComponent implements OnInit {\n\n  constructor() { }\n\n  leagues : LeaguesInterface[] = leagueslist;\n\n  ngOnInit(): void {\n  }\n\n}\n",
             "assetsDirs": [],
             "styleUrlsData": [
                 {
@@ -607,7 +647,7 @@
         },
         {
             "name": "LeaguetableComponent",
-            "id": "component-LeaguetableComponent-5afe884e76cd7ab34210298301fd7a95",
+            "id": "component-LeaguetableComponent-d12c95fc4e1e90bea52872de3611b06b",
             "file": "src/app/components/leaguetable/leaguetable.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -637,7 +677,14 @@
                     "type": "any[]"
                 }
             ],
-            "outputsClass": [],
+            "outputsClass": [
+                {
+                    "name": "onClickTeam",
+                    "defaultValue": "new EventEmitter()",
+                    "line": 20,
+                    "type": "EventEmitter"
+                }
+            ],
             "propertiesClass": [],
             "methodsClass": [
                 {
@@ -646,7 +693,51 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 22
+                    "line": 31
+                },
+                {
+                    "name": "onPressTeam",
+                    "args": [
+                        {
+                            "name": "teamid",
+                            "type": "any"
+                        },
+                        {
+                            "name": "leagueid",
+                            "type": "any"
+                        },
+                        {
+                            "name": "name",
+                            "type": "any"
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 22,
+                    "jsdoctags": [
+                        {
+                            "name": "teamid",
+                            "type": "any",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        },
+                        {
+                            "name": "leagueid",
+                            "type": "any",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        },
+                        {
+                            "name": "name",
+                            "type": "any",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
                 }
             ],
             "hostBindings": [],
@@ -654,11 +745,11 @@
             "description": "",
             "rawdescription": "",
             "type": "component",
-            "sourceCode": "import { Component, OnInit, Input } from '@angular/core';\nimport { Select, Store } from '@ngxs/store';\n// import { LeagueState, FetchTable } from '../../state/leaguetable.sate';\nimport { Observable } from 'rxjs';\n\nimport { LeagueTableInterface } from '../../models/leaguetable.model';\n\n@Component({\n  selector: 'app-leaguetable',\n  templateUrl: './leaguetable.component.html',\n  styleUrls: ['./leaguetable.component.css']\n})\nexport class LeaguetableComponent implements OnInit {\n\n\n  @Input() leaguetable : any[] = []; \n  @Input() league : any = {};\n\n  constructor(\n  ) { }\n  \n  ngOnInit(): void {\n    // alert(this.leaguetable)\n  }\n\n}\n",
+            "sourceCode": "import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';\nimport { Select, Store } from '@ngxs/store';\n// import { LeagueState, FetchTable } from '../../state/leaguetable.sate';\nimport { Observable } from 'rxjs';\n\nimport { LeagueTableInterface } from '../../models/leaguetable.model';\n\n@Component({\n  selector: 'app-leaguetable',\n  templateUrl: './leaguetable.component.html',\n  styleUrls: ['./leaguetable.component.css']\n})\nexport class LeaguetableComponent implements OnInit {\n\n\n  @Input() leaguetable : any[] = []; \n  @Input() league : any = {};\n\n  @Output()\n  onClickTeam = new EventEmitter();\n\n  onPressTeam(teamid: any, leagueid: any, name: any) {\n    this.onClickTeam.emit([teamid, leagueid, name]);\n    window.location.href = `/team/${teamid}/${leagueid}`;\n    // alert(`Ideally would take to ${name}'s details`);\n  }\n\n  constructor(\n  ) { }\n  \n  ngOnInit(): void {\n    // alert(this.leaguetable)\n  }\n\n}\n",
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "table{\n    width:100%;\n    table-layout: fixed;\n}\n.tbl-header{\n    background-color: #327feb;\n}\n.tbl-content{\n    height:300px;\n    overflow-x:auto;\n    margin-top: 0px;\n    border: 1px solid rgba(255,255,255,0.3);\n}\nth{\n    padding: 20px 15px;\n    text-align: center;\n    font-weight: 500;\n    font-size: 12px;\n    color: #fff;\n    text-transform: uppercase;\n}\ntd{\n    padding: 15px;\n    text-align: center;\n    vertical-align:middle;\n    font-weight: 300;\n    font-size: 12px;\n    color: #000;\n    border-bottom: solid 1px rgba(255,255,255,0.1);\n}\n.team {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n}\nspan {\n    flex: 2;\n}\nbody:after{\n    content: 'Elzero';\n    background-color: #333333aa;\n    position: fixed;\n    top: 0;\n    left: 0;\n    color: white;\n    padding: 10px;\n    box-shadow: 0 2px 0 green;\n    width: 100%;\n    font-family: comic sans ms;\n}\n.container{\n    width: 100%;\n}\n.table{\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n}\nh1{\n    background-color: #eee;\n    padding: 10px;\n    position: relative;\n}\nh1:before{\n    content: '';\n    border-width: 10px;\n    border-style: solid;\n    border-color: #eee transparent transparent transparent;\n    position: absolute;\n    bottom: -20px;\n    left: calc(50% - 10px);\n}\ntable{\n    width: 90vw;\n    font-family: Sans-Serif;\n    box-shadow: 0 5px 0 rgb(15,157,88);\n}\ntable thead{\n    background-color: #327feb;\n    color: white;\n    text-align: center;\n    text-transform: uppercase;\n}\ntable thead tr td{\n    padding: 10px;\n}\ntable thead .special{\n    width: 30%;\n}\ntable tbody{\n    background-color: #eee;\n    color: #111;\n    text-align: center;\n}\ntable tbody tr td{\n    padding: 10px 20px;\n}\ntable tbody img{\n    width: 50px;\n}\ntable tbody .control{\n    display: inline-block;\n}\n.view,.delete{\n    padding: 1px 5px;\n    margin-bottom: 5px;\n    color: white;\n    font-weight: bold;\n    background-color: rgb(219,68,55);\n    user-select: none;\n}\n.view{\n    background-color: rgb(66,133,244);\n}\n",
+                    "data": "table{\n    width:100%;\n    table-layout: fixed;\n}\n.tbl-header{\n    background-color: #327feb;\n}\n.tbl-content{\n    height:300px;\n    overflow-x:auto;\n    margin-top: 0px;\n    border: 1px solid rgba(255,255,255,0.3);\n}\nth{\n    padding: 20px 15px;\n    text-align: center;\n    font-weight: 500;\n    font-size: 12px;\n    color: #fff;\n    text-transform: uppercase;\n}\ntd{\n    padding: 15px;\n    text-align: center;\n    vertical-align:middle;\n    font-weight: 300;\n    font-size: 12px;\n    color: #000;\n    border-bottom: solid 1px rgba(255,255,255,0.1);\n}\n.team {\n    display: flex;\n    text-decoration: underline;\n    color: #327feb;\n    cursor: pointer;\n    flex-direction: row;\n    align-items: center;\n}\nspan {\n    flex: 2;\n}\nbody:after{\n    content: 'Elzero';\n    background-color: #333333aa;\n    position: fixed;\n    top: 0;\n    left: 0;\n    color: white;\n    padding: 10px;\n    box-shadow: 0 2px 0 green;\n    width: 100%;\n    font-family: comic sans ms;\n}\n.container{\n    width: 100%;\n}\n.table{\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n}\nh1{\n    background-color: #eee;\n    padding: 10px;\n    position: relative;\n}\nh1:before{\n    content: '';\n    border-width: 10px;\n    border-style: solid;\n    border-color: #eee transparent transparent transparent;\n    position: absolute;\n    bottom: -20px;\n    left: calc(50% - 10px);\n}\ntable{\n    width: 90vw;\n    font-family: Sans-Serif;\n    box-shadow: 0 5px 0 rgb(15,157,88);\n}\ntable thead{\n    background-color: #327feb;\n    color: white;\n    text-align: center;\n    text-transform: uppercase;\n}\ntable thead tr td{\n    padding: 10px;\n}\ntable thead .special{\n    width: 30%;\n}\ntable tbody{\n    background-color: #eee;\n    color: #111;\n    text-align: center;\n}\ntable tbody tr td{\n    padding: 10px 20px;\n}\ntable tbody img{\n    width: 50px;\n}\ntable tbody .control{\n    display: inline-block;\n}\n.view,.delete{\n    padding: 1px 5px;\n    margin-bottom: 5px;\n    color: white;\n    font-weight: bold;\n    background-color: rgb(219,68,55);\n    user-select: none;\n}\n.view{\n    background-color: rgb(66,133,244);\n}\n",
                     "styleUrl": "./leaguetable.component.css"
                 }
             ],
@@ -667,16 +758,16 @@
                 "name": "constructor",
                 "description": "",
                 "args": [],
-                "line": 17
+                "line": 26
             },
             "implements": [
                 "OnInit"
             ],
-            "templateData": "<!-- <span>asdas {{league.name}} {{leaguetable[0].team.name}}</span> -->\n<div *ngIf=\"!league\">\n    sdsad\n</div>\n<div class=\"container table\" *ngIf=\"league\">\n    <h2>{{league.name}}</h2>\n      <table>\n        <thead>\n          <tr>\n            <td>Rank</td>\n            <td colspan=\"2\">Team</td>\n            <td>Matches Played</td>\n            <td>\n              Wins\n            </td>\n            <td>Draws</td>\n            <td>Losses</td>\n            <td>GF</td>\n            <td>GA</td>\n            <td>GD</td>\n            <td>Points</td>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let team of leaguetable\">\n            <td>{{team.rank}}</td>\n            <td colspan=\"2\">\n              <!-- <a [title]=\"team.team.name\" [routerLink]=\"['/team', league.id, team.team.id]\"> -->\n                  <div class=\"team\">\n                      <img style=\"height: 35px; width: 35px;\" src={{team.team.logo}} />\n                      <span> {{team.team.name}}</span>\n                  </div>\n              <!-- </a> -->\n            </td>\n            <td>{{team.all.played}}</td>\n            <td>{{team.all.win}}</td>\n            <td>{{team.all.draw}}</td>\n            <td>{{team.all.lose}}</td>\n            <td>{{team.all.goals.for}}</td>\n            <td>{{team.all.goals.against}}</td>\n            <td>{{team.goalsDiff}}</td>\n            <td>{{team.points}}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>"
+            "templateData": "<!-- <span>asdas {{league.name}} {{leaguetable[0].team.name}}</span> -->\n<div *ngIf=\"!league\">\n    loading\n</div>\n<div class=\"container table\" *ngIf=\"league\">\n    <h2>{{league.name}}</h2>\n      <table>\n        <thead>\n          <tr>\n            <td>Rank</td>\n            <td colspan=\"2\">Team</td>\n            <td>Matches Played</td>\n            <td>\n              Wins\n            </td>\n            <td>Draws</td>\n            <td>Losses</td>\n            <td>GF</td>\n            <td>GA</td>\n            <td>GD</td>\n            <td>Points</td>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let team of leaguetable\" (click)=\"onPressTeam(team.team.id, league.id, team.team.name)\">\n            <td>{{team.rank}}</td>\n            <td colspan=\"2\">\n              <!-- <a [title]=\"team.team.name\" [routerLink]=\"['/team', league.id, team.team.id]\"> -->\n                  <div class=\"team\">\n                      <img style=\"height: 35px; width: 35px;\" src={{team.team.logo}} />\n                      <span> {{team.team.name}}</span>\n                  </div>\n              <!-- </a> -->\n            </td>\n            <td>{{team.all.played}}</td>\n            <td>{{team.all.win}}</td>\n            <td>{{team.all.draw}}</td>\n            <td>{{team.all.lose}}</td>\n            <td>{{team.all.goals.for}}</td>\n            <td>{{team.all.goals.against}}</td>\n            <td>{{team.goalsDiff}}</td>\n            <td>{{team.points}}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>"
         },
         {
             "name": "LeaguetableContainerComponent",
-            "id": "component-LeaguetableContainerComponent-1880b1296215d3f4721b7fc8e256c22b",
+            "id": "component-LeaguetableContainerComponent-062e5798a9aaf6b21314c7e1b4733af4",
             "file": "src/app/components/leaguetable-container/leaguetable-container.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -751,7 +842,7 @@
             "description": "",
             "rawdescription": "",
             "type": "component",
-            "sourceCode": "import { Component, OnInit } from '@angular/core';\nimport { FootballdataService } from '../../services/footballdata.service';\nimport { ActivatedRoute } from '@angular/router';\n\n@Component({\n  selector: 'app-leaguetable-container',\n  template: `\n    <app-leaguetable [leaguetable]=\"leaguetable\" [league]=\"league\"></app-leaguetable>\n  `,\n  styleUrls: ['./leaguetable-container.component.css']\n})\nexport class LeaguetableContainerComponent implements OnInit {\n\n  \n  leaguetable: any[] = [];\n  league: any = {};\n\n  constructor(\n    private footballdataService: FootballdataService,\n    private route: ActivatedRoute\n  ) { }\n\n  public getLeagueTable(id: Number) {\n    this.footballdataService.getLeagueTable(id)\n    .subscribe(response => {\n      console.log(\"Data: \", response.response[0].league.standings[0]);\n      this.leaguetable = response.response[0].league.standings[0];\n      this.league = response.response[0].league;\n    },\n    (error) => {                             \n      console.error('Request failed with error', error)\n    })\n  }\n  \n  ngOnInit(): void {\n    const routeParams = this.route.snapshot.paramMap;\n    const leagueIdFromRoute = Number(routeParams.get('leagueId'));\n    // this.getLeagueTable(leagueIdFromRoute);\n  }\n}\n",
+            "sourceCode": "import { Component, OnInit } from '@angular/core';\nimport { FootballdataService } from '../../services/footballdata.service';\nimport { ActivatedRoute } from '@angular/router';\n\n@Component({\n  selector: 'app-leaguetable-container',\n  template: `\n    <app-leaguetable [leaguetable]=\"leaguetable\" [league]=\"league\"></app-leaguetable>\n  `,\n  styleUrls: ['./leaguetable-container.component.css']\n})\nexport class LeaguetableContainerComponent implements OnInit {\n\n  \n  leaguetable: any[] = [];\n  league: any = {};\n\n  constructor(\n    private footballdataService: FootballdataService,\n    private route: ActivatedRoute\n  ) { }\n\n  public getLeagueTable(id: Number) {\n    this.footballdataService.getLeagueTable(id)\n    .subscribe(response => {\n      console.log(\"Data: \", response.response[0].league.standings[0]);\n      this.leaguetable = response.response[0].league.standings[0];\n      this.league = response.response[0].league;\n    },\n    (error) => {                             \n      console.error('Request failed with error', error)\n    })\n  }\n  \n  ngOnInit(): void {\n    const routeParams = this.route.snapshot.paramMap;\n    const leagueIdFromRoute = Number(routeParams.get('leagueId'));\n    this.getLeagueTable(leagueIdFromRoute);\n  }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": [
                 {
@@ -857,9 +948,65 @@
             ],
             "stylesData": ""
         },
+        {
+            "name": "TableCellComponent",
+            "id": "component-TableCellComponent-e479d96f8cf3db6034c56d9303e77b1b",
+            "file": "src/app/components/table-cell/table-cell.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "app-table-cell",
+            "styleUrls": [
+                "./table-cell.component.css"
+            ],
+            "styles": [],
+            "templateUrl": [
+                "./table-cell.component.html"
+            ],
+            "viewProviders": [],
+            "inputsClass": [],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [
+                {
+                    "name": "ngOnInit",
+                    "args": [],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 12
+                }
+            ],
+            "hostBindings": [],
+            "hostListeners": [],
+            "description": "",
+            "rawdescription": "",
+            "type": "component",
+            "sourceCode": "import { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-table-cell',\n  templateUrl: './table-cell.component.html',\n  styleUrls: ['./table-cell.component.css']\n})\nexport class TableCellComponent implements OnInit {\n\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n}\n",
+            "assetsDirs": [],
+            "styleUrlsData": [
+                {
+                    "data": "",
+                    "styleUrl": "./table-cell.component.css"
+                }
+            ],
+            "stylesData": "",
+            "constructorObj": {
+                "name": "constructor",
+                "description": "",
+                "args": [],
+                "line": 8
+            },
+            "implements": [
+                "OnInit"
+            ],
+            "templateData": "<p>table-cell works!</p>\n"
+        },
         {
             "name": "TeamCardComponent",
-            "id": "component-TeamCardComponent-e1d20f94240717480cbdae8218b64eae",
+            "id": "component-TeamCardComponent-98abe39f859b4ae11e2e4416a22094f1",
             "file": "src/app/components/team-card/team-card.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -896,7 +1043,16 @@
                 }
             ],
             "outputsClass": [],
-            "propertiesClass": [],
+            "propertiesClass": [
+                {
+                    "name": "loader",
+                    "defaultValue": "false",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 14
+                }
+            ],
             "methodsClass": [
                 {
                     "name": "ngOnInit",
@@ -904,7 +1060,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 16
+                    "line": 18
                 }
             ],
             "hostBindings": [],
@@ -912,7 +1068,7 @@
             "description": "",
             "rawdescription": "",
             "type": "component",
-            "sourceCode": "import { Component, OnInit, Input } from '@angular/core';\n\n@Component({\n  selector: 'app-team-card',\n  templateUrl: './team-card.component.html',\n  styleUrls: ['./team-card.component.css']\n})\nexport class TeamCardComponent implements OnInit {\n\n  @Input() info : any = {};\n  @Input() team : any = {};\n  @Input() form : any[] = [];\n\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n}\n",
+            "sourceCode": "import { Component, OnInit, Input } from '@angular/core';\n\n@Component({\n  selector: 'app-team-card',\n  templateUrl: './team-card.component.html',\n  styleUrls: ['./team-card.component.css']\n})\nexport class TeamCardComponent implements OnInit {\n\n  @Input() info : any = {};\n  @Input() team : any = {};\n  @Input() form : any[] = [];\n\n  loader = false;\n\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n}\n",
             "assetsDirs": [],
             "styleUrlsData": [
                 {
@@ -925,12 +1081,12 @@
                 "name": "constructor",
                 "description": "",
                 "args": [],
-                "line": 12
+                "line": 14
             },
             "implements": [
                 "OnInit"
             ],
-            "templateData": "\n  <div *ngIf=\"loader\" class=\"d-flex justify-content-center\">\n    <div class=\"spinner-border\" role=\"status\" >\n      <span class=\"sr-only\" id=\"loading\"></span>\n    </div>\n  </div>\n  <div *ngIf=\"!loader\" class=\"wrapper\" style=\"background-image: url({{info.venue.image}});\">\n    <div class=\"profile-card js-profile-card\">\n      <div class=\"profile-card__img\">\n        <img src={{info.team.logo}} alt=\"profile card\">\n      </div>\n  \n      <div class=\"profile-card__cnt js-profile-cnt\">\n        <div class=\"profile-card__name\">{{info.team.name}}</div>\n        <div class=\"profile-card__txt\">League <strong>{{team.league.name}}</strong></div>\n        <div class=\"profile-card__txt\">Stadium: <strong>{{info.venue.name}}</strong></div>\n        <div class=\"profile-card-loc\">\n          <span class=\"profile-card-loc__icon\">\n            <svg class=\"icon\"><use xlink:href=\"#icon-location\"></use></svg>\n          </span>\n  \n          <span class=\"profile-card-loc__txt\">\n            {{info.venue.city}}, {{info.team.country}}\n          </span>\n        </div>\n  \n        <div class=\"profile-card-inf\">\n          <div class=\"profile-card-inf__item\">\n            <div class=\"profile-card-inf__title\">{{info.team.founded}}</div>\n            <div class=\"profile-card-inf__txt\">Founded</div>\n          </div>\n  \n          <div class=\"profile-card-inf__item\">\n            <div class=\"profile-card-inf__title\">{{info.venue.capacity}}</div>\n            <div class=\"profile-card-inf__txt\">Capacity</div>\n          </div>\n  \n          <div class=\"profile-card-inf__item\">\n            <div class=\"profile-card-inf__title\">{{info.venue.surface}}</div>\n            <div class=\"profile-card-inf__txt\">Pitch Surface</div>\n          </div>\n        </div>\n        \n  \n        <div class=\"profile-card-social\">\n          <div *ngFor=\"let match of form\">\n            <a *ngIf=\"match == 'W'\" href=\"https://www.facebook.com/iaMuhammedErdem\" class=\"profile-card-social__item facebook\" target=\"_blank\" >\n              <span class=\"icon-font\">\n                {{match}}\n              </span>\n            </a>\n            <a *ngIf=\"match == 'L'\" href=\"https://www.facebook.com/iaMuhammedErdem\" class=\"profile-card-social__item instagram\" target=\"_blank\" >\n              <span class=\"icon-font\">\n                {{match}}\n              </span>\n            </a>\n            <a *ngIf=\"match == 'D'\" href=\"https://www.facebook.com/iaMuhammedErdem\" class=\"profile-card-social__item twitter\" target=\"_blank\" >\n              <span class=\"icon-font\">\n                {{match}}\n              </span>\n            </a>\n          </div>\n        </div>\n      </div>\n  \n  \n    </div>\n  \n  </div>\n  \n  <svg hidden=\"hidden\">\n    <defs>\n      <symbol id=\"icon-codepen\" viewBox=\"0 0 32 32\">\n        <title>codepen</title>\n        <path d=\"M31.872 10.912v-0.032c0-0.064 0-0.064 0-0.096v-0.064c0-0.064 0-0.064-0.064-0.096 0 0 0-0.064-0.064-0.064 0-0.064-0.064-0.064-0.064-0.096 0 0 0-0.064-0.064-0.064 0-0.064-0.064-0.064-0.064-0.096l-0.192-0.192v-0.064l-0.064-0.064-14.592-9.696c-0.448-0.32-1.056-0.32-1.536 0l-14.528 9.696-0.32 0.32c0 0-0.064 0.064-0.064 0.096 0 0 0 0.064-0.064 0.064 0 0.064-0.064 0.064-0.064 0.096 0 0 0 0.064-0.064 0.064 0 0.064 0 0.064-0.064 0.096v0.064c0 0.064 0 0.064 0 0.096v0.064c0 0.064 0 0.096 0 0.16v9.696c0 0.064 0 0.096 0 0.16v0.064c0 0.064 0 0.064 0 0.096v0.064c0 0.064 0 0.064 0.064 0.096 0 0 0 0.064 0.064 0.064 0 0.064 0.064 0.064 0.064 0.096 0 0 0 0.064 0.064 0.064 0 0.064 0.064 0.064 0.064 0.096l0.256 0.256 0.064 0.032 14.528 9.728c0.224 0.16 0.48 0.224 0.768 0.224s0.544-0.064 0.768-0.224l14.528-9.728 0.32-0.32c0 0 0.064-0.064 0.064-0.096 0 0 0-0.064 0.064-0.064 0-0.064 0.064-0.064 0.064-0.096 0 0 0-0.064 0.064-0.064 0-0.064 0-0.064 0.064-0.096v-0.032c0-0.064 0-0.064 0-0.096v-0.064c0-0.064 0-0.096 0-0.16v-9.664c0-0.064 0-0.096 0-0.224zM17.312 4l10.688 7.136-4.768 3.168-5.92-3.936v-6.368zM14.56 4v6.368l-5.92 3.968-4.768-3.168 10.688-7.168zM2.784 13.664l3.392 2.304-3.392 2.304c0 0 0-4.608 0-4.608zM14.56 28l-10.688-7.136 4.768-3.2 5.92 3.936v6.4zM15.936 19.2l-4.832-3.232 4.832-3.232 4.832 3.232-4.832 3.232zM17.312 28v-6.432l5.92-3.936 4.8 3.168-10.72 7.2zM29.12 18.272l-3.392-2.304 3.392-2.304v4.608z\"></path>\n      </symbol>\n  \n      <symbol id=\"icon-github\" viewBox=\"0 0 32 32\">\n        <title>github</title>\n        <path d=\"M16.192 0.512c-8.832 0-16 7.168-16 16 0 7.072 4.576 13.056 10.944 15.168 0.8 0.16 1.088-0.352 1.088-0.768 0-0.384 0-1.632-0.032-2.976-4.448 0.96-5.376-1.888-5.376-1.888-0.736-1.856-1.792-2.336-1.792-2.336-1.44-0.992 0.096-0.96 0.096-0.96 1.6 0.128 2.464 1.664 2.464 1.664 1.44 2.432 3.744 1.728 4.672 1.344 0.128-1.024 0.544-1.728 1.024-2.144-3.552-0.448-7.296-1.824-7.296-7.936 0-1.76 0.64-3.168 1.664-4.288-0.16-0.416-0.704-2.016 0.16-4.224 0 0 1.344-0.416 4.416 1.632 1.28-0.352 2.656-0.544 4-0.544s2.72 0.192 4 0.544c3.040-2.080 4.384-1.632 4.384-1.632 0.864 2.208 0.32 3.84 0.16 4.224 1.024 1.12 1.632 2.56 1.632 4.288 0 6.144-3.744 7.488-7.296 7.904 0.576 0.512 1.088 1.472 1.088 2.976 0 2.144-0.032 3.872-0.032 4.384 0 0.416 0.288 0.928 1.088 0.768 6.368-2.112 10.944-8.128 10.944-15.168 0-8.896-7.168-16.032-16-16.032z\"></path>\n        <path d=\"M6.24 23.488c-0.032 0.064-0.16 0.096-0.288 0.064-0.128-0.064-0.192-0.16-0.128-0.256 0.032-0.096 0.16-0.096 0.288-0.064 0.128 0.064 0.192 0.16 0.128 0.256v0z\"></path>\n        <path d=\"M6.912 24.192c-0.064 0.064-0.224 0.032-0.32-0.064s-0.128-0.256-0.032-0.32c0.064-0.064 0.224-0.032 0.32 0.064s0.096 0.256 0.032 0.32v0z\"></path>\n        <path d=\"M7.52 25.12c-0.096 0.064-0.256 0-0.352-0.128s-0.096-0.32 0-0.384c0.096-0.064 0.256 0 0.352 0.128 0.128 0.128 0.128 0.32 0 0.384v0z\"></path>\n        <path d=\"M8.384 26.016c-0.096 0.096-0.288 0.064-0.416-0.064s-0.192-0.32-0.096-0.416c0.096-0.096 0.288-0.064 0.416 0.064 0.16 0.128 0.192 0.32 0.096 0.416v0z\"></path>\n        <path d=\"M9.6 26.528c-0.032 0.128-0.224 0.192-0.384 0.128-0.192-0.064-0.288-0.192-0.256-0.32s0.224-0.192 0.416-0.128c0.128 0.032 0.256 0.192 0.224 0.32v0z\"></path>\n        <path d=\"M10.912 26.624c0 0.128-0.16 0.256-0.352 0.256s-0.352-0.096-0.352-0.224c0-0.128 0.16-0.256 0.352-0.256 0.192-0.032 0.352 0.096 0.352 0.224v0z\"></path>\n        <path d=\"M12.128 26.4c0.032 0.128-0.096 0.256-0.288 0.288s-0.352-0.032-0.384-0.16c-0.032-0.128 0.096-0.256 0.288-0.288s0.352 0.032 0.384 0.16v0z\"></path>\n      </symbol>\n  \n      <symbol id=\"icon-location\" viewBox=\"0 0 32 32\">\n        <title>location</title>\n        <path d=\"M16 31.68c-0.352 0-0.672-0.064-1.024-0.16-0.8-0.256-1.44-0.832-1.824-1.6l-6.784-13.632c-1.664-3.36-1.568-7.328 0.32-10.592 1.856-3.2 4.992-5.152 8.608-5.376h1.376c3.648 0.224 6.752 2.176 8.608 5.376 1.888 3.264 2.016 7.232 0.352 10.592l-6.816 13.664c-0.288 0.608-0.8 1.12-1.408 1.408-0.448 0.224-0.928 0.32-1.408 0.32zM15.392 2.368c-2.88 0.192-5.408 1.76-6.912 4.352-1.536 2.688-1.632 5.92-0.288 8.672l6.816 13.632c0.128 0.256 0.352 0.448 0.64 0.544s0.576 0.064 0.832-0.064c0.224-0.096 0.384-0.288 0.48-0.48l6.816-13.664c1.376-2.752 1.248-5.984-0.288-8.672-1.472-2.56-4-4.128-6.88-4.32h-1.216zM16 17.888c-3.264 0-5.92-2.656-5.92-5.92 0-3.232 2.656-5.888 5.92-5.888s5.92 2.656 5.92 5.92c0 3.264-2.656 5.888-5.92 5.888zM16 8.128c-2.144 0-3.872 1.728-3.872 3.872s1.728 3.872 3.872 3.872 3.872-1.728 3.872-3.872c0-2.144-1.76-3.872-3.872-3.872z\"></path>\n        <path d=\"M16 32c-0.384 0-0.736-0.064-1.12-0.192-0.864-0.288-1.568-0.928-1.984-1.728l-6.784-13.664c-1.728-3.456-1.6-7.52 0.352-10.912 1.888-3.264 5.088-5.28 8.832-5.504h1.376c3.744 0.224 6.976 2.24 8.864 5.536 1.952 3.36 2.080 7.424 0.352 10.912l-6.784 13.632c-0.32 0.672-0.896 1.216-1.568 1.568-0.48 0.224-0.992 0.352-1.536 0.352zM15.36 0.64h-0.064c-3.488 0.224-6.56 2.112-8.32 5.216-1.824 3.168-1.952 7.040-0.32 10.304l6.816 13.632c0.32 0.672 0.928 1.184 1.632 1.44s1.472 0.192 2.176-0.16c0.544-0.288 1.024-0.736 1.28-1.28l6.816-13.632c1.632-3.264 1.504-7.136-0.32-10.304-1.824-3.104-4.864-5.024-8.384-5.216h-1.312zM16 29.952c-0.16 0-0.32-0.032-0.448-0.064-0.352-0.128-0.64-0.384-0.8-0.704l-6.816-13.664c-1.408-2.848-1.312-6.176 0.288-8.96 1.536-2.656 4.16-4.32 7.168-4.512h1.216c3.040 0.192 5.632 1.824 7.2 4.512 1.6 2.752 1.696 6.112 0.288 8.96l-6.848 13.632c-0.128 0.288-0.352 0.512-0.64 0.64-0.192 0.096-0.384 0.16-0.608 0.16zM15.424 2.688c-2.784 0.192-5.216 1.696-6.656 4.192-1.504 2.592-1.6 5.696-0.256 8.352l6.816 13.632c0.096 0.192 0.256 0.32 0.448 0.384s0.416 0.064 0.608-0.032c0.16-0.064 0.288-0.192 0.352-0.352l6.816-13.664c1.312-2.656 1.216-5.792-0.288-8.352-1.472-2.464-3.904-4-6.688-4.16h-1.152zM16 18.208c-3.424 0-6.24-2.784-6.24-6.24 0-3.424 2.816-6.208 6.24-6.208s6.24 2.784 6.24 6.24c0 3.424-2.816 6.208-6.24 6.208zM16 6.4c-3.072 0-5.6 2.496-5.6 5.6 0 3.072 2.528 5.6 5.6 5.6s5.6-2.496 5.6-5.6c0-3.104-2.528-5.6-5.6-5.6zM16 16.16c-2.304 0-4.16-1.888-4.16-4.16s1.888-4.16 4.16-4.16c2.304 0 4.16 1.888 4.16 4.16s-1.856 4.16-4.16 4.16zM16 8.448c-1.952 0-3.552 1.6-3.552 3.552s1.6 3.552 3.552 3.552c1.952 0 3.552-1.6 3.552-3.552s-1.6-3.552-3.552-3.552z\"></path>\n      </symbol>\n  \n      <symbol id=\"icon-facebook\" viewBox=\"0 0 32 32\">\n        <title>facebook</title>\n        <path d=\"M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z\"></path>\n      </symbol>\n  \n      <symbol id=\"icon-instagram\" viewBox=\"0 0 32 32\">\n        <title>instagram</title>\n        <path d=\"M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z\"></path>\n        <path d=\"M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z\"></path>\n        <path d=\"M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z\"></path>\n      </symbol>\n  \n      <symbol id=\"icon-twitter\" viewBox=\"0 0 32 32\">\n        <title>twitter</title>\n        <path d=\"M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z\"></path>\n      </symbol>\n  \n      <symbol id=\"icon-behance\" viewBox=\"0 0 32 32\">\n        <title>behance</title>\n        <path d=\"M9.281 6.412c0.944 0 1.794 0.081 2.569 0.25 0.775 0.162 1.431 0.438 1.988 0.813 0.55 0.375 0.975 0.875 1.287 1.5 0.3 0.619 0.45 1.394 0.45 2.313 0 0.994-0.225 1.819-0.675 2.481-0.456 0.662-1.119 1.2-2.006 1.625 1.213 0.35 2.106 0.962 2.706 1.831 0.6 0.875 0.887 1.925 0.887 3.163 0 1-0.194 1.856-0.575 2.581-0.387 0.731-0.912 1.325-1.556 1.781-0.65 0.462-1.4 0.8-2.237 1.019-0.831 0.219-1.688 0.331-2.575 0.331h-9.544v-19.688h9.281zM8.719 14.363c0.769 0 1.406-0.181 1.906-0.55 0.5-0.363 0.738-0.963 0.738-1.787 0-0.456-0.081-0.838-0.244-1.131-0.169-0.294-0.387-0.525-0.669-0.688-0.275-0.169-0.588-0.281-0.956-0.344-0.356-0.069-0.731-0.1-1.113-0.1h-4.050v4.6h4.388zM8.956 22.744c0.425 0 0.831-0.038 1.213-0.125 0.387-0.087 0.731-0.219 1.019-0.419 0.287-0.194 0.531-0.45 0.706-0.788 0.175-0.331 0.256-0.756 0.256-1.275 0-1.012-0.287-1.738-0.856-2.175-0.569-0.431-1.325-0.644-2.262-0.644h-4.7v5.419h4.625z\"></path>\n        <path d=\"M22.663 22.675c0.587 0.575 1.431 0.863 2.531 0.863 0.788 0 1.475-0.2 2.044-0.6s0.913-0.825 1.044-1.262h3.45c-0.556 1.719-1.394 2.938-2.544 3.675-1.131 0.738-2.519 1.113-4.125 1.113-1.125 0-2.131-0.181-3.038-0.538-0.906-0.363-1.663-0.869-2.3-1.531-0.619-0.663-1.106-1.45-1.45-2.375-0.337-0.919-0.512-1.938-0.512-3.038 0-1.069 0.175-2.063 0.525-2.981 0.356-0.925 0.844-1.719 1.494-2.387s1.413-1.2 2.313-1.588c0.894-0.387 1.881-0.581 2.975-0.581 1.206 0 2.262 0.231 3.169 0.706 0.9 0.469 1.644 1.1 2.225 1.887s0.994 1.694 1.25 2.706c0.256 1.012 0.344 2.069 0.275 3.175h-10.294c0 1.119 0.375 2.188 0.969 2.756zM27.156 15.188c-0.462-0.512-1.256-0.794-2.212-0.794-0.625 0-1.144 0.106-1.556 0.319-0.406 0.213-0.738 0.475-0.994 0.787-0.25 0.313-0.425 0.65-0.525 1.006-0.1 0.344-0.163 0.663-0.181 0.938h6.375c-0.094-1-0.438-1.738-0.906-2.256z\"></path>\n        <path d=\"M20.887 8h7.981v1.944h-7.981v-1.944z\"></path>\n      </symbol>\n  \n      <symbol id=\"icon-link\" viewBox=\"0 0 32 32\">\n        <title>link</title>\n        <path d=\"M17.984 11.456c-0.704 0.704-0.704 1.856 0 2.56 2.112 2.112 2.112 5.568 0 7.68l-5.12 5.12c-2.048 2.048-5.632 2.048-7.68 0-1.024-1.024-1.6-2.4-1.6-3.84s0.576-2.816 1.6-3.84c0.704-0.704 0.704-1.856 0-2.56s-1.856-0.704-2.56 0c-1.696 1.696-2.624 3.968-2.624 6.368 0 2.432 0.928 4.672 2.656 6.4 1.696 1.696 3.968 2.656 6.4 2.656s4.672-0.928 6.4-2.656l5.12-5.12c3.52-3.52 3.52-9.248 0-12.8-0.736-0.672-1.888-0.672-2.592 0.032z\"></path>\n        <path d=\"M29.344 2.656c-1.696-1.728-3.968-2.656-6.4-2.656s-4.672 0.928-6.4 2.656l-5.12 5.12c-3.52 3.52-3.52 9.248 0 12.8 0.352 0.352 0.8 0.544 1.28 0.544s0.928-0.192 1.28-0.544c0.704-0.704 0.704-1.856 0-2.56-2.112-2.112-2.112-5.568 0-7.68l5.12-5.12c2.048-2.048 5.632-2.048 7.68 0 1.024 1.024 1.6 2.4 1.6 3.84s-0.576 2.816-1.6 3.84c-0.704 0.704-0.704 1.856 0 2.56s1.856 0.704 2.56 0c1.696-1.696 2.656-3.968 2.656-6.4s-0.928-4.704-2.656-6.4z\"></path>\n      </symbol>\n    </defs>\n  </svg>\n  \n  "
+            "templateData": "\n  <div *ngIf=\"loader\" class=\"d-flex justify-content-center\">\n    <div class=\"spinner-border\" role=\"status\" >\n      <span class=\"sr-only\" id=\"loading\"></span>\n    </div>\n  </div>\n  <div *ngIf=\"!loader\" class=\"wrapper\" style=\"background-image: url({{info.venue.image}});\">\n    <div class=\"profile-card js-profile-card\">\n      <div class=\"profile-card__img\">\n        <img src={{info.team.logo}} alt=\"profile card\">\n      </div>\n  \n      <div class=\"profile-card__cnt js-profile-cnt\">\n        <div class=\"profile-card__name\">{{info.team.name}}</div>\n        <div class=\"profile-card__txt\">League: <strong>{{team.league.name}}</strong></div>\n        <div class=\"profile-card__txt\">Stadium: <strong>{{info.venue.name}}</strong></div>\n        <div class=\"profile-card-loc\">\n          <span class=\"profile-card-loc__icon\">\n            <svg class=\"icon\"><use xlink:href=\"#icon-location\"></use></svg>\n          </span>\n  \n          <span class=\"profile-card-loc__txt\">\n            {{info.venue.city}}, {{info.team.country}}\n          </span>\n        </div>\n  \n        <div class=\"profile-card-inf\">\n          <div class=\"profile-card-inf__item\">\n            <div class=\"profile-card-inf__title\">{{info.team.founded}}</div>\n            <div class=\"profile-card-inf__txt\">Founded</div>\n          </div>\n  \n          <div class=\"profile-card-inf__item\">\n            <div class=\"profile-card-inf__title\">{{info.venue.capacity}}</div>\n            <div class=\"profile-card-inf__txt\">Capacity</div>\n          </div>\n  \n          <div class=\"profile-card-inf__item\">\n            <div class=\"profile-card-inf__title\">{{info.venue.surface}}</div>\n            <div class=\"profile-card-inf__txt\">Pitch Surface</div>\n          </div>\n        </div>\n        \n  \n        <div class=\"profile-card-social\">\n          <div *ngFor=\"let match of form\">\n            <a *ngIf=\"match == 'W'\" href=\"https://www.facebook.com/iaMuhammedErdem\" class=\"profile-card-social__item facebook\" target=\"_blank\" >\n              <span class=\"icon-font\">\n                {{match}}\n              </span>\n            </a>\n            <a *ngIf=\"match == 'L'\" href=\"https://www.facebook.com/iaMuhammedErdem\" class=\"profile-card-social__item instagram\" target=\"_blank\" >\n              <span class=\"icon-font\">\n                {{match}}\n              </span>\n            </a>\n            <a *ngIf=\"match == 'D'\" href=\"https://www.facebook.com/iaMuhammedErdem\" class=\"profile-card-social__item twitter\" target=\"_blank\" >\n              <span class=\"icon-font\">\n                {{match}}\n              </span>\n            </a>\n          </div>\n        </div>\n      </div>\n  \n  \n    </div>\n  \n  </div>\n  \n  <svg hidden=\"hidden\">\n    <defs>\n      <symbol id=\"icon-codepen\" viewBox=\"0 0 32 32\">\n        <title>codepen</title>\n        <path d=\"M31.872 10.912v-0.032c0-0.064 0-0.064 0-0.096v-0.064c0-0.064 0-0.064-0.064-0.096 0 0 0-0.064-0.064-0.064 0-0.064-0.064-0.064-0.064-0.096 0 0 0-0.064-0.064-0.064 0-0.064-0.064-0.064-0.064-0.096l-0.192-0.192v-0.064l-0.064-0.064-14.592-9.696c-0.448-0.32-1.056-0.32-1.536 0l-14.528 9.696-0.32 0.32c0 0-0.064 0.064-0.064 0.096 0 0 0 0.064-0.064 0.064 0 0.064-0.064 0.064-0.064 0.096 0 0 0 0.064-0.064 0.064 0 0.064 0 0.064-0.064 0.096v0.064c0 0.064 0 0.064 0 0.096v0.064c0 0.064 0 0.096 0 0.16v9.696c0 0.064 0 0.096 0 0.16v0.064c0 0.064 0 0.064 0 0.096v0.064c0 0.064 0 0.064 0.064 0.096 0 0 0 0.064 0.064 0.064 0 0.064 0.064 0.064 0.064 0.096 0 0 0 0.064 0.064 0.064 0 0.064 0.064 0.064 0.064 0.096l0.256 0.256 0.064 0.032 14.528 9.728c0.224 0.16 0.48 0.224 0.768 0.224s0.544-0.064 0.768-0.224l14.528-9.728 0.32-0.32c0 0 0.064-0.064 0.064-0.096 0 0 0-0.064 0.064-0.064 0-0.064 0.064-0.064 0.064-0.096 0 0 0-0.064 0.064-0.064 0-0.064 0-0.064 0.064-0.096v-0.032c0-0.064 0-0.064 0-0.096v-0.064c0-0.064 0-0.096 0-0.16v-9.664c0-0.064 0-0.096 0-0.224zM17.312 4l10.688 7.136-4.768 3.168-5.92-3.936v-6.368zM14.56 4v6.368l-5.92 3.968-4.768-3.168 10.688-7.168zM2.784 13.664l3.392 2.304-3.392 2.304c0 0 0-4.608 0-4.608zM14.56 28l-10.688-7.136 4.768-3.2 5.92 3.936v6.4zM15.936 19.2l-4.832-3.232 4.832-3.232 4.832 3.232-4.832 3.232zM17.312 28v-6.432l5.92-3.936 4.8 3.168-10.72 7.2zM29.12 18.272l-3.392-2.304 3.392-2.304v4.608z\"></path>\n      </symbol>\n  \n      <symbol id=\"icon-github\" viewBox=\"0 0 32 32\">\n        <title>github</title>\n        <path d=\"M16.192 0.512c-8.832 0-16 7.168-16 16 0 7.072 4.576 13.056 10.944 15.168 0.8 0.16 1.088-0.352 1.088-0.768 0-0.384 0-1.632-0.032-2.976-4.448 0.96-5.376-1.888-5.376-1.888-0.736-1.856-1.792-2.336-1.792-2.336-1.44-0.992 0.096-0.96 0.096-0.96 1.6 0.128 2.464 1.664 2.464 1.664 1.44 2.432 3.744 1.728 4.672 1.344 0.128-1.024 0.544-1.728 1.024-2.144-3.552-0.448-7.296-1.824-7.296-7.936 0-1.76 0.64-3.168 1.664-4.288-0.16-0.416-0.704-2.016 0.16-4.224 0 0 1.344-0.416 4.416 1.632 1.28-0.352 2.656-0.544 4-0.544s2.72 0.192 4 0.544c3.040-2.080 4.384-1.632 4.384-1.632 0.864 2.208 0.32 3.84 0.16 4.224 1.024 1.12 1.632 2.56 1.632 4.288 0 6.144-3.744 7.488-7.296 7.904 0.576 0.512 1.088 1.472 1.088 2.976 0 2.144-0.032 3.872-0.032 4.384 0 0.416 0.288 0.928 1.088 0.768 6.368-2.112 10.944-8.128 10.944-15.168 0-8.896-7.168-16.032-16-16.032z\"></path>\n        <path d=\"M6.24 23.488c-0.032 0.064-0.16 0.096-0.288 0.064-0.128-0.064-0.192-0.16-0.128-0.256 0.032-0.096 0.16-0.096 0.288-0.064 0.128 0.064 0.192 0.16 0.128 0.256v0z\"></path>\n        <path d=\"M6.912 24.192c-0.064 0.064-0.224 0.032-0.32-0.064s-0.128-0.256-0.032-0.32c0.064-0.064 0.224-0.032 0.32 0.064s0.096 0.256 0.032 0.32v0z\"></path>\n        <path d=\"M7.52 25.12c-0.096 0.064-0.256 0-0.352-0.128s-0.096-0.32 0-0.384c0.096-0.064 0.256 0 0.352 0.128 0.128 0.128 0.128 0.32 0 0.384v0z\"></path>\n        <path d=\"M8.384 26.016c-0.096 0.096-0.288 0.064-0.416-0.064s-0.192-0.32-0.096-0.416c0.096-0.096 0.288-0.064 0.416 0.064 0.16 0.128 0.192 0.32 0.096 0.416v0z\"></path>\n        <path d=\"M9.6 26.528c-0.032 0.128-0.224 0.192-0.384 0.128-0.192-0.064-0.288-0.192-0.256-0.32s0.224-0.192 0.416-0.128c0.128 0.032 0.256 0.192 0.224 0.32v0z\"></path>\n        <path d=\"M10.912 26.624c0 0.128-0.16 0.256-0.352 0.256s-0.352-0.096-0.352-0.224c0-0.128 0.16-0.256 0.352-0.256 0.192-0.032 0.352 0.096 0.352 0.224v0z\"></path>\n        <path d=\"M12.128 26.4c0.032 0.128-0.096 0.256-0.288 0.288s-0.352-0.032-0.384-0.16c-0.032-0.128 0.096-0.256 0.288-0.288s0.352 0.032 0.384 0.16v0z\"></path>\n      </symbol>\n  \n      <symbol id=\"icon-location\" viewBox=\"0 0 32 32\">\n        <title>location</title>\n        <path d=\"M16 31.68c-0.352 0-0.672-0.064-1.024-0.16-0.8-0.256-1.44-0.832-1.824-1.6l-6.784-13.632c-1.664-3.36-1.568-7.328 0.32-10.592 1.856-3.2 4.992-5.152 8.608-5.376h1.376c3.648 0.224 6.752 2.176 8.608 5.376 1.888 3.264 2.016 7.232 0.352 10.592l-6.816 13.664c-0.288 0.608-0.8 1.12-1.408 1.408-0.448 0.224-0.928 0.32-1.408 0.32zM15.392 2.368c-2.88 0.192-5.408 1.76-6.912 4.352-1.536 2.688-1.632 5.92-0.288 8.672l6.816 13.632c0.128 0.256 0.352 0.448 0.64 0.544s0.576 0.064 0.832-0.064c0.224-0.096 0.384-0.288 0.48-0.48l6.816-13.664c1.376-2.752 1.248-5.984-0.288-8.672-1.472-2.56-4-4.128-6.88-4.32h-1.216zM16 17.888c-3.264 0-5.92-2.656-5.92-5.92 0-3.232 2.656-5.888 5.92-5.888s5.92 2.656 5.92 5.92c0 3.264-2.656 5.888-5.92 5.888zM16 8.128c-2.144 0-3.872 1.728-3.872 3.872s1.728 3.872 3.872 3.872 3.872-1.728 3.872-3.872c0-2.144-1.76-3.872-3.872-3.872z\"></path>\n        <path d=\"M16 32c-0.384 0-0.736-0.064-1.12-0.192-0.864-0.288-1.568-0.928-1.984-1.728l-6.784-13.664c-1.728-3.456-1.6-7.52 0.352-10.912 1.888-3.264 5.088-5.28 8.832-5.504h1.376c3.744 0.224 6.976 2.24 8.864 5.536 1.952 3.36 2.080 7.424 0.352 10.912l-6.784 13.632c-0.32 0.672-0.896 1.216-1.568 1.568-0.48 0.224-0.992 0.352-1.536 0.352zM15.36 0.64h-0.064c-3.488 0.224-6.56 2.112-8.32 5.216-1.824 3.168-1.952 7.040-0.32 10.304l6.816 13.632c0.32 0.672 0.928 1.184 1.632 1.44s1.472 0.192 2.176-0.16c0.544-0.288 1.024-0.736 1.28-1.28l6.816-13.632c1.632-3.264 1.504-7.136-0.32-10.304-1.824-3.104-4.864-5.024-8.384-5.216h-1.312zM16 29.952c-0.16 0-0.32-0.032-0.448-0.064-0.352-0.128-0.64-0.384-0.8-0.704l-6.816-13.664c-1.408-2.848-1.312-6.176 0.288-8.96 1.536-2.656 4.16-4.32 7.168-4.512h1.216c3.040 0.192 5.632 1.824 7.2 4.512 1.6 2.752 1.696 6.112 0.288 8.96l-6.848 13.632c-0.128 0.288-0.352 0.512-0.64 0.64-0.192 0.096-0.384 0.16-0.608 0.16zM15.424 2.688c-2.784 0.192-5.216 1.696-6.656 4.192-1.504 2.592-1.6 5.696-0.256 8.352l6.816 13.632c0.096 0.192 0.256 0.32 0.448 0.384s0.416 0.064 0.608-0.032c0.16-0.064 0.288-0.192 0.352-0.352l6.816-13.664c1.312-2.656 1.216-5.792-0.288-8.352-1.472-2.464-3.904-4-6.688-4.16h-1.152zM16 18.208c-3.424 0-6.24-2.784-6.24-6.24 0-3.424 2.816-6.208 6.24-6.208s6.24 2.784 6.24 6.24c0 3.424-2.816 6.208-6.24 6.208zM16 6.4c-3.072 0-5.6 2.496-5.6 5.6 0 3.072 2.528 5.6 5.6 5.6s5.6-2.496 5.6-5.6c0-3.104-2.528-5.6-5.6-5.6zM16 16.16c-2.304 0-4.16-1.888-4.16-4.16s1.888-4.16 4.16-4.16c2.304 0 4.16 1.888 4.16 4.16s-1.856 4.16-4.16 4.16zM16 8.448c-1.952 0-3.552 1.6-3.552 3.552s1.6 3.552 3.552 3.552c1.952 0 3.552-1.6 3.552-3.552s-1.6-3.552-3.552-3.552z\"></path>\n      </symbol>\n  \n      <symbol id=\"icon-facebook\" viewBox=\"0 0 32 32\">\n        <title>facebook</title>\n        <path d=\"M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z\"></path>\n      </symbol>\n  \n      <symbol id=\"icon-instagram\" viewBox=\"0 0 32 32\">\n        <title>instagram</title>\n        <path d=\"M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z\"></path>\n        <path d=\"M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z\"></path>\n        <path d=\"M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z\"></path>\n      </symbol>\n  \n      <symbol id=\"icon-twitter\" viewBox=\"0 0 32 32\">\n        <title>twitter</title>\n        <path d=\"M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z\"></path>\n      </symbol>\n  \n      <symbol id=\"icon-behance\" viewBox=\"0 0 32 32\">\n        <title>behance</title>\n        <path d=\"M9.281 6.412c0.944 0 1.794 0.081 2.569 0.25 0.775 0.162 1.431 0.438 1.988 0.813 0.55 0.375 0.975 0.875 1.287 1.5 0.3 0.619 0.45 1.394 0.45 2.313 0 0.994-0.225 1.819-0.675 2.481-0.456 0.662-1.119 1.2-2.006 1.625 1.213 0.35 2.106 0.962 2.706 1.831 0.6 0.875 0.887 1.925 0.887 3.163 0 1-0.194 1.856-0.575 2.581-0.387 0.731-0.912 1.325-1.556 1.781-0.65 0.462-1.4 0.8-2.237 1.019-0.831 0.219-1.688 0.331-2.575 0.331h-9.544v-19.688h9.281zM8.719 14.363c0.769 0 1.406-0.181 1.906-0.55 0.5-0.363 0.738-0.963 0.738-1.787 0-0.456-0.081-0.838-0.244-1.131-0.169-0.294-0.387-0.525-0.669-0.688-0.275-0.169-0.588-0.281-0.956-0.344-0.356-0.069-0.731-0.1-1.113-0.1h-4.050v4.6h4.388zM8.956 22.744c0.425 0 0.831-0.038 1.213-0.125 0.387-0.087 0.731-0.219 1.019-0.419 0.287-0.194 0.531-0.45 0.706-0.788 0.175-0.331 0.256-0.756 0.256-1.275 0-1.012-0.287-1.738-0.856-2.175-0.569-0.431-1.325-0.644-2.262-0.644h-4.7v5.419h4.625z\"></path>\n        <path d=\"M22.663 22.675c0.587 0.575 1.431 0.863 2.531 0.863 0.788 0 1.475-0.2 2.044-0.6s0.913-0.825 1.044-1.262h3.45c-0.556 1.719-1.394 2.938-2.544 3.675-1.131 0.738-2.519 1.113-4.125 1.113-1.125 0-2.131-0.181-3.038-0.538-0.906-0.363-1.663-0.869-2.3-1.531-0.619-0.663-1.106-1.45-1.45-2.375-0.337-0.919-0.512-1.938-0.512-3.038 0-1.069 0.175-2.063 0.525-2.981 0.356-0.925 0.844-1.719 1.494-2.387s1.413-1.2 2.313-1.588c0.894-0.387 1.881-0.581 2.975-0.581 1.206 0 2.262 0.231 3.169 0.706 0.9 0.469 1.644 1.1 2.225 1.887s0.994 1.694 1.25 2.706c0.256 1.012 0.344 2.069 0.275 3.175h-10.294c0 1.119 0.375 2.188 0.969 2.756zM27.156 15.188c-0.462-0.512-1.256-0.794-2.212-0.794-0.625 0-1.144 0.106-1.556 0.319-0.406 0.213-0.738 0.475-0.994 0.787-0.25 0.313-0.425 0.65-0.525 1.006-0.1 0.344-0.163 0.663-0.181 0.938h6.375c-0.094-1-0.438-1.738-0.906-2.256z\"></path>\n        <path d=\"M20.887 8h7.981v1.944h-7.981v-1.944z\"></path>\n      </symbol>\n  \n      <symbol id=\"icon-link\" viewBox=\"0 0 32 32\">\n        <title>link</title>\n        <path d=\"M17.984 11.456c-0.704 0.704-0.704 1.856 0 2.56 2.112 2.112 2.112 5.568 0 7.68l-5.12 5.12c-2.048 2.048-5.632 2.048-7.68 0-1.024-1.024-1.6-2.4-1.6-3.84s0.576-2.816 1.6-3.84c0.704-0.704 0.704-1.856 0-2.56s-1.856-0.704-2.56 0c-1.696 1.696-2.624 3.968-2.624 6.368 0 2.432 0.928 4.672 2.656 6.4 1.696 1.696 3.968 2.656 6.4 2.656s4.672-0.928 6.4-2.656l5.12-5.12c3.52-3.52 3.52-9.248 0-12.8-0.736-0.672-1.888-0.672-2.592 0.032z\"></path>\n        <path d=\"M29.344 2.656c-1.696-1.728-3.968-2.656-6.4-2.656s-4.672 0.928-6.4 2.656l-5.12 5.12c-3.52 3.52-3.52 9.248 0 12.8 0.352 0.352 0.8 0.544 1.28 0.544s0.928-0.192 1.28-0.544c0.704-0.704 0.704-1.856 0-2.56-2.112-2.112-2.112-5.568 0-7.68l5.12-5.12c2.048-2.048 5.632-2.048 7.68 0 1.024 1.024 1.6 2.4 1.6 3.84s-0.576 2.816-1.6 3.84c-0.704 0.704-0.704 1.856 0 2.56s1.856 0.704 2.56 0c1.696-1.696 2.656-3.968 2.656-6.4s-0.928-4.704-2.656-6.4z\"></path>\n      </symbol>\n    </defs>\n  </svg>\n  \n  "
         },
         {
             "name": "TeamComponent",
@@ -1201,6 +1357,9 @@
                         {
                             "name": "LeaguetableContainerComponent"
                         },
+                        {
+                            "name": "TableCellComponent"
+                        },
                         {
                             "name": "TeamCardComponent"
                         },
@@ -1267,6 +1426,22 @@
     ],
     "miscellaneous": {
         "variables": [
+            {
+                "name": "actionsData",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/app/components/league/League.stories.ts",
+                "type": "object",
+                "defaultValue": "{\n  onClickLeague: action('onClickLeague')\n}"
+            },
+            {
+                "name": "actionsData",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/app/components/leaguetable/Leaguetable.stories.ts",
+                "type": "object",
+                "defaultValue": "{\n  onClickTeam: action('onClickTeam')\n}"
+            },
             {
                 "name": "context",
                 "ctype": "miscellaneous",
@@ -1279,17 +1454,17 @@
                 "name": "environment",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/environments/environment.ts",
+                "file": "src/environments/environment.prod.ts",
                 "type": "object",
-                "defaultValue": "{\n  production: false\n}"
+                "defaultValue": "{\n  production: true\n}"
             },
             {
                 "name": "environment",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/environments/environment.prod.ts",
+                "file": "src/environments/environment.ts",
                 "type": "object",
-                "defaultValue": "{\n  production: true\n}"
+                "defaultValue": "{\n  production: false\n}"
             },
             {
                 "name": "EPL",
@@ -1307,6 +1482,14 @@
                 "type": "",
                 "defaultValue": "Template.bind({})"
             },
+            {
+                "name": "Laliga",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/app/components/league/League.stories.ts",
+                "type": "",
+                "defaultValue": "Template.bind({})"
+            },
             {
                 "name": "Large",
                 "ctype": "miscellaneous",
@@ -1430,17 +1613,17 @@
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/app/components/league/League.stories.ts",
-                "type": "Story<LeagueComponent>",
+                "file": "src/app/components/fact-card/Factcard.stories.ts",
+                "type": "Story<FactCardComponent>",
                 "defaultValue": "args => ({\n  props: {\n    ...args\n  },\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/app/components/fact-card/Factcard.stories.ts",
-                "type": "Story<FactCardComponent>",
-                "defaultValue": "args => ({\n  props: {\n    ...args\n  },\n})"
+                "file": "src/app/components/league/League.stories.ts",
+                "type": "Story<LeagueComponent>",
+                "defaultValue": "args => ({\n  props: {\n    ...args,\n    onClickLeague: actionsData.onClickLeague,\n  },\n})"
             },
             {
                 "name": "Template",
@@ -1448,7 +1631,7 @@
                 "subtype": "variable",
                 "file": "src/app/components/leaguetable/Leaguetable.stories.ts",
                 "type": "Story<LeaguetableComponent>",
-                "defaultValue": "args => ({\n  props: {\n    ...args\n  },\n})"
+                "defaultValue": "args => ({\n  props: {\n    ...args,\n    onClickTeam: actionsData.onClickTeam\n  },\n})"
             },
             {
                 "name": "Template",
@@ -1479,6 +1662,66 @@
         "typealiases": [],
         "enumerations": [],
         "groupedVariables": {
+            "src/app/components/league/League.stories.ts": [
+                {
+                    "name": "actionsData",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/app/components/league/League.stories.ts",
+                    "type": "object",
+                    "defaultValue": "{\n  onClickLeague: action('onClickLeague')\n}"
+                },
+                {
+                    "name": "EPL",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/app/components/league/League.stories.ts",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
+                {
+                    "name": "Laliga",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/app/components/league/League.stories.ts",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
+                {
+                    "name": "Template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/app/components/league/League.stories.ts",
+                    "type": "Story<LeagueComponent>",
+                    "defaultValue": "args => ({\n  props: {\n    ...args,\n    onClickLeague: actionsData.onClickLeague,\n  },\n})"
+                }
+            ],
+            "src/app/components/leaguetable/Leaguetable.stories.ts": [
+                {
+                    "name": "actionsData",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/app/components/leaguetable/Leaguetable.stories.ts",
+                    "type": "object",
+                    "defaultValue": "{\n  onClickTeam: action('onClickTeam')\n}"
+                },
+                {
+                    "name": "LeagueTable",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/app/components/leaguetable/Leaguetable.stories.ts",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
+                {
+                    "name": "Template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/app/components/leaguetable/Leaguetable.stories.ts",
+                    "type": "Story<LeaguetableComponent>",
+                    "defaultValue": "args => ({\n  props: {\n    ...args,\n    onClickTeam: actionsData.onClickTeam\n  },\n})"
+                }
+            ],
             "src/test.ts": [
                 {
                     "name": "context",
@@ -1496,16 +1739,6 @@
                     "type": "literal type"
                 }
             ],
-            "src/environments/environment.ts": [
-                {
-                    "name": "environment",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/environments/environment.ts",
-                    "type": "object",
-                    "defaultValue": "{\n  production: false\n}"
-                }
-            ],
             "src/environments/environment.prod.ts": [
                 {
                     "name": "environment",
@@ -1516,22 +1749,14 @@
                     "defaultValue": "{\n  production: true\n}"
                 }
             ],
-            "src/app/components/league/League.stories.ts": [
-                {
-                    "name": "EPL",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/app/components/league/League.stories.ts",
-                    "type": "",
-                    "defaultValue": "Template.bind({})"
-                },
+            "src/environments/environment.ts": [
                 {
-                    "name": "Template",
+                    "name": "environment",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/app/components/league/League.stories.ts",
-                    "type": "Story<LeagueComponent>",
-                    "defaultValue": "args => ({\n  props: {\n    ...args\n  },\n})"
+                    "file": "src/environments/environment.ts",
+                    "type": "object",
+                    "defaultValue": "{\n  production: false\n}"
                 }
             ],
             "src/app/components/fact-card/Factcard.stories.ts": [
@@ -1604,24 +1829,6 @@
                     "defaultValue": "[\n    {\n        id: 39,\n        name: \"Premier League\", \n        country: \"England\",\n        logo: \"https://media.api-sports.io/football/leagues/39.png\"\n    },\n    {\n        id: 140,\n        name: \"La Liga\", \n        country: \"Spain\",\n        logo: \"https://media.api-sports.io/football/leagues/140.png\"\n    },\n    {\n        id: 71,\n        name: \"Serie A\", \n        country: \"Italy\",\n        logo: \"https://media.api-sports.io/football/leagues/71.png\"\n    },\n    {\n        id: 186,\n        name: \"Ligue 1\", \n        country: \"France\",\n        logo: \"https://media.api-sports.io/football/leagues/186.png\"\n    }\n]"
                 }
             ],
-            "src/app/components/leaguetable/Leaguetable.stories.ts": [
-                {
-                    "name": "LeagueTable",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/app/components/leaguetable/Leaguetable.stories.ts",
-                    "type": "",
-                    "defaultValue": "Template.bind({})"
-                },
-                {
-                    "name": "Template",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/app/components/leaguetable/Leaguetable.stories.ts",
-                    "type": "Story<LeaguetableComponent>",
-                    "defaultValue": "args => ({\n  props: {\n    ...args\n  },\n})"
-                }
-            ],
             "src/stories/Header.stories.ts": [
                 {
                     "name": "LoggedIn",
@@ -1793,6 +2000,16 @@
                 "coverageCount": "0/6",
                 "status": "low"
             },
+            {
+                "filePath": "src/app/components/league/League.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "actionsData",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/app/components/league/League.stories.ts",
                 "type": "variable",
@@ -1803,6 +2020,16 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/app/components/league/League.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Laliga",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/app/components/league/League.stories.ts",
                 "type": "variable",
@@ -1819,7 +2046,7 @@
                 "linktype": "component",
                 "name": "LeagueComponent",
                 "coveragePercent": 0,
-                "coverageCount": "0/4",
+                "coverageCount": "0/6",
                 "status": "low"
             },
             {
@@ -1840,6 +2067,16 @@
                 "coverageCount": "0/6",
                 "status": "low"
             },
+            {
+                "filePath": "src/app/components/leaguetable/Leaguetable.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "actionsData",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/app/components/leaguetable/Leaguetable.stories.ts",
                 "type": "variable",
@@ -1866,7 +2103,16 @@
                 "linktype": "component",
                 "name": "LeaguetableComponent",
                 "coveragePercent": 0,
-                "coverageCount": "0/5",
+                "coverageCount": "0/7",
+                "status": "low"
+            },
+            {
+                "filePath": "src/app/components/table-cell/table-cell.component.ts",
+                "type": "component",
+                "linktype": "component",
+                "name": "TableCellComponent",
+                "coveragePercent": 0,
+                "coverageCount": "0/3",
                 "status": "low"
             },
             {
@@ -1895,7 +2141,7 @@
                 "linktype": "component",
                 "name": "TeamCardComponent",
                 "coveragePercent": 0,
-                "coverageCount": "0/6",
+                "coverageCount": "0/7",
                 "status": "low"
             },
             {
diff --git a/src/app/components/league/League.stories.ts b/src/app/components/league/League.stories.ts
index 2ca5a90..4d3d57b 100644
--- a/src/app/components/league/League.stories.ts
+++ b/src/app/components/league/League.stories.ts
@@ -17,12 +17,18 @@ export default {
     }),
   ],
   title: 'League',
+  excludeStories: /.*Data$/
 } as Meta;
 
+export const actionsData = {
+  onClickLeague: action('onClickLeague')
+}
+
 
 const Template: Story<LeagueComponent> = args => ({
   props: {
-    ...args
+    ...args,
+    onClickLeague: actionsData.onClickLeague,
   },
 });
 
@@ -36,3 +42,13 @@ EPL.args = {
   },
 };
 
+export const Laliga = Template.bind({});
+Laliga.args = {
+  league: {
+    id: leagueslist[1].id,
+    name: leagueslist[1].name,
+    country: leagueslist[1].country,
+    logo: leagueslist[1].logo
+  },
+};
+
diff --git a/src/app/components/league/league.component.html b/src/app/components/league/league.component.html
index f73724d..f36e014 100644
--- a/src/app/components/league/league.component.html
+++ b/src/app/components/league/league.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="!league">
     Undefined
 </div>
-<div *ngIf="league" class="league-div" [title]="league.name">
+<div *ngIf="league" class="league-div" [title]="league.name" (click)="onNavigate(league.id, league.name)" >
     <img class="image" src={{league.logo}} />
     <div class="league-info">
         <span class="league-name">{{league.name}}</span><br />
diff --git a/src/app/components/league/league.component.ts b/src/app/components/league/league.component.ts
index 7244b34..695389d 100644
--- a/src/app/components/league/league.component.ts
+++ b/src/app/components/league/league.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 import { LeaguesInterface } from '../../models/leagues.model';
 
@@ -13,6 +13,15 @@ export class LeagueComponent implements OnInit {
 
   @Input() league: LeaguesInterface | undefined;
 
+  @Output()
+  onClickLeague = new EventEmitter();
+
+  onNavigate(id: any, name: any) {
+    this.onClickLeague.emit([id, name]);
+    window.location.href = `/leagues/${id}`;
+    // alert(`Ideally would navigate to the ${name}'s table`);
+  }
+
   ngOnInit(): void {
   }
 
diff --git a/src/app/components/leagues/leagues.component.ts b/src/app/components/leagues/leagues.component.ts
index 3fe5962..3c7f795 100644
--- a/src/app/components/leagues/leagues.component.ts
+++ b/src/app/components/leagues/leagues.component.ts
@@ -10,9 +10,9 @@ import { leagueslist } from '../../models/leagues'
   <div class="container" >
 
     <h2>Leagues</h2>
-    <a *ngFor="let league of leagues" [routerLink]="['/leagues', league.id]">
+    <div *ngFor="let league of leagues">
       <app-league [league]="league"></app-league>
-    </a>
+    </div>
 </div>
 `,
   styleUrls: ['./leagues.component.css']
diff --git a/src/app/components/leaguetable-container/leaguetable-container.component.ts b/src/app/components/leaguetable-container/leaguetable-container.component.ts
index 496f42a..6db1d25 100644
--- a/src/app/components/leaguetable-container/leaguetable-container.component.ts
+++ b/src/app/components/leaguetable-container/leaguetable-container.component.ts
@@ -35,6 +35,6 @@ export class LeaguetableContainerComponent implements OnInit {
   ngOnInit(): void {
     const routeParams = this.route.snapshot.paramMap;
     const leagueIdFromRoute = Number(routeParams.get('leagueId'));
-    // this.getLeagueTable(leagueIdFromRoute);
+    this.getLeagueTable(leagueIdFromRoute);
   }
 }
diff --git a/src/app/components/leaguetable/Leaguetable.stories.ts b/src/app/components/leaguetable/Leaguetable.stories.ts
index cf79bcf..1042142 100644
--- a/src/app/components/leaguetable/Leaguetable.stories.ts
+++ b/src/app/components/leaguetable/Leaguetable.stories.ts
@@ -16,12 +16,18 @@ export default {
     }),
   ],
   title: 'LeagueTable',
+  excludeStories: /.*Data$/
 } as Meta;
 
+export const actionsData = {
+  onClickTeam: action('onClickTeam')
+}
+
 
 const Template: Story<LeaguetableComponent> = args => ({
   props: {
-    ...args
+    ...args,
+    onClickTeam: actionsData.onClickTeam
   },
 });
 
diff --git a/src/app/components/leaguetable/leaguetable.component.css b/src/app/components/leaguetable/leaguetable.component.css
index 218dbb8..1ec797f 100644
--- a/src/app/components/leaguetable/leaguetable.component.css
+++ b/src/app/components/leaguetable/leaguetable.component.css
@@ -30,6 +30,9 @@ td{
 }
 .team {
     display: flex;
+    text-decoration: underline;
+    color: #327feb;
+    cursor: pointer;
     flex-direction: row;
     align-items: center;
 }
diff --git a/src/app/components/leaguetable/leaguetable.component.html b/src/app/components/leaguetable/leaguetable.component.html
index c678664..a9ea834 100644
--- a/src/app/components/leaguetable/leaguetable.component.html
+++ b/src/app/components/leaguetable/leaguetable.component.html
@@ -1,6 +1,6 @@
 <!-- <span>asdas {{league.name}} {{leaguetable[0].team.name}}</span> -->
 <div *ngIf="!league">
-    sdsad
+    loading
 </div>
 <div class="container table" *ngIf="league">
     <h2>{{league.name}}</h2>
@@ -22,7 +22,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let team of leaguetable">
+          <tr *ngFor="let team of leaguetable" (click)="onPressTeam(team.team.id, league.id, team.team.name)">
             <td>{{team.rank}}</td>
             <td colspan="2">
               <!-- <a [title]="team.team.name" [routerLink]="['/team', league.id, team.team.id]"> -->
diff --git a/src/app/components/leaguetable/leaguetable.component.ts b/src/app/components/leaguetable/leaguetable.component.ts
index b64febe..ad6327d 100644
--- a/src/app/components/leaguetable/leaguetable.component.ts
+++ b/src/app/components/leaguetable/leaguetable.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Select, Store } from '@ngxs/store';
 // import { LeagueState, FetchTable } from '../../state/leaguetable.sate';
 import { Observable } from 'rxjs';
@@ -16,6 +16,15 @@ export class LeaguetableComponent implements OnInit {
   @Input() leaguetable : any[] = []; 
   @Input() league : any = {};
 
+  @Output()
+  onClickTeam = new EventEmitter();
+
+  onPressTeam(teamid: any, leagueid: any, name: any) {
+    this.onClickTeam.emit([teamid, leagueid, name]);
+    window.location.href = `/team/${teamid}/${leagueid}`;
+    // alert(`Ideally would take to ${name}'s details`);
+  }
+
   constructor(
   ) { }
   
diff --git a/src/app/components/team-card/team-card.component.html b/src/app/components/team-card/team-card.component.html
index 2eac81a..7b719b8 100644
--- a/src/app/components/team-card/team-card.component.html
+++ b/src/app/components/team-card/team-card.component.html
@@ -12,7 +12,7 @@
   
       <div class="profile-card__cnt js-profile-cnt">
         <div class="profile-card__name">{{info.team.name}}</div>
-        <div class="profile-card__txt">League <strong>{{team.league.name}}</strong></div>
+        <div class="profile-card__txt">League: <strong>{{team.league.name}}</strong></div>
         <div class="profile-card__txt">Stadium: <strong>{{info.venue.name}}</strong></div>
         <div class="profile-card-loc">
           <span class="profile-card-loc__icon">
@@ -44,17 +44,17 @@
   
         <div class="profile-card-social">
           <div *ngFor="let match of form">
-            <a *ngIf="match == 'W'" href="https://www.facebook.com/iaMuhammedErdem" class="profile-card-social__item facebook" target="_blank" >
+            <a *ngIf="match == 'W'"  class="profile-card-social__item facebook" target="_blank" >
               <span class="icon-font">
                 {{match}}
               </span>
             </a>
-            <a *ngIf="match == 'L'" href="https://www.facebook.com/iaMuhammedErdem" class="profile-card-social__item instagram" target="_blank" >
+            <a *ngIf="match == 'L'" class="profile-card-social__item instagram" target="_blank" >
               <span class="icon-font">
                 {{match}}
               </span>
             </a>
-            <a *ngIf="match == 'D'" href="https://www.facebook.com/iaMuhammedErdem" class="profile-card-social__item twitter" target="_blank" >
+            <a *ngIf="match == 'D'" class="profile-card-social__item twitter" target="_blank" >
               <span class="icon-font">
                 {{match}}
               </span>
diff --git a/src/app/components/team-card/team-card.component.ts b/src/app/components/team-card/team-card.component.ts
index 4a0c784..48dfd5d 100644
--- a/src/app/components/team-card/team-card.component.ts
+++ b/src/app/components/team-card/team-card.component.ts
@@ -11,6 +11,8 @@ export class TeamCardComponent implements OnInit {
   @Input() team : any = {};
   @Input() form : any[] = [];
 
+  loader = false;
+
   constructor() { }
 
   ngOnInit(): void {
-- 
GitLab