CODEWITHSUNDEEP
angularangular2-templateangular2-directives
Jamal James
Jamal James

Reputation: 91

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.

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

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?

Upvotes: 0

Views: 552

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202206

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:

@Component({
  selector: '[my-component]'
  (...)
})

and use it this way:

<div my-component>
  <tr>...</tr>
</div>

Upvotes: 1

Related Questions