title: Angular 6: View is not updated when Subscribe method is called
body: <p>This question is a based on this one (the solution provided didn't work):
  <a href="https://stackoverflow.com/questions/48063654/angular-4-update-template-variable-after-api-call">Angular 4: Update template variable after API call [duplicate]</a></p>
  
  <p>I'm tring to update view after an api call using HttpClient, but my html template doesn't update.</p>
  
  <p><strong>product.ts</strong></p>
  
  <pre><code>export class ProductModel {
  ID:number;
  Name:String;
  CategoryName:String;
  Price:number;
  OldPrice:number;
  IsNew:Boolean;
  InStock:Boolean;
  Image:String;
  </code></pre>
  
  <p>}</p>
  
  <p><strong>products.service.ts</strong></p>
  
  <pre><code>import { Component, Injectable, Injector } from '@angular/core';
  import { Http, Headers, Response, RequestOptions } from '@angular/http';
  import { HttpClient, HttpParams, HttpHeaders, HttpResponse, HttpErrorResponse } from '@angular/common/http';
  
  import { Router } from '@angular/router';
  import { Observable } from 'rxjs';
  import { map} from 'rxjs/operators';
  
  import { ProductModel } from 'src/app/models/product';
  
  @Injectable()
  export class ProductsService { 
  
    constructor(private http: HttpClient) { } 
  
    GetProducts(): Observable&lt;ProductModel[]&gt;{      
        return this.http.get&lt;ProductModel[]&gt;('https://myapi.com/api/products');
      } 
  }
  </code></pre>
  
  <p><strong>products.component.ts</strong></p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit, ViewEncapsulation, ViewChild, ChangeDetectorRef } from '@angular/core';
  import { MatToolbarModule } from '@angular/material/toolbar';
  import { MatSidenav } from '@angular/material/sidenav';
  import {MatExpansionModule} from '@angular/material/expansion';
  
  import {Observable} from 'rxjs';
  import { map } from 'rxjs/operators';
  
  import * as $ from 'jquery';
  
  import {ProductsService} from '../../services/products.service';
  
  import { ProductModel } from 'src/app/models/product';
  
  @Component({
    selector: 'app-products',
    templateUrl: './products.component.html',
    styleUrls: ['./products.component.css'],
    providers: [ProductsService],
    encapsulation: ViewEncapsulation.None 
  })
  export class ProductsComponent implements OnInit { 
    @ViewChild('sidenav') sidenav: MatSidenav;
  
    public productsList = [];
    private reason:string;
  
    constructor(private _productsService: ProductsService, 
      private _ref: ChangeDetectorRef) {  
    }
  
    ngOnInit(){ 
      this.GetProducts();  
      console.log(this.productsList);
    } 
  
    close(reason: string) {
      this.reason = reason;
      this.sidenav.close();
    }
  
    GetProducts(){  
      this._productsService.GetProducts()
      .subscribe(
        response =&gt; {
          this.productsList = response; 
          this._ref.markForCheck();
          console.log(this.productsList);
        },
        error =&gt; { console.log(error) }
      );  
    }  
  
  }
  </code></pre>
  
  <p><strong>products.component.html</strong></p>
  
  <pre><code> &lt;ul&gt;
    &lt;li *ngFor="let prod of productsList" &gt;
      Id: {{prod.ID}} &lt;br&gt;
      Name: {{prod.Name}} &lt;br&gt;
      CategoryName: {{prod.CategoryName}} &lt;br&gt;
      Price: {{prod.Price}} &lt;br&gt;
      OldPrice: {{prod.OldPrice}} &lt;br&gt;
      IsNew: {{prod.IsNew}} &lt;br&gt;
      InStock: {{prod.InStock}} &lt;br&gt;
      Image: {{prod.Image}} &lt;br&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "smak",
    "version": "0.0.0",
    "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.3",
    "@angular/animations": "^6.0.4",
    "@angular/cdk": "^6.1.0",
    "@angular/common": "^6.0.4",
    "@angular/compiler": "^6.0.4",
    "@angular/core": "^6.0.4",
    "@angular/forms": "^6.0.4",
    "@angular/http": "^6.0.4",
    "@angular/material": "^6.1.0",
    "@angular/platform-browser": "^6.0.4",
    "@angular/platform-browser-dynamic": "^6.0.4",
    "@angular/router": "^6.0.4",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "jquery": "^3.3.1",
    "rxjs": "^6.2.1",
    "zone.js": "^0.8.26"
  },
    "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.3",
    "@angular/cli": "~6.0.3",
    "@angular/compiler-cli": "^6.0.4",
    "@angular/language-service": "^6.0.4",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.2",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
  }
  </code></pre>
  
  <p>See my console.log
  <a href="https://i.stack.imgur.com/6Zumo.png" rel="nofollow noreferrer">view console log</a></p>
  
  <p>If u see the my console log my variable is being affected (inside subscription) but outside subscription my variable is being empty.</p>
  
  <p>Has anyone had the same problem?
  How can I solve? Is this a bug?</p>
  
  <p>Best Regards,</p>