I want to create a component in which I can use a directive within other components. This directive will contain labeled routes that will display based on what page (how deep they are in the application) - basically a breadcrumb representation without it actually looking like a breadcrumb but labeled tabs. Not sure where to start but here is my app structure:
Home
Courses
Teachers
Teacher Profile
Students
Courses for student
Student Profile
In my component I would like it so when the user is in the (Teacher Profile) page that they also see a menu bar containing ( Courses, Teachers) as tabs so they can route to those pages. I am not sure what is the best way to achieve this. Would it be through the URL by looking at the routes or should i bind/emit component information into my header component? I feel that the routes by using the URL is better but not sure.
What I usually do is create a layout component. This component is in charge of the general layout of my app (header, footer, etc.) and the router-outlet is placed where the main content should go.
The ‘breadcrumbs’ you are trying to build should go (in my opinion) under the header in the layout component.
The way I would build this would be to create a component. It should either receive the url as an @Input()or parse it by itself and display it in any manner you would like.
For the structure you have in mind this should definitely work. For more complicated structures you might need to build something a bit more sophisticated.
Good luck!