title: Angular 2 select <li> and get the text
body: <p>I'm doing an angular2 project and I am struggling with this...
  I'm trying to get the text of an li of game lobbies when I click on it.
  There is an image to give you an idea of what I have:
  <a href="https://i.stack.imgur.com/8Jg7T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Jg7T.png" alt="enter image description here"></a></p>
  
  <p>These are my files:</p>
  
  <p>gamelobby.component.html:</p>
  
  <pre><code>&lt;h2&gt;Game Lobbies&lt;/h2&gt;
  
  &lt;div class='games'&gt;
      &lt;ul&gt;
          &lt;li *ngFor="let m of gameLobby"&gt;{{m}}&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>gamelobby.component.ts:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { WebSocketService } from '../services/websocket.service';
  
  
  @Component({
      moduleId: module.id,
      selector: 'gamelobby',
      styleUrls: [ 'gamelobby.component.css' ],
      templateUrl: 'gamelobby.component.html'
  })
  export class GameLobbyComponent implements OnInit{
  
      gameLobby: string[] = [];  
      mouseover:boolean = false;
  
      constructor(private websocketService: WebSocketService) {
      }
  
      ngOnInit() {
          this.websocketService
              .getLobbies()
              .subscribe((m:any) =&gt; this.gameLobby.push(&lt;string&gt;m));
      }      
  }
  </code></pre>
  
  <p>I have no clue how can I do it, I tried to do (click)="myMethod" to see if it would do something. But I did it wrong...</p>
  
  <p>Is there any way to do it?</p>
  
  <p>Thank you in advance.</p>