title: Behaviour subject does not update on change Async Angular 10
body: <p>I have an <code>Observable</code> list that I show in my component. But when I update the list through my backend, the list does not update <code>async</code> in my component view..</p>
  <p>My service (where the list is stored):</p>
  <pre class="lang-typescript prettyprint-override"><code>    export class GameService {
        games: Game[] = []
        public gameSubject = new BehaviorSubject&lt;Game[]&gt;(this.games);
        public readonly games$ = this.gameSubject.asObservable();
      
        constructor(private http: HttpClient) {
          this.getAllGames().subscribe(response =&gt; this.gameSubject.next(response))
         }
      
        public createGame(game: Game): Observable&lt;Game&gt; {
          const url = 'http://localhost:8080/api/games';
          return this.http.post&lt;Game&gt;(url, game);
        }
      
        public createAndUpdate(game: Game): void { 
          this.createGame(game).subscribe();
          this.getAllGames().subscribe(response =&gt; this.gameSubject.next(response))
      
        }
      
        public getGame(id: number): Observable&lt;Game&gt; {
          const url = 'http://localhost:8080/api/games/sessieId' + id;
          return this.http.get&lt;Game&gt;(url);
        }
      
        public getAllGames(): Observable&lt;Game[]&gt; {
          const url = 'http://localhost:8080/api/games';
          return this.http.get&lt;Game[]&gt;(url);
        }
      
      }
  </code></pre>
  <p>The <code>component</code> (where I display the list)</p>
  <pre class="lang-html prettyprint-override"><code>     &lt;div fxLayout=&quot;column&quot; fxLayoutAlign=&quot;center center&quot;&gt;
                &lt;ng-template ngFor let-j=&quot;index&quot; let-playerA [ngForOf]=&quot;gameService.games$ | async&quot;&gt;
                  &lt;div fxFlex fxLayout=&quot;row&quot; *ngIf=&quot;j % 3 == 0&quot;&gt;
                    &lt;ng-template ngFor let-i=&quot;index&quot; let-player [ngForOf]=&quot;gameService.games$ | async&quot;&gt;
                      &lt;div fxFlex *ngIf=&quot;i &lt; j + 3 &amp;&amp; i &gt;= j&quot;&gt;
                        &lt;mat-card class=&quot;player-card&quot;&gt;
                          &lt;mat-card-header&gt;   
                            &lt;mat-card-title&gt;{{ player.user }}&lt;/mat-card-title&gt;
                          &lt;/mat-card-header&gt;
                          &lt;mat-card-content&gt;
                            &lt;img src=&quot;assets/pictures/man.png&quot; /&gt;
                          &lt;/mat-card-content&gt;
                        &lt;/mat-card&gt;
                      &lt;/div&gt;
                    &lt;/ng-template&gt;
                  &lt;/div&gt;
                &lt;/ng-template&gt;
              &lt;/div&gt;
  </code></pre>
  <p>I call this method when updating the list (creating a new item) (method from service):</p>
  <pre class="lang-typescript prettyprint-override"><code>    public createAndUpdate(game: Game): void { 
          this.createGame(game).subscribe();
          this.getAllGames().subscribe(response =&gt; this.gameSubject.next(response))
      
        }
  </code></pre>
  <p>But I still need to refresh the page to see the changes</p>