Remove the host HTML element selectors created by angular component

Question

In angular 2, svg-rect is a component which creates rect like below,

<svg height="550" width="450" x="0" y="0">     <g id="svgGroup">         <svg-rect>         <!--template bindings={}-->             <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>         <!--template bindings={}-->         </svg-rect>         <svg-rect>         <!--template bindings={}-->             <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>         <!--template bindings={}-->         </svg-rect>     </g> </svg> 

but this won't render rect because of the special element tags created. If svg-rect tags are removed it renders the rect

<svg height="550" width="450" x="0" y="0">     <g id="svgGroup">         <!--template bindings={}-->         <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>         <!--template bindings={}-->         <!--template bindings={}-->         <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>         <!--template bindings={}-->     </g> </svg> 

In Angular 1.x, there is replace: 'true' which removes the directive tags with the compiled output. Can we implement the same in angular2?

Answer 1

Instead of trying to get rid of the host element, turn it into one that is valid SVG but other wise unaffecting: Instead of your element selector

selector: "svg-rect" 

and its corresponding element in the template:

template: `...<svg-rect>...</svg-rect>...` 

switch to an attribute selector:

selector: "[svg-rect]" 

and add that attribute to a group element tag:

template: `...<g svg-rect>...</g>...` 

This will expand to:

<svg height="550" width="450" x="0" y="0">     <g id="svgGroup">         <g svg-rect>         <!--template bindings={}-->             <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>         <!--template bindings={}-->         </g>         <g svg-rect>         <!--template bindings={}-->             <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>         <!--template bindings={}-->         </g>     </g> </svg> 

which is valid SVG, which will render. Plnkr

Answer 2

Another approach to remove the host of the component which I use.

Directive remove-host

//remove the host of avatar to be rendered as svg @Directive({     selector: '[remove-host]' }) class RemoveHost {     constructor(private el: ElementRef) {     }      //wait for the component to render completely     ngOnInit() {         var 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);     } } 

Using this directive;
<avatar [name]="hero.name" remove-host></avatar>

In remove-host directive, all the children of the nativeElement are inserted before the host and then the host element is removed.

Sample Example Gist
Based on the use case, there might be a few performance issue.