HowTo use injected service in template (Angular2)

Question

Component

templateUrl : 'home.html'
..
providers:      [NavService]
..    
private navService:     NavService,
..

Template

 <li *ngFor="let state of states; let i=index" 
[class.active]="navService.isCurrentState(state)">

<span class="name">{{navService[state].name}}</span>

does not seem to work, what am I missing here? How can I access my service in my component template?

Answer 1

The problem with your code is that you declared the service as private. According to the documentation ( angular.io/tutorial/toh-pt4 ): "the messageService property must be public because you're going to bind to it in the template". If you change it to public in costructor you can use the service inside the template.

Answer 2

Every property defined within the component class can be used in the template.

First, you could check that you have the correct value for navService:

@Component({
  (...)
  providers: [NavService]
})
export class SomeComponent {
  constructor(public navService: NavService) {
    console.log(navService); // <----
  }
}