Lucian Lucian - 4 months ago 13
AngularJS Question

Use bootstrap component in angular component

I am trying to use a bootstrap collapsable panel into an angular component.
From what i've seen the bootstrap approach is to use the id of the panel in order to collapse. This works as stand alone, however, when used into an angular component, the same id creates an undesired effect when toggle-ing between collapse and not collapse mode. ( always the first panel is collapsed/uncollapsed)

My next step was to create my custom collapse panel. This works and can be
seen here plunker , but the collapse effect is not the same ( the plunker link displays in parallel my panel and the bootstrap panel).

My question is how can i use the bootstrap panel into my component or how can i change the css to have the same bootstrap effect on collapse/un-collapse. ?

<custom-filter-accordion button-text="Expand / Collapse Non-BootStrap"></custom-filter-accordion>

Answer

You should definitely use Angular-ui's integration with bootstrap. For this specific purpose, they have a component called Collapse

They already have lot of directives that you could use with angular and should speed up your development time

Check this plunker

Comments