CODEWITHSUNDEEP
twitter-bootstrapangularng2-bootstrap
Marcos Basualdo
Marcos Basualdo

Reputation: 2680

ng2-bootstrap accordion not working

I've been struggling with this for hours and i can't figure out what i'm doing wrong. I'm trying to use the accordion component of ng2-bootstrap but angular doesn't even recognize the usage to parse it, like if a wasn't including the reference to the directive in my parent component.

I downloaded the ng2-bootstrap library using npm for the typings but i'm using the cdn version.

Here it is the entire list of third party libraries that i'm including.

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.3/angular2-polyfills.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/1.0.16/ng2-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.8/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.8/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.8/router.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.8/http.dev.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>

In my component i'm importing the accordion directives like this:

import { ACCORDION_DIRECTIVES } from 'ng2-bootstrap/components/accordion';

My component heading is this:

@Component({
selector: 'places',
templateUrl: 'app/places/views/places.html',
directives: [
    DistanceValueComponent,
    ACCORDION_DIRECTIVES
],
pipes: [
    CapitalizePipe
]

})

And on the view i'm using it like this:

<div>
    <accordion>
        <accordion-group heading="Heading 1">
            Content 1
        </accordion-group>
        <accordion-group heading="Heading 2">
            Content 2
        </accordion-group>
    </accordion>
</div>

But all i get is this:

enter image description here

All other directives of my own are working well if i include them into this same component.

Upvotes: 0

Views: 892

Answers (1)

Vishala
Vishala

Reputation: 11

Did you add the required values to system.js?

If you are using system.js you may want to add this into map and package config:

{
    "map": {
        "ng2-accordion": "node_modules/ng2-accordion"
    },
    "packages": {
        "ng2-accordion": { "main": "index.js", "defaultExtension": "js" }
    }
}

Upvotes: -1

Related Questions