title: Why is this expression in my Angular app displaying the literal text rather than the result of the evaluated expression?
body: <p>I am trying to figure out why a section of my Angular app is displaying - literally - 'zipcodeFilters.text', as opposed to the evaluated result of this. </p>
  
  <p>The relevant view code I'm using here looks like this:</p>
  
  <pre><code>&lt;filter-option name="Zipcode"
          placeholder="Enter ZIP Code"
          [usePlaceholder]="!zipcodeFilters.text"
          [visible]="zipcodeFilters.enabled"&gt;
      &lt;filter-label&gt;{{zipcodeFilters.text}}&lt;/filter-label&gt;
      &lt;filter-menu&gt;
          &lt;div class="visit-type-filter-options"&gt;
              &lt;md-input-container [dividerColor]="color"&gt;
                  &lt;input mdInput placeholder="ZIP Code" 
                         value="zipcodeFilters.text" 
                         [(ngModel)]="zipcodeFilters.text" 
                         (keyup.enter)="filterByZip(zipcodeFilters.text)"&gt;
              &lt;/md-input-container&gt;
              &lt;button md-button class="reset-button" (click)="filterByZip(zipcodeFilters.text)"&gt;Filter&lt;/button&gt;
              &lt;button md-button class="reset-button" (click)="unfilterZipResults()"&gt;Reset&lt;/button&gt;
          &lt;/div&gt;
      &lt;/filter-menu&gt;
  &lt;/filter-option&gt;
  </code></pre>
  
  <p>From the above section you'll see that:</p>
  
  <pre><code>    placeholder="Enter ZIP Code"
      [usePlaceholder]="!zipcodeFilters.text"
  </code></pre>
  
  <p>... is used to say, if there is no result of 'zipcodeFilters.text' (i.e., the user has inputed nothing) then use the placeholder, which is "Enter ZIP Code".</p>
  
  <p>However, when I first load the component view, I don't see "Enter Zip Code" there, I see - literally - 'zipcodeFilters.text'.</p>
  
  <p>If I delete that, then the filter shows the placeholder text as expected. However, upon refresh of the page, I'm back to seeing 'zipcodeFilters.text' rather than the placeholder text.</p>
  
  <p>This relevant parts of the corresponding component look like this:</p>
  
  <pre><code>zipcodeFilters = {
      enabled: true,
      options: [
  
      ],
      text: null
  };
  
  public filterByZip(zip) {
      const arr: any = [];
      if (zip) {
        arr.push(zip);
      }
      const zipCall = this.zip = arr.length === 0 ? undefined : arr.toString().split(', ');
      const zipArr = Array.from(zipCall);
      this.sendZipcode.emit(zipArr);
  }
  
  unfilterZipResults() {
      this.sendZipcode.emit();
      const arr = [];
      this.zipcodeFilters.text = '';
  }
  </code></pre>
  
  <p>What's making this display the literal text rather than the evaluated expression here?</p>