Angular directive to unwrap HTML tag or unwrap component tag.

unwraptag-tag.directive.ts

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

@Directive({
    selector: '[appUnwraptag]',
})
export class UnwrapTagDirective implements AfterViewInit {

    constructor(private el: ElementRef) {}
    ngAfterViewInit() {
       // get the element's parent node
      const  parent = this.el.nativeElement.parentNode;

      // move all children out of the element
      while (this.el.nativeElement.firstChild) {
        parent.insertBefore(this.el.nativeElement.firstChild, this.el.nativeElement);
      }
      // remove the empty element
      parent.removeChild(this.el.nativeElement);
    }

}

/*
Example of use:
<app-store-widget appUnwraptag [widgetStore]="storeInstance"></app-store-widget>
the result will be the inner html of app-store-widget.
*/

man i have searched for an elegant solution similar to this for 3 full days, thanks!

Thank you very much, it saves my time.