Angular 5 TypeScript Bootstrap Dropdown not working via JavaScript

Question

I followed the bootstrap way and added the demo example from https://getbootstrap.com/docs/3.3/javascript/#via-data-attributes-1 into my angular app inside a navbar.

This did not work out of the box as toggling the dropdown had no effect. After reading further I came acrosss activating the dropdown via javascript. https://getbootstrap.com/docs/3.3/javascript/#via-javascript-1

I executed $('.dropdown-toggle').dropdown() in the Browser and voila the Dropdown worked as expected. Now I wanted to add this JavaScript call to the OnInit block of my header component like this:

ngOnInit(): void {
   $('.dropdown-toggle').dropdown();
}

Unfortunately this does not work, as the compiler complains with:

ERROR in src/app/header/header.component.ts(16,27): error TS2339: Property 'dropdown' does not exist on type 'JQuery'.

Jquery should work, as it is included in my package.json "@types/jquery": "^3.3.0" and bootstrap version is "bootstrap": "^3.3.7",

Better if you use a package for it, instead of mixing jQuery in Angular: Bootstrap — Prachi
– Prachi, Commented Jun 5, 2018 at 9:27

Theophilus Omoregbee · Accepted Answer · 2018-06-05 09:37:43Z

For me, I suggest leaving jQuery out of this, check out https://github.com/pleerock/ngx-dropdown which follows the same implementation you just need to use these two directives to specify which is the dropdown dropdown and the who's triggering the dropdown dropdown-open

import {Component} from "@angular/core";
import {DropdownModule} from "ngx-dropdown";

@Component({
    selector: "app",
    template: `
<div class="container">

    <!-- a-style dropdown -->
    <div class="dropdown" dropdown>
        <a dropdown-open>My Heroes</a>
        <ul class="dropdown-menu">
            <li><a href="#">Badman</a></li>
            <li><a href="#">Sadman</a></li>
            <li><a href="#">Lieman</a></li>
        </ul>
    </div>
    <br/>

    <!-- button dropdown -->
    <div class="dropdown" dropdown>
        <button class="btn btn-primary" dropdown-open>My Heroes</button>
        <ul class="dropdown-menu">
            <li><a href="#">Badman</a></li>
            <li><a href="#">Sadman</a></li>
            <li><a href="#">Lieman</a></li>
        </ul>
    </div>
    <br/>

    <!-- dropdown with items that are not closing dropdown when you click on them -->
    <div class="dropdown" dropdown>
        <button class="btn btn-primary" dropdown-open>Not closable on items click</button>
        <ul class="dropdown-menu" dropdown-not-closable-zone>
            <li><a href="#">This dropdown will</a></li>
            <li><a href="#">not be closed when you</a></li>
            <li><a href="#">select any its items</a></li>
            <li><a href="#">this allows you to put</a></li>
            <li><a href="#">dynamic content into it</a></li>
        </ul>
    </div>

</div>
`
})
export class AppComponent {

}

@NgModule({
    imports: [
        BrowserModule,
        DropdownModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {

}

platformBrowserDynamic().bootstrapModule(AppModule);

If you want to do more with Bootstrap Javascript functionalities I suggest you take a look at https://valor-software.com/ngx-bootstrap/ as it handles all bootstrap functionalities in Angular's style

OK thanks for your answer, I think I have to go the full angular way with ngx-bootstrap then, as it seems there is no "simple" way in just using bootstrap directly.

Tom Ben Ezra · Accepted Answer · 2018-06-05 09:25:03Z

0

Try using ngAfterViewInit lifecycle hook instead, which is called after the view is initially rendered so view members are accessible

answered Jun 5, 2018 at 9:25

Tom Ben Ezra

92 bronze badges

2 Comments

mrkernelpanic Over a year ago

This does not work. Why should this anyway make any difference to the compiler?

Prachi Over a year ago

Until view has not rendered, the element markup will not be available for the script to work on.

Collectives™ on Stack Overflow

Angular 5 TypeScript Bootstrap Dropdown not working via JavaScript

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related