title: Angular 4/5 Component variable from Subject/Services not binding to HTML template
body: <p>I have a variable in my app.component.ts file that is passed in from a controller via my services.ts file. </p>
  
  <p>As far as I can see, the Object property passed to the Component via the Subject is working, because I can <code>console.log(this.selectedContact.name)</code> and It will log to the console perfectly, which would mean that it is correctly being stored into the variable <code>selectedContact: any;</code>. But I cannot seem to bind this to my HTML and I am curious as to what I may be missing. </p>
  
  <p>Here is my app.component.ts file for the view I'm attempting to bind to: </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ContactsListComponent } from '../contacts-list/contacts-list.component';
  import { ApiService } from '../api.service';
  
  @Component({
    selector: 'app-contact-details',
    templateUrl: './contact-details.component.html',
    styleUrls: ['./contact-details.component.scss']
  })
  export class ContactDetailsComponent  implements OnInit {
  
    selectedContact: any;
  
    constructor(private _apiService: ApiService) { }
  
    ngOnInit() { this.showContact()}
  
    showContact() {
      this._apiService.newContactSubject.subscribe(
        contact =&gt; {
           this.selectedContact = contact;
           console.log(this.selectedContact.name);
        });
    }
  }
  </code></pre>
  
  <p>Here is my HTML file (The view I am attempting to bind to.: </p>
  
  <pre><code>&lt;div id= 'contact-card' &gt;
    &lt;header&gt;
    &lt;button routerLink='/home'&gt;&lt; Contacts&lt;/button&gt;
    &lt;/header&gt;
    &lt;section id= card-container&gt;
      &lt;img id ="largeContactPhoto" onerror="onerror=null;src='../assets/User Large/User — Large.png';"
           src={{selectedContact.largeImageURL}} /&gt;
      &lt;h1&gt; {{selectedContact.name}} &lt;/h1&gt;
      &lt;h2&gt; {{selectedContact.companyName}} &lt;/h2&gt;
      &lt;ul&gt;
        &lt;hr&gt;
        &lt;li class="contact-data"&gt;
          &lt;h3&gt; Phone: &lt;/h3&gt;
          {{selectedContact.phone.home}}
        &lt;hr&gt;
        &lt;/li&gt;
        &lt;li class="contact-data"&gt;
          &lt;h3&gt; Phone: &lt;/h3&gt;
          {{selectedContact.phone.mobile}}
        &lt;hr&gt;
        &lt;/li&gt;
        &lt;li class="contact-data"&gt;
          &lt;h3&gt; Phone: &lt;/h3&gt;
          {{selectedContact.phone.work}}
        &lt;hr&gt;
        &lt;/li&gt;
        &lt;li class="contact-data"&gt;
          &lt;h3&gt; Address: &lt;/h3&gt;
          {{selectedContact.address.street}}&lt;br&gt;
          {{selectedContact.address.city}},{{selectedContact.address.state}} {{selectedContact.address.zipcode}}
        &lt;hr&gt;
        &lt;/li&gt;
        &lt;li class="contact-data"&gt;
          &lt;h3&gt; Birthdate: &lt;/h3&gt;
          {{selectedContact.birthdate}}
        &lt;hr&gt;
        &lt;/li&gt;
        &lt;li class="contact-data"&gt;
          &lt;h3&gt; Email: &lt;/h3&gt;
          {{selectedContact.email}}
        &lt;hr&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>app.service.ts (where the click event data is being passed to app.component.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import { Subject } from 'rxjs/Subject';
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class ApiService {
  
    //API URL
    private url: string = 'assets/api/contacts.json';
  
    public newContactSubject = new Subject&lt;any&gt;();
  
    //Initialize HttpClient for request
    constructor(private _http: Http) { }
  
    //Pull JSON data from REST API
    getContacts(): Observable&lt;any&gt; {
      return this._http.get(this.url)
      .map((response: Response) =&gt; response.json());
    }
    openSelectedContact(data) {
    this.newContactSubject.next(data);
  
    }
  }
  </code></pre>
  
  <p>Sibling Component <strong>THIS IS WHERE THE CLICK EVENT HAPPENS*</strong> :</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { ApiService } from '../api.service';
  
  @Component({
    selector: 'app-contacts-list',
    templateUrl: './contacts-list.component.html',
    styleUrls: ['./contacts-list.component.scss']
  })
  export class ContactsListComponent implements OnInit {
    title : string = 'Contacts';
    sortedFavorites: any[] = [];
    sortedContacts: any[] = [];
    errorMessage: string;
  
    constructor (private _apiService: ApiService, private router: Router) {}
  
    ngOnInit(){ this.getContacts()}
  
    getContacts() {
       this._apiService.getContacts()
       .subscribe(
         (contacts) =&gt; {
  
          //Sort JSON Object Alphabetically
          contacts.sort((a , b) =&gt; {
            if (a.name &gt; b.name) {return 1};
            if (a.name &lt; b.name) {return -1};
            return 0;
          })
  
           //Build new Sorted Arrays
            contacts.forEach( (item) =&gt; {
             if (item.isFavorite) {
             this.sortedFavorites.push(item);
             } else {
             this.sortedContacts.push(item);
             }
           });
         });
       }
  
    openFavorite($event, i) { &lt;--Click event coming in from HTML template
      let selectedFavorite = this.sortedFavorites[i];
        this._apiService.openSelectedContact(selectedFavorite); &lt;--Routing this data to services.ts file
        this.router.navigate(['/details']); &lt;--Navigate to detailed view to see selected contact.
    };
  
  }
  </code></pre>
  
  <p>This binding will work with any other test variables that i put into my app.component.ts file and they get bounded to the page. I feel like this is the right syntax for it to be properly binding the object.properties, but it doesn't seem to be working.</p>
  
  <p>What might I be missing on this? Thanks a lot in advance!!</p>
  
  <p>EDIT One: I feel like I should also add that this exact same code <em>was</em> working before when I had my  component routed to this component. It was only when I moved my  files to a new component and created a different new  that this started happening. Maybe it is isn’t imported correctly somewhere?</p>
  
  <p><strong><em>EDIT TWO</em></strong>: I have refactored the code in the original post and corrected my TypeScript declarations and removed <code>this</code> from my html template. I have placed my <code>console.log(this.selectedContact.name)</code> function inside my <code>showContact()</code> method and it does log the correct name once the name in the contacts list is clicked along side this error: <code>ERROR TypeError: Cannot read property 'largeImageURL' of undefined</code>. So it is logging <code>this.selectedContact.name</code> correctly and that variable isn't defined anywhere else in my application. I have added my app.service.ts file as well as my sibling component.ts file just to put this in context where the click event happens. I want the click event data to go from Sibling component --> Api Service.ts file --> Sibling component on a click event. This is very confusing to me why this isn't happening.</p>
  
  <p><strong><em>EDIT THREE</em></strong>
  One other issue that I have noticed is that whenever I attempt to use the safe navigation operator to resolve this, my highlighting changes in my html template, making me think that it is breaking it. </p>
  
  <p><a href="https://i.stack.imgur.com/KyXzz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KyXzz.png" alt="enter image description here"></a></p>
  
  <p>versus this:</p>
  
  <p><a href="https://i.stack.imgur.com/Pmo3a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pmo3a.png" alt="enter image description here"></a></p>
  
  <p>Notice the change in the <code>&lt;/h1</code>> highlighting? This has subsiquently made <em>every</em> open and closing tag show up in grey instead of the red now. I have never attempted to use the safe navigation operator, so I am unsure as to whether this is normal. I have tried it with different spacing around the <code>{{</code> and <code>}}</code> and still no luck.</p>