The same service instance isn’t being shared across your App and Home components because you have listed SidenavService
as a provider for both.
When you define service provider in the providers
entry of a Component decorator, that service is then available to that component and all of its children as a singleton, meaning the same instance of the service will be used.
If you redefine a provider in a child component, it will create a new instance of the service and will no longer share the same service instance as its parent/ancestor.
If you are using SidenavService
in both App and Home components and need the same instance, you should only provide it in the App component and remove it from the providers
entry of Home.
For more information on DI, have a read of the following links:
https://angular.io/docs/ts/latest/guide/dependency-injection.html
https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html