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
– Just code, Commented Dec 13, 2018 at 13:10
I use both attribute and css selector. But I've updated my stackblitz. — Runtime Terror
– Runtime Terror, Commented Dec 13, 2018 at 13:15

Danilo Dughetti · Accepted Answer · 2018-12-13 13:08:22Z

-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, 2018 at 13:08

Danilo Dughetti

1,3701 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Runtime Terror Over a year ago

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.

Collectives™ on Stack Overflow

Create an angular component without wrapper tag

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related