Solution 1 :

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.

Problem :

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
<app-footer [ngClass]="IsFooterDisplayed"></app-footer>

I’d rather have it declared once in my app.component.html file like this –


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?


Comment posted by Aleksey Solovey

why not just use ngIf or at least

Comment posted by MikeOne

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?

Comment posted by user1186050

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

Comment posted by Aleksey Solovey

you can still listen to events in app.component. Update a boolean after an event and it will hide whatever you need

Comment posted by user1186050

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

Comment posted by user1186050

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?

Comment posted by indrajeet

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.

Comment posted by user1186050

Might take me a few minutes.

Comment posted by user1186050

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.