title: How to show a div by clicking on the table row in Angular 2
body: <p>I am making an app using Angular 2. 
  There is one table using <code>*ngFor</code> of Angular 2. Code is like below,</p>
  
  <pre><code>&lt;tr *ngFor="let l of league"&gt;
              &lt;td&gt;{{l.position}}&lt;/td&gt;
              &lt;td&gt; &lt;img [src]="l.crestURI" [alt]="l.teamName" width="50px" height="50px"&gt;&lt;a href="#" (click)="getTeams(l._links.team.href); showPlayers == true"&gt;{{l.teamName}}&lt;/a&gt;              &lt;/td&gt;
              &lt;td&gt;{{l.playedGames}}&lt;/td&gt;
              &lt;td&gt;{{l.wins}}&lt;/td&gt;
              &lt;td&gt;{{l.losses}}&lt;/td&gt;
              &lt;td&gt;{{l.points}}&lt;/td&gt;
              &lt;td&gt;{{l.goals}}&lt;/td&gt;
              &lt;td&gt;{{l.goalsAgainst}}&lt;/td&gt;
              &lt;td&gt;{{l.goalDifference}}&lt;/td&gt;
            &lt;/tr&gt;
  </code></pre>
  
  <p>Now I want to show the players info of the particular team after clicking the name of the team in such a way that only the particular team's players will be there. And on the click of the team name again/ click some other team name it would be hidden.</p>
  
  <p>I call the service to get the players info of the team correctly. But get confused how to show using Angular 2. </p>