Hice un componente footer para situarlo siempre al final del body, quiero que cuando haya poco contenido este se situé en el final y cuando haya mucho se tenga que hacer scroll hasta llegar al final y visualizarlo.
Leyendo algunas preguntas y sus correspondientes respuestas hice algunas pruebas pero sin resultado, lo mejor que conseguí fue poner un poco de css en el componente y cuando hay poco contenido se muestra al final de la página pero cuando hay más este se queda visible pero al final de la pantalla.
Código css que use en el componente footer
.position {
position: relative;
bottom: 0;
}
Componente html del footer
<div class="container-fluid bg-dark text-light p-1 text-center position mt-3">
<div class="row">
<div class="col">
© Copyright 2021 Julio Pillado Castillo
</div>
</div>
</div>
Componente html del app
<app-navbar></app-navbar>
<div class="container-fluid">
<app-filter></app-filter>
</div>
<div class="container">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>