Importing bootstrap 4 to Angular CLI app

Question

I'm trying to use bootstrap 4 collapse method from inside the navbar component in my Angular 4 App created using Angular CLI.

The issue is as follows. I import jquery and bootstrap using this code:

import * as $ from 'jquery';
import 'bootstrap';

And then have this event handler to collapse the navbar when link in it is clicked:

$('#navbarToggleArea .nav-link').on('click', function () {
  $('#navbarToggleArea').collapse('hide');
});

Code is compiled successfully using ng serve or ng build commands, but fails at runtime, as if the bootstrap plugin was not added to jQuery. When collapse function is being called the error is thrown:

vendor.bundle.js:60854 ERROR TypeError: WEBPACK_IMPORTED_MODULE_1_jquery (...).collapse is not a function

My question is: what and how should I configure to eliminate this error?

Code is here , and the component under question is here .

Answer 1

To achieve collapsing, use angular:

<div class="navbar-collapse collapse" [class.in]='collapsed'>

on the 'humburger'

<span [class.open]="collapsed" id="humburger" (click)="collapsed=!collapsed">

in the class:

collapse:boolean ;

Answer 2

Angular way to achieve this used in my page myPage

Bootstrap Navbar

 <nav class="navbar navbar-toggleable-md navbar-light bg-faded  navbar-fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
          aria-label="Toggle navigation" (click)="isActive = !isActive">
    <span class="navbar-toggler-icon"></span>
  </button>
   <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown" [ngClass] = "{show : isActive}"> // ngClass used here
    <ul class="navbar-nav">
        <li class="nav-item dropdown [routerLinkActive]="['active']" appDropdown"> // directive used here
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

appDropdown Directive

import {Directive, HostListener, HostBinding} from '@angular/core';

  @Directive({
    selector: '[appDropdown]'
  })
  export class DropdownDirective {

    private isOpen:boolean = false;

    @HostBinding('class.open') get opened(){
      return this.isOpen;
    }
    constructor() { }

    @HostListener('click')open(){
      this.isOpen = true;
    }

    @HostListener('mouseleave')close(){
      this.isOpen = false;
    }
  }