title: Unable to retrieve the values in my cardTiles var
body: <p>I have a variable cardTiles in my angular 9 component. </p>
  
  <p>I have defined the variable as </p>
  
  <pre><code>cardTitles:Product[] = [];
  </code></pre>
  
  <p>Product is defined as below </p>
  
  <pre><code>export class Product{
  productName: string;}
  </code></pre>
  
  <p>When i console.log(this.cardTiles, "2") I get the screenshot below(ignore the first console log entry of undefined): 
  <a href="https://i.stack.imgur.com/0H39q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0H39q.png" alt="enter image description here"></a></p>
  
  <p>I have tried accessing the items in the cardTiles var but I cannot. </p>
  
  <p>I have tried cardTiles[0], cardTiles["0"], cardTiles[0][0], among others so maybe am not seeing something. </p>
  
  <p>MyComponent.ts is as below</p>
  
  <pre><code>import {Component, OnDestroy, OnInit} from '@angular/core';
  import { NbThemeService } from '@nebular/theme';
  import { takeWhile } from 'rxjs/operators';
  import { ProductService } from '../products/products.service';
  import { Product } from '../products/products';
  
  interface CardSettings {
    title: string;
    iconClass: string;
    type: string;
    amount: string;
    currency1: string;
  }
  
  
  @Component({
    selector: 'ngx-dashboard',
    styleUrls: ['./dashboard.component.scss'],
    templateUrl: './dashboard.component.html',
  })
  export class DashboardComponent implements OnDestroy, OnInit {
  
    cardTitles:Product[] = [];
    private alive = true;
  
    statusCards: string;
  
    commonStatusCardsSet: CardSettings[] = [
    ]
  
    statusCardsByThemes: {
      default: CardSettings[];
    } = {
      default: this.commonStatusCardsSet,
    };
  
    constructor(
      private productService: ProductService,
      private themeService: NbThemeService) {
  
      this.themeService.getJsTheme()
        .pipe(takeWhile(() =&gt; this.alive))
        .subscribe(theme =&gt; {
          // get products
          this.productService._getProducts().subscribe(results =&gt; {
  
            this.cardTitles.push(results["payload"]);
  
          });
          //generate cards here
          this.statusCards = this.statusCardsByThemes[theme.name]; 
  
        });    
    }
  
    ngOnInit(): void {
  
      console.log(this.cardTitles[0].productName);
    }
  
    ngOnDestroy() {
      this.alive = false;
    }
  }
  </code></pre>
  
  <p>Thank you in advance.</p>