title: How can I access object from component in my constant?
body: <p>I have a component that has several functions that subscribes to data returned from an observable in my service. This is working properly, but I would like to refactor my code so I can access that data in my constant and simply loop through the data in my view. </p>
  
  <p>The problem I'm having is when I want to read a property on my object from my constant e.g. <code>value: this.price.market_price_usd,</code> I get a undefined error in my console. I've also tried to interpolate data by doing something like <code>value: '${this.price.market_price_usd}',</code>. This simply just returns a string. It appears the problem is that my constant is not aware of this data. How can I refactor my code so I can access this data in my constant and read it in my template? Below is the relevant code.</p>
  
  <p><strong>Component</strong></p>
  
  <pre><code>constructor(private data: DataService) {
      this.loadstate = data.loadstate;
      this.subscription = data.nameChange.subscribe((value) =&gt; {
          this.loadstate = value;
      });
  }
  
  getPrice() {
      this.data.getData(this.API_Price)
      .subscribe( 
          price =&gt; this.price = price,
          error =&gt; this.errorMessage_price = &lt;any&gt;error);
  
  }
  
  getBlockSize() {
      this.data.getData(this.API_Block_Size)
      .subscribe(
          size =&gt; this.size = size.toFixed(2),
          error =&gt; this.errorMessage_size = &lt;any&gt;error);
  }
  
  getTransactions() {
      this.data.getData(this.API_Transactions)
      .subscribe(
          transactions =&gt; this.transactions = transactions.values.slice(-1)[0].y.toLocaleString(),
          error =&gt; this.errorMessage_transactions = &lt;any&gt;error);
  }
  
  getMempool() {
      this.data.getData(this.API_Mempool)
      .subscribe(
          mempool =&gt; this.mempool = Math.trunc(mempool.values[0].y).toLocaleString(),
          error =&gt; this.errorMessage_mempool = &lt;any&gt;error);
  }
  </code></pre>
  
  <p><strong>Constant</strong></p>
  
  <pre><code>export const statsConstant = {
  STATS: {
      ERROR: {
          message_1: 'There is a problem connecting to the API.',
          message_2: 'Please wait a moment and try again.'
      },
      ROW_1: [
      {
          title: 'Market Price USD',
          value: this.price.market_price_usd,
          error: 'errorMessage_price',
          errorMessage_1: 'There is a problem connecting to the API.',
          errorMessage_2: 'Please wait a moment and try again.',
          subtitle: 'Average USD market price across major bitcoin exchanges',
          symbol: 'USD'
      },
      {
          title: 'Average Block Size',
          value: this.size,
          error: 'errorMessage_size',
          errorMessage_1: 'There is a problem connecting to the API.',
          errorMessage_2: 'Please wait a moment and try again.',
          subtitle: 'The 24 hour average block size in MB.',
          symbol: 'Megabytes'
      }
      ],
      ROW_2: [
      {
          title: 'Transactions per Day',
          subtitle: 'The aggregate number of confirmed Bitcoin transactions in the past 24 hours.'
      },
      {
          title: 'Mempool Size',
          subtitle: 'The aggregate size of transactions waiting to be confirmed.'
      }
      ]
  }
  }
  </code></pre>
  
  <p><strong>Template</strong></p>
  
  <pre><code> &lt;div class="row"&gt;
      &lt;div 
          class="col-sm-6 stats"
          *ngFor="let stat of stats.STATS.ROW_1"&gt;
          &lt;div class="u-centerX"&gt;
              &lt;h5&gt;{{stat.title}}&lt;/h5&gt;
          &lt;/div&gt;
           &lt;div class="u-centerX"&gt;
              &lt;div 
                  class="alert alert-danger" role="alert"
                  *ngIf="stat.error === true"&gt;
                  &lt;p&gt;{{stat.errorMessage_1}}.&lt;/p&gt;
                  &lt;p&gt;{{stat.errorMessage_2}}.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="u-centerX"&gt;
               &lt;div 
                  *ngIf="loadstate"
                  class="loader"&gt;
              &lt;/div&gt;
              &lt;div
                  *ngIf="price.market_price_usd"
                  class="stats-data"&gt;
                  &lt;a href="https://blockchain.info/charts/market-price"&gt;
                      &lt;h1&gt;${{stat.value}}&lt;/h1&gt;
                      &lt;span&gt;{{stat.symbol}}&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="u-centerX"&gt;
              &lt;p&gt;{{stat.subtitle}}&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>