Create an angular component without wrapper tag

Question

I want to generate a component without its wrapper tag. I read all similar SO questions (e.g. SO1, SO2, SO3), without finding a proper solution.

My existing, simplified component (toggle-button.component.ts):

import {Component} from "@angular/core";

@Component({
    selector: "toggle-button, [toggleButton]",
    template: `<button type="button" class="btn btn-primary">{{ label }}</button>`
})

export class ToggleButtonComponent {

    @Input()
    public label: string;
}

Second component, which I want to create (select-button.component.ts):

import {Component} from "@angular/core";

@Component({
    selector: "select-button",
    template: `
    <div class="btn-group" role="group">
        <ng-container *ngFor="let item of items">
             <ng-container toggleButton [label]="item.label"></ng-container>
        </ng-container>
    </div>
    `
})

export class SelectButtonComponent {

    @Input()
    public items: {label: string; value: any;};
}

My app.component.html

<select-button [items]="items"></select-button>

The result is an error:

Failed to execute 'appendChild' on 'Node': This node type does not support this method.

What I want to achieve is a HTML structure like this:

<div class="btn-group" role="group">
    <button type="button" class="btn btn-primary">12 H</button>
    <button type="button" class="btn btn-primary">24 H</button>
</div>

Instead of:

<div class="btn-group" role="group">
    <toggle-button>
        <button type="button" class="btn btn-primary">12 H</button>
    </toggle-button>
    <toggle-button>
        <button type="button" class="btn btn-primary">24 H</button>
    </toggle-button>
</div>

Stackblitz link

in stackblitz you are using component and in your question you are using attribute selector. — Just code, Dec 13 '18 at 13:10
I use both attribute and css selector. But I've updated my stackblitz. — Runtime Terror, Dec 13 '18 at 13:15
https://stackblitz.com/edit/angular-6whr8i?file=src%2Fapp%2Fselect-button.component.ts — yurzui, Dec 13 '18 at 13:17
Unfortunately I can't use that. I need to be able to use the toggle-button component simply by defining like ``. Also it has some more complex logic, which I can't share here and it can't be achieved this way. — Runtime Terror, Dec 13 '18 at 13:28

score -1 · Answer 1 · answered Dec 13 '18 at 13:08

-1

The simpliest way is to avoid toggle-button.component.ts and insert tag directly in the select-button.component html for example:

 <ng-container *ngFor="let item of items">
         <button type="button" class="btn btn-primary">{{item.label}}</button>
    </ng-container>
</div>

answered Dec 13 '18 at 13:08

Danilo Dughetti

1,360
1
11
18

1

Yes, but my toggle-button is more complex than in this example and I want to encapsulate that complexity outside of select-button. Also the toggle-button is a standalone component, which I use in other part of my app. – Runtime Terror Dec 13 '18 at 13:11

Create an angular component without wrapper tag

1 Answers1