CODEWITHSUNDEEP
angular
Stephan K.
Stephan K.

Reputation: 15732

How to use an injected service in a template?

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?

Upvotes: 12

Views: 13929

Answers (2)

Antonio Galliani
Antonio Galliani

Reputation: 49

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.

Upvotes: 4

Thierry Templier
Thierry Templier

Reputation: 202266

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); // <----
  }
}

Upvotes: 22

Related Questions