title: Bootstrap Hamburger not opening
body: <p>I have followed step by step procedure for the implementation of Hamburger in navbar. However on resizing windows the navbar is collapsing but it is not opening on clicking it.</p>
  
  <p>Please refer to the below sample code for reference. I'm using bootstrap4 &amp; angular 6 version.</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <pre><code>&lt;nav class="navbarc navbar-expand-lg navbar-dark shadow-sm p-3 mb-5 rounded navbar-fixed-top" style="padding: 0.5rem !important;
  margin-bottom: .5rem !important; border-radius: 4px;
   padding: 05px;"&gt;
  
      &lt;button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt; 
      &lt;/button&gt;
      &lt;div class="collapse navbar-collapse" id="navbarNavDropdown"&gt;
          &lt;ul class="navbar-nav mr-auto"&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-links" style="font-size: 16px;" routerLink=""&gt;Special Discount &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-links" style="font-size: 16px;" routerLink="Products"&gt;Products on Discount&lt;/a&gt;
              &lt;/li&gt;
  
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <pre><code>angular.json
  {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "version": 1,
      "newProjectRoot": "projects",
      "projects": {
          "myapp": {
              "root": "",
              "sourceRoot": "src",
              "projectType": "application",
              "prefix": "app",
              "schematics": {},
              "architect": {
                  "build": {
                      "builder": "@angular-devkit/build-angular:browser",
                      "options": {
                          "outputPath": "dist/myapp",
                          "index": "src/index.html",
                          "main": "src/main.ts",
                          "polyfills": "src/polyfills.ts",
                          "tsConfig": "src/tsconfig.app.json",
                          "assets": [
                              "src/favicon.ico",
                              "src/assets"
                          ],
                          "styles": [
                              "node_modules/bootstrap/dist/css/bootstrap.min.css",
                              "src/styles.css"
                          ],
                          "scripts": [
                              "node_modules/jquery/dist/jquery.min.js",
                              "node_modules/popper.js/dist/popper.min.js",
                              "node_modules/popper.js/dist/umd/popper.min.js",
                              "node_modules/bootstrap/dist/js/bootstrap.min.js"
                          ],
                          "es5BrowserSupport": true
                      },
                      "configurations": {
                          "production": {
                              "fileReplacements": [{
                                  "replace": "src/environments/environment.ts",
                                  "with": "src/environments/environment.prod.ts"
                              }],
                              "optimization": true,
                              "outputHashing": "all",
                              "sourceMap": false,
                              "extractCss": true,
                              "namedChunks": false,
                              "aot": true,
                              "extractLicenses": true,
                              "vendorChunk": false,
                              "buildOptimizer": true,
                              "budgets": [{
                                  "type": "initial",
                                  "maximumWarning": "2mb",
                                  "maximumError": "5mb"
                              }]
                          }
                      }
                  },
  
  package.json -
  {
      "name": "myapp",
      "version": "0.0.0",
      "scripts": {
          "ng": "ng",
          "start": "ng serve",
          "build": "ng build",
          "test": "ng test",
          "lint": "ng lint",
          "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
          "@angular/animations": "^7.2.15",
          "@angular/cdk": "^6.1.0",
          "@angular/cli": "^6.1.3",
          "@angular/common": "~7.2.0",
          "@angular/compiler": "~7.2.0",
          "@angular/core": "^7.2.15",
          "@angular/forms": "~7.2.0",
          "@angular/material": "^6.1.0",
          "@angular/platform-browser": "~7.2.0",
          "@angular/platform-browser-dynamic": "~7.2.0",
          "@angular/router": "~7.2.0",
          "angular-user-idle": "^2.1.4",
          "bootstrap": "^4.3.1",
          "chart.js": "^2.5.0",
          "core-js": "^2.5.4",
          "forms": "^1.3.1",
          "hammerjs": "^2.0.8",
          "jquery": "^3.3.1",
          "ng-recaptcha": "^5.0.0",
          "ngx-logger": "^4.0.3",
          "npm": "^6.11.3",
          "popper.js": "^1.14.7",
          "rxjs": "~6.3.3",
          "tslib": "^1.9.0",
          "zone.js": "~0.8.26"
      },
      "devDependencies": {
          "@angular-devkit/build-angular": "~0.13.0",
          "@angular/compiler-cli": "~7.2.0",
          "@angular/language-service": "~7.2.0",
          "@types/jasmine": "~2.8.8",
          "@types/jasminewd2": "~2.0.3",
          "@types/node": "~8.9.4",
          "codelyzer": "~4.5.0",
          "jasmine-core": "~2.99.1",
          "jasmine-spec-reporter": "~4.2.1",
          "karma": "~4.0.0",
          "karma-chrome-launcher": "~2.2.0",
          "karma-coverage-istanbul-reporter": "~2.0.1",
          "karma-jasmine": "~1.1.2",
          "karma-jasmine-html-reporter": "^0.2.2",
          "protractor": "~5.4.0",
          "ts-node": "~7.0.0",
          "tslint": "~5.11.0",
          "typescript": "~3.2.2"
      }
  }
  </code></pre>
  
  <p>I want the hamburger to display navbar content on click event.
  Please help me understand where I'm going wrong.
  Any lead on this will really help..</p>