title: Angular 5 view not displaying updated property value after initial change
body: <p>My view isn't showing the updated property value of a local property, bound model property, nor a value from observable. Logging from console shows all the values are updated. </p>
  
  <p>This is a multi-step form and works great with exception of this annoying issue:</p>
  
  <p>The first time I click on booth, clickBooth(e) is fired as expected and the view updates with the value. </p>
  
  <p>I click on another booth to 'add' it, all the same code fires, but the view doesn't reflect the new updated value of <code>selectedboothlabels</code> or <code>newbookingform.booths</code> </p>
  
  <p>Move on in the form, (using a continue button that fires a 'changeStep' method), then go back to this particular section of the form, the correct values of <code>selectedboothlabels</code> and <code>newbookingform.booths</code> are displayed in the view. </p>
  
  <p>Tried so many things. I think I'm running in circles now. This is the latest of many versions of code:</p>
  
  <p>Service: </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Subject } from 'rxjs/Subject';
  import { Observable } from 'rxjs';    
  
  @Injectable()
  export class SelectedBoothService {
  
    public boothlist = new Subject&lt;string[]&gt;();
  
    setBoothList(value: string[]) {
      this.boothlist.next(value); 
    }
    getBoothList(): Observable&lt;any&gt; {
      return this.boothlist.asObservable();
    }
  }
  </code></pre>
  
  <p>Relevant from View (very, very simplified):</p>
  
  <pre><code>{{selectedboothlabels}}&lt;br&gt;
  {{newbookingform.booths}} 
  </code></pre>
  
  <p>NOTE: I tried binding <code>newbookingform.booths</code> (which is part of the BookingForm ngModel on a form) to a simple text input. However the value is NOT updated through the input, so don't believe this does anything.</p>
  
  <p>Relevant Code from Component:</p>
  
  <pre><code>import { SelectedBoothService } from '../../services/selectedbooths.service';
  import { Subscription } from 'rxjs/Subscription';
  import { BookingForm } from '../../models/booking.interface';
  
  @Component({
      selector: 'reserve-booth',
      templateUrl: './reserve-booth.component.html'
  })
  export class ReserveBoothComponent implements OnInit {
      selectedboothlabels: string[] = [];
      boothlistsubscription: Subscription;
      newbookingform: BookingForm = new BookingForm();
  
      constructor(
          private _changedetector: ChangeDetectorRef,
          private _selectedboothService: SelectedBoothService) {
  
              this.boothlistsubscription = 
                this._selectedboothService.getBoothList().subscribe(list =&gt; {
                       console.log("Subscribing to the boothlist: " + list); //shows most recent values perfectly
                       this.selectedboothlabels = list;
                       this._changedetector.markForCheck(); //no affect...
               });
      }
  
       //fired from an custom component. Works great. 
       clickBooth(e) {
            let boothindex = -1;
            let targetid = e.currentTarget.id;
             //check our list of selectedbooths.
             if (this.selectedboothlabels != undefined) {
                 boothindex = this.selectedboothlabels.indexOf(targetid);                  
             }
             if (boothindex == -1) {
                //add to our list
                this.selectedboothlabels.push(targetid);
                boothindex = this.selectedboothlabels.indexOf(targetid);                               
                this.newbookingform.booths = this.selectedboothlabels;
                this._selectedboothService.setBoothList(this.selectedboothlabels); 
             } else {
               //already here. Remove it.
               this.selectedboothlabels.splice(boothindex, 1);                
               this.newbookingform.booths = this.selectedboothlabels;                
               this._selectedboothService.setBoothList(this.selectedboothlabels);
  
               boothindex = this.selectedboothlabels.indexOf(targetid);                 
            }
  
            this._changedetector.detectChanges(); //seems to have no affect 
         }
       }       
  </code></pre>