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?

score 43 · Accepted Answer · edited Jun 08 '16 at 19:33

43

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

edited Jun 08 '16 at 19:33

Bhavik

4,836
3
30
45

answered Jun 08 '16 at 18:28

John C

1,136
1
11
14

This works well wherever you need a valid element, I've just used this for a small component for table headers where the same problem occurs. One query though, is there any documentation you can link to for this? – David Jan 10 '17 at 17:20
2

@David - You won't find it in the manuals (yet), but to assure you it is blessed: Here is the thread where users make the case that sometimes (svg and tables) you need to use attribute selectors for modifying structure: https://github.com/angular/angular/issues/11280 . In response, the functionality was added (well, restored, actually) here: https://github.com/angular/angular/pull/11808 . – John C Mar 09 '17 at 15:02
2

but what if I want to add multiple elements inside one element (manually, not by *ngFor) – Marcel Oct 02 '17 at 15:30
How do you add properties to an attribute selector? – Kees de Kooter Dec 10 '19 at 09:35

score 38 · Answer 2 · answered Mar 07 '16 at 06:04

38

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.

answered Mar 07 '16 at 06:04

Bhavik

4,836
3
30
45

Could be performance issues is it what I thought at first. But currently using this way in my material design light components to replace host element otherwise having issues with displaying html – angularrocks.com Mar 15 '16 at 05:07
@Kuncevich Good to know that my answer helped, performance bottlenecks would be created when the element `ChangeDetection` is triggered as `shadow DOM !== actual DOM`. But if there are not many elements then this would not be that big. Hopefully ;) – Bhavik Mar 15 '16 at 16:58
We need some analogy of Angular1 `replace:true` http://stackoverflow.com/questions/22497706/angular-directive-replace-true someone said that this feature is actually is in angular2 but unofficially supported. – angularrocks.com Mar 15 '16 at 23:05
@Kuncevic it's the other way around. It's still in Angular1 but deprecated there. This is why they don't want to add it in Angular2 in the first place. It turned out to cause to many issues to be worth the effort. – Günter Zöchbauer Aug 19 '16 at 09:18
If you think of using this technique with a `ngFor` that is changing the data, you will get surprised how the UI will not update properly. – jsgoupil May 13 '19 at 17:47

score 31 · Answer 3 · answered Sep 12 '18 at 09:55

31

What about something like:

:host { display: contents; }

Putting that in the host component's css (or scss) file will cause the component's box not to render.

N.B: It has worked for me before -- but obviously I'd be worried about browser compatibility especially if you're developing to support older browsers. I'm also pretty sure that's not entirely out of the "experimental" phase. The docs also state that this may cause accessibility issues.

answered Sep 12 '18 at 09:55

tlm

952
10
20

3

Such a short, simple, and effective answer – SeanMC Mar 16 '20 at 19:54
2

This works well with no extra workarounds. Hopefully Angular will add the option to not render the host element at some point. – JL Gradley May 04 '20 at 19:18
This didn't work for me. Maybe they remove this feature in one of the newer versions of Angular. – Jan Aagaard Mar 17 '21 at 11:07
This doesn't necessarily work if there are selectors expecting a direct descendant. – Rei Miyasaka Apr 02 '21 at 03:04
1

Although parent element it is not removed, at least doesn´t modify visually your layout. – Fabrizio Valencia Sep 22 '21 at 23:51

score 9 · Answer 4 · answered Dec 30 '16 at 08:37

There's another approach that we can get the template of a component out of the component.
First, we create the component, whose tag we hope to remove from browser render (we are not trying to remove the tag here.)

@Component({
  selector: 'tl-no-tag',
  template: `
    <template #tmp>
      <p>{{value}}</p>
    </template>`,
  styleUrls: []
})
export class TlNoTagComponent {
  @ViewChild('tmp') tmp: any;
  value = 5;
}

Then, in another component's template, we write:

<tl-no-tag #source></tl-no-tag> <!-- This line can be placed anywhere -->
<template [ngTemplateOutlet]="source.tmp"></template> <!-- This line will be placed where needed -->

Then, we have in browser something like this:

<tl-no-tag></tl-no-tag>
<p>5</p>

So, we have brought <p>{{value}}</p> out of the TlNoTagComponent. <tl-no-tag></tl-no-tag> will continue to be there, but will not block any css or svg-thing.

"Does the template have its own separate variable scope, what variables can the template see?" Check out this one (in Template Content part): https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/ — Timathon, Jan 11 '18 at 13:10
This IS the way to go if you are about to use `*ngFor` around this data. My scenario was to group `` together. This code works perfectly. Make sure to set `display: none` on the `tl-no-tag` so it doesn't interfere with your `colspan`. — jsgoupil, May 13 '19 at 18:21

score 5 · Answer 5 · edited Jun 20 '20 at 09:12

5

To quote the Angular 1 to Angular 2 Upgrade Strategy doc:

Directives that replace their host element (replace: true directives in Angular 1) are not supported in Angular 2. In many cases these directives can be upgraded over to regular component directives.

There are cases when regular component directives are not going to work, in those cases alternative approaches can be used. For example for svg see: https://github.com/mhevery/ng2-svg

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 15 '15 at 03:25

Mark Rajcok

362,217
114
495
492

Thanks a lot for pointer this out. I was convinced that removing the host element was possible in Angular, but it was apparently something we used back in the days of AngularJS: – Jan Aagaard Mar 17 '21 at 11:04

Remove the host HTML element selectors created by angular component

5 Answers5

Linked

Related