title: Binding properties from service to component Angular 4
body: <p>I have a component which I inject a service. I try to bind the properties from the service to the component's html view. </p>
  
  <p>I tried just to bind in a regular way <code>&lt;p&gt;{{a}}&lt;/p&gt;</code> but it didn't work. I asked here and the answer I got was to refer to the service name first: </p>
  
  <p>service:</p>
  
  <pre><code>export class MyService {
      a: string = 'Hello world'; 
      b: number = 1;
  
      c(): number {
        this.b += 1;
        return this.b;
  }
  }
  </code></pre>
  
  <p>component.ts:</p>
  
  <pre><code>export class myComponent {
  constructor(public myService: MyService){}
  }
  </code></pre>
  
  <p>component.html:</p>
  
  <pre><code>&lt;p&gt;{{myService.a}}&lt;/p&gt;
  </code></pre>
  
  <p>I did it and still doesn't work - what do I miss? </p>
  
  <p>If I console the properties in the service methods, then call the method in the component class, it will console the properties. But once I try to bind them in the template - it's doesn't work.</p>
  
  <p>Thanks. </p>