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",

Answer 1

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

Answer 2

尝试改用ngAfterViewInit生命周期挂钩，该挂钩在最初呈现视图后调用，以便可以访问视图成员