Adding Bootstrap 4 to an Angular CLI application

Struggling with incorporating the bootstrap 4 collapse method within the navbar component of my Angular 4 App that was built using Angular CLI.

The problem I'm facing is as follows. I've imported jquery and bootstrap using the following code:

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

Next, I've set up an event handler to collapse the navbar when a link inside it is clicked:

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

The code compiles successfully using either ng serve or ng build commands. However, at runtime, it fails as if the bootstrap plugin wasn't added to jQuery. An error is thrown when the collapse function is called:

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

My main question is: what configuration adjustments are needed to resolve this error?

You can find the code here, and specifically look at the problematic component here.

jqueryangulartypescriptangular-clibootstrap-4

Answer №1

If you want to make something collapse, try using Angular:

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

on the 'hamburger icon'

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

within the class:

collapse:boolean;

Answer №2

Implementing Angular functionality on my site myPage

Using 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>

Custom 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;
    }
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to transform private variables in ReactJS into TypeScript?

During my conversion of ReactJS code to TypeScript, I encountered a scenario where private variables were being declared in the React code. However, when I converted the .jsx file to .tsx, I started receiving errors like: Property '_element' d ...

reactjstypescript

What is the best way to navigate through a div element contained within another div element using jQuery

I am currently working on creating an ajax search bar using jQuery. I have encountered a roadblock where I need to navigate through dynamically created div elements within a larger div based on user input. Essentially, the divs are generated in response to ...

javajqueryhtmlcss

The element 'router-outlet' in Angular 9.0 is not recognized within a lazily loaded module

My attempt at adding a new lazyloaded module to the app component is running into an issue. When I try to include child routes for the new module, an error stating that 'router-outlet' is not a known element:in lazy loaded module is thrown. In t ...

angular

If there is a space within a variable, the div will not collapse

Here is the jsfiddle link I wanted to share: http://jsfiddle.net/nvx4tkLt/8/ I have observed an issue with collapsible divs when a variable contains spaces. For instance, in the provided jsfiddle example, clicking on "Brothers Home" does not collapse th ...

jquery

The anticipated data originates from the 'style' attribute, which is formally noted within the 'IntrinsicAttributes & TextInputProps & RefAttributes<TextInput>' type

I have been working on developing a text form using typescript within the React Native framework. To accomplish this, I created a TextInput component specifically designed for email and password inputs. Below is the code I have been working with: TextInpu ...

htmlcsstypescriptreact-native

What is causing the components in the NgModule to rearrange every time I hit the save button?

My goal is to maintain the items in my NgModule in a vertical list format, as shown below: @NgModule({ declarations: [ AppComponent, PostCreateComponent ], imports: [ BrowserModule, FormsModule, BrowserAnimationsModule, MatInputModule, ...

angularangular-ngmodel

Dealing with Typescript in Node.js: Handling the error 'Property not found on type Global & typeof globalThis'

I recently encountered an issue with my NodeJS app that is built with typescript and global.d.ts file. The strange part is that everything works fine in my old application, but when I try to run the new one using ts-node-dev ts-main-file.ts, I encounter an ...

node.jstypescript

jQuery is not accurately applying the specified height value

There is a DIV element with a padding of 6px. Using the following jQuery code: $('.target').height(150); After inspecting the HTML in Chrome, it shows that the height is set to 162px instead of 150px as intended. Is there a way to make jQuery ...

jquery

Prevent jQuery from scrolling once the fixed image reaches the bottom of the page

I am struggling to figure out how to keep an image fixed at the top of the footer div while scrolling to the bottom of a webpage. My approach involved calculating the height of the footer in order to adjust the scrolling behavior by subtracting it from th ...

javascriptjqueryhtmlcssscroll

The error message indicates that the 'aboutData' property is not found within the 'never[]' data type

What is the correct method for printing array elements without encountering the error message "Property 'post_title' does not exist on type 'never[]'?" How can interfaces be used to define variables and utilize them in code for both ab ...

reactjstypescriptionic-framework

Encountering a "Cannot POST" error in Angular upon redirection to a callback URL with a SAML response

Currently, I'm implementing SAML authentication in my angular application that will be hosted on AWS. The angular code is stored in a separate project from the webapi where Itfoxtec saml library is being utilized. The flow of communication between my ...

angularangular-ui-routeritfoxtec-identity-saml2

Issue with Angular not rendering data retrieved from HTTP response

In my Service script class, I have defined a HomeApiService with the following code: export class HomeApiService{ apiURL = 'http://localhost:8080/api'; constructor(private http: HttpClient) {} getProfileData():Observable<HomeModelInterface[ ...

javahtmlangulartypescriptspring-boot

Troubleshooting OAuth in Angular: Preventing Double Reloads and Redirects

My Angular app is utilizing OAuth2 Google authentication. I have set up an authGuard for specific endpoints, but I have noticed a flickering or double loading issue on the same page. Additionally, it appears that the console is being cleared. How can I tro ...

angularoauth-2.0google-oauth

executing minimal tasks when including a new particular category

When my page is loading, the "changed_value" class is not present on the page. I am adding the "changed_value" class in multiple places within the code. Upon adding this class, I want to execute several actions. The issue is that I don't want to man ...

jqueryclass

Tips for organizing divs once another div has been hidden using jquery

I am working towards implementing a live result filter feature. There are three filters available: Good fit, bad fit, and scheduled. When the "Good fit" filter is clicked, it should display panels with the class "good_fit_panel". Let's assume there ar ...

javascriptjquery

How can I restrict a generic type to include the new() method?

Is there a way to create a function similar to the following in TypeScript? createEntity<TEntity>(): TEntity { return new TEntity(); } In C#, we can achieve this using: void TEntity CreateEntity<TEntity>() where TEntity : new() How would ...

typescript

Ensuring the next tab is not accessible until all fields in the current tab are filled

I am working on a form with a series of questions displayed one at a time, like a slide show. I need help with preventing the user from moving to the next set of questions if there is an empty field in the current set. Below is the script I am using to nav ...

javascriptjqueryhtml

Having an issue with Jquery selector where the text does not match

HTML Code <select id="myDropdown"> <option selected="selected" value="0">default</option> <option value="1">bananas</option> <option value="2">pears</option> </select> Javascript Function setDr ...

javascriptjqueryhtml

Angular dynamically changes the placeholder text in an input based on a selection made in a mat select dropdown

Trying to change the placeholder text in a mat-input based on selection in mat-select, but struggling to bind it to the selected option. <mat-form-field appearance="outline" class="search-field" style="width:40vw"> ...

htmlangular

The process is not functioning effectively

I've been attempting to submit this form, but for some reason it's not functioning correctly. The processor in jQuery : function processForm(id) { jQuery(function() { var $ = jQuery; $('.sp-poll-'+id+' form' ...

formsjquery