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:
- CSSing the host with display: contents but it doesn’t make a difference.
- Changing the
component-with-footer
selector to attribute.
What is the MO here? how can I get it to work properly?
1 Like
endobit
2
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);
}
}