You can use router’s activate() event emitter and apply condition based on that for example –
I have created an array of component where we need footer and every time user navigates to any component we check if you need footer on that component or not.
https://stackblitz.com/edit/angular-ivy-rivjcp?file=src%2Fapp%2Fapp.component.html
Problem – I’m sticking my footer component at the end each routed component (redundant).
I’m doing this because on two pages I need to completely show/hide the footer based on a condition from the component.
I’ve posted a stackblitz to demo what the issue is.
If you click on the ‘Hide’ at the bottom of the list, you will see how the footer overlaps the map.
Here is an example of what one of those components is doing
// inside the components .ts file
IsFooterDisplayed = 'show-footer';
if (someCondition) {
this.IsFooterDisplayed = 'hide-footer';
} else {
this.IsFooterDisplayed = 'show-footer';
}// in components css file
.show-footer {
display: block;
}
.hide-footer {
display: none;
}// components html
<div id="MyComponent">
// html here for component
</div>
<app-footer [ngClass]="IsFooterDisplayed"></app-footer>I’d rather have it declared once in my app.component.html file like this –
<app-nav-bar></app-nav-bar>
<router-outlet></router-outlet>
<app-footer></app-footer>
QUESTION – Is there a way to show/hide the footer from my component, like I’m doing now, but using a CSS only solution? Or figure out how to prevent the footer from overlapping the map when the map shows, also via CSS?
FYI – I know I could go through a service and use an observable, but I was looking for a css trick?
why not just use ngIf or at least
You could control this from app.component.ts (assuming that is where your outlet is). What is the condition for not showing your footer..? Is it on specific routes?
I can’t control it from app.component. The page where I want to hide it, is a page where I have a list of items in 1 column and a map in the 2nd column. I toggle between the 2 columns hiding and showing them and when I show the map which is full screen I’m having issues with the footer because I’ve set the map column to 100vh and sometimes when I scroll down then show the map, the footer is visible
you can still listen to events in app.component. Update a boolean after an event and it will hide whatever you need
This isn’t a good solution for me, because I’m just not acting on a specific component, I’m acting on a specific component and a button (show/hide). There has to be an easier way using CSS. I’m just not that great at CSS. Maybe I’m not explaining it correctly. Essentially when I click on the button to show the map (full screen col 2) the map gets displayed full screen using height: 100vh, but if I had previously scrolled down col 1 to the footer and then show the map, the footer overlaps the map, hiding it or partially covering it. So Im thinking it’s just a CSS fix and trying to figure it out
I tried adding height 100% and min-height 100% to the map col, but that hid the entire map and just displayed the footer. Maybe there is some other positioning that’s needed? Maybe something with flex?
I see then I think shared service is good option to control footer. for css if you can create one example in stackblitz then i can see what we can do using css to solve your problem.
Might take me a few minutes.
I found a fix, not sure if it’s the best solution, but I just added a z-index: 1 to my column to cover the footer.