title: Instance variable not assigned in Observable<> subscribe?
body: <p>My games array is not being assigned when subscribing from Obersavable for some reason even though I for sure get the correct data (array) back from the server.</p>
  
  <p>Here is <strong>my game.service.ts:</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Game } from '../models/game';
  import { of, Observable } from 'rxjs';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { catchError, map, tap } from 'rxjs/operators';
  import { NGXLogger } from 'ngx-logger';
  
  @Injectable({
    providedIn: 'root'
  })
  export class GameService {
    private gamesUrl: string = 'api/games';
  
    constructor(private http: HttpClient, private logger: NGXLogger) { }
  
    getGames(): Observable&lt;Game[]&gt; {
      return this.http.get&lt;Game[]&gt;(this.gamesUrl);
    }
  
    getGame(id: number): Observable&lt;Game&gt; {
      const url: string = (`${this.gamesUrl}/${id}`);
      return this.http.get&lt;Game&gt;(url).pipe(tap(_ =&gt; this.logger.debug(`fetched game id=${id}`)), catchError(this.handleError&lt;Game&gt;(`getGame id=${id}`)));
    }
  
    log (operation: string) {
      console.log(operation);
    }
  
      /**
     * Handle Http operation that failed.
     * Let the app continue.
     * @param operation - name of the operation that failed
     * @param result - optional value to return as the observable result
     */
    private handleError&lt;T&gt; (operation = 'operation', result?: T) {
      return (error: any): Observable&lt;T&gt; =&gt; {
  
        console.error(error); // log to console instead
        this.logger.debug(`${operation} failed: ${error.message}`);
        return of(result as T);
      };
    }
  }
  </code></pre>
  
  <p>And here is my <strong>games.component.ts:</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Game } from '../../models/game';
  import { GameService } from 'src/app/services/game.service';
  import { Observable } from 'rxjs';
  
  @Component({
    selector: 'app-games',
    templateUrl: './games.component.html',
    styleUrls: ['./games.component.css']
  })
  export class GamesComponent implements OnInit {
    games: Game[];
  
    constructor(private gameService: GameService) { 
    }
  
    ngOnInit() {
      this.getGames();
    }
  
    getGames(): void {
      this.gameService.getGames().subscribe(games =&gt; this.games = games);
      console.log(`games: ${this.games}`);
    }
  
    getGame(id: number): Observable&lt;Game&gt; {
      return this.gameService.getGame(id);
    }
  }
  </code></pre>
  
  <p>As you can see, I am making a call to <strong>getGames</strong> in <strong>games.component.ts</strong> in which the <strong>game.service.ts</strong> is returning the response (Observable) back.</p>
  
  <p>For some reason subscribe(games => this.games = games) does not work and I get 'undefined' for the games instance variable.
  I for sure am getting the correct response as <strong>subscribe(games => console.log(games))</strong> does not show 'undefined' but an array of Objects instead.</p>
  
  <p>Why isn't my instance variable being assigned?</p>
  
  <p><strong>Edit:
  Here is the output in console.log if I do subscribe(games => console.log(games))</strong></p>
  
  <p><a href="https://i.stack.imgur.com/0J1i4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0J1i4.png" alt="enter image description here"></a></p>
  
  <p><strong>Edit:
  If I do the following the console log is correct. But if I reference the 'games' array outside of it, I get undefined again:</strong></p>
  
  <pre><code>  getGames(): void {
      this.gameService.getGames().subscribe((games) =&gt; {
        this.games = games;
        console.log(`games: ${this.games}`);
      });
      console.log(`all games: ${this.games}`); //this is undefined
    }
  </code></pre>
  
  <p><strong>EDIT: SOLVED - THANK YOU dileepkumar jami</strong>
  The solution was to remove the $ symbol and '| async' in my template:</p>
  
  <pre><code>&lt;li *ngFor="let game of games$ | async"&gt;{{game.title}}&lt;/li&gt;
  </code></pre>
  
  <p>to</p>
  
  <pre><code>&lt;li *ngFor="let game of games"&gt;{{game.title}}&lt;/li&gt;
  </code></pre>