0

I have 5 components in my main.ts file. I have a header component which I am using for updating according to the component I click to.I have put this component in my app.component.html file. I want to show the back button in my header/navigation bar whenever I click on any of the 5 components. I also have a bottom navigation bar, where I click to route to three different views, the first one being the home view and two others. Following is the mockup for my app. enter image description here

I want to update the navigation heading whenever I click on any component and also show or hide the back arrow button. And when I click the view buttons on the bottom of the screen, I want to update the heading accordingly. Should I create a service and inject it in every component? Kindly help in this regard.

Saqib S
  • 501
  • 5
  • 21

1 Answers1

0

Shared service

Having a shared service is definitely one solution. Here is a good example of how to implement one, from the official documentation.

State management (ngRx)

Another, maybe more sophisticated solution, would be to implement some kind of state management solution. ngRx is one implementation (using the redux pattern) that is developed specifically for angular v.2+.

What is does is basically providing you with a store that holds all of your application state. Components across the app can then subscribe to the store to read the data.

There is much more to it than that, of course. Here are some resources:

Fredrik Lundin
  • 8,006
  • 1
  • 29
  • 35