Here is how my app.component looks:
<div class="wrapper">
<app-header></app-header>
<router-outlet></router-outlet>
<footer>
<section class="page group">
{{ 'COMPANY.address' | translate }}
</section>
</footer>
</div>
However, the issue I'm facing is that the footer is not sticking to the bottom of the page as intended.
The wrapper class has a min-height set to 100%.
One solution I tried was adding inline styles to the body tag in the index.html file with height:100vh. While this did position the footer at the bottom, it caused problems when the content expanded the height of the app, such as with a dropdown menu with many options.
It's important to note that our styles are applied globally through a main.css stylesheet, so there are no separate style files for individual components.
Interestingly, when the same HTML page with identical CSS styles is opened by our graphic designer in the same browser, the footer works as expected. This suggests that Angular may be introducing some elements beyond my control.
EDIT: I am still investigating this issue. It seems that a component extending our page further down than the footer's initial position is somehow remaining in the background, preventing the footer from being pushed below it. The height of this component cannot be predicted as it is filled with data fetched from the backend.