angular 2 directive with bootstrap

I’m trying to make a simple list group in angular 2 using bootstrap, I place inside item.component.ts and the ul inside list.components.ts but I can’t figure out how to remove the component directive in angular 2.

<ul class="list-group">
  <my-list *ngFor....> //how to remove this from the view
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>

I dont want to use ng2-bootstrap, and as long as directive is rendered in the browser, my list-group is not working correctly!

I looked in the previous questions, but couldn’t find any good answers how to make this work? How is people solving this problem, I know angular1 had replace:true to handle these issues, but not anymore in angular2.

1. Should I add “css” on my my-list so it behave like li and surrender it around div instead? But then I have to do this on every bootstrap component I need to use!

2. Should I stop using item.component.ts and keep everything in the list.component.ts to fix this issue?

Leave a Reply

1 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
newest oldest most voted
Notify of

There is no support in Angular2 for the replace: true feature like in Angular 1.

You could leverage an attribute in the selector to attach the component:

  selector: '[my-component]'

and use it this way:

<div my-component>