Ion-footer animation lags after page destruction, if based in a component

As an angular user for many years, I’m used to components reuse.

considering this scenario on Ionic 5 with Angular 11:

<ion-header>...</ion-header>

<ion-content>...</ion-content>

<component-with-footer></component-with-footer>

whereas component-with-footer simply contains:

<ion-footer>...</ion-footer>

The footer does render correctly,
but when I leave the page, the footer is being destroyed 1-2 seconds later.

The footer contains a lot of code (relatively) so I don’t want to include it in the page.

I’ve tried:

  1. CSSing the host with display: contents but it doesn’t make a difference.
  2. Changing the component-with-footer selector to attribute.

What is the MO here? how can I get it to work properly?

1 Like

same issue here, did someone already solved it?

Yes. Answering my own question.

It’s a hack though… I’ve created a directive on <component-with-footer appRemoveHost></component-with-footer>

import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appRemoveHost]'
})
export class RemoveHostDirective implements OnInit {

  constructor(private el: ElementRef) {
  }

  ngOnInit() {
    const nativeElement: HTMLElement = this.el.nativeElement,
      parentElement: HTMLElement = nativeElement.parentElement;
    // move all children out of the element
    while (nativeElement.firstChild) {
      parentElement.insertBefore(nativeElement.firstChild, nativeElement);
    }
    // remove the empty element(the host)
    parentElement.removeChild(nativeElement);
  }

}