Angular 14 toggle menu not working / bootstrap 4.6

Question

I am designing a homepage with angular 14. The menu I added to the header section does not open. When I get the menu samples that work on the internet and try them in my project, they don't work. My project arms are as follows. Can you help me? When I add the code that work as html to the project, it does not work. I couldn't figure out what is blocking it in angular.

Version

"popper.js": "1.16.1",
"bootstrap": "4.6.1",

index.html

<!doctype html>
    <html>
    
<head>
  <base href='/'>
  <meta charset="utf-8" />
  <link rel="apple-touch-icon" sizes="76x76" href="./assets/img/icon.png" />
  <link rel="icon" type="image/png" href="./assets/img/icon.png" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
  <meta name="viewport" content="width=device-width" />

  <!--     Fonts and icons     -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet'
    type='text/css'>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE"></script>
  <script>window.global = window;</script>
</head>

<body>
  <app-root>
    <div class="loader">
      <svg class="circular" viewBox="25 25 50 50">
        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
      </svg>
    </div>

    <div>Loading...</div>
  </app-root>
</body>


</html>

angular.json

        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
          "src/assets/scss/material-dashboard.scss",
          "src/assets/css/demo.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.js",
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.js",
          "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "node_modules/popper.js/dist/umd/popper.js",
          "node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
          "node_modules/arrive/src/arrive.js",
          "node_modules/moment/moment.js",
          "node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
          "node_modules/bootstrap-notify/bootstrap-notify.js",
          "node_modules/chartist/dist/chartist.js"
        ],

home_page.component.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet'
        type='text/css'>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"
        integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+"
        crossorigin="anonymous"></script>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>

<body>

    <header id="index-header">

        <div class="container ">
            <nav class="navbar navbar-expand-lg navbar-light ">
                <div class="brand-left-side d-flex">
                    <div style="margin-top:25px;">
                        <p>LOGO</p>
                    </div>
                </div>

                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <i class="material-icons">menu</i>
                </button>


                <div class="collapse navbar-collapse " id="navbarSupportedContent">
                    <ul class="navbar-nav topnav ml-auto">


                        <li class="nav-item">
                            <a class="nav-link" href="#jobs">HOME</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link btn btn-style2 text-white" type="button" href="javascript:void(0)"
                                (click)="navigateLogin()" data-toggle="modal" data-target="#myModal">LOGIN</a>
                        </li>

                    </ul>
                </div>
            </nav>
        </div>

    </header>


</body>

</html>

Your individual component HTML files should not be complete HTML documents with a `` and a ``. They are just templates that Angular will insert into the page where you use that template. They should just contain the HTML related to that component, nothing else. No stylesheets, no scripts, etc. — Chris Barr, Aug 10 '23 at 12:44
Hello, I didn't understand exactly what you mean. Can you explain a little more ? — zdnmn, Aug 11 '23 at 10:45
Your `home_page.component.html` file has ` ... ... `. This is incorrect. A component template should ONLY contain the HTML relevant for that component. Basically delete everything except for what is between the `body` tags. Your `index.html` file already has all this document setup stuff, you don't need to include it again in every component — Chris Barr, Aug 11 '23 at 10:52

score 0 · Answer 1 · answered Aug 11 '23 at 11:06

It looks like you are combining jQuery and Bootstrap's plain JS with Angular. This is also bad practice since jQuery and Bootstrap will directly manipulate your HTML without letting Angular know about it. Never include or use jQuery on an Angular project (unless you have a very good reason and know exactly what you are doing) as it will only lead to problems just like this.

What you need to do is:

1.) Fix your home_page.component.html template to only contain the template HTML. It should not include a <head> or a <body> since it it just a template for a component, not a complete HTML document. It should look more like this:

<header id="index-header">
    <div class="container ">
        <nav class="navbar navbar-expand-lg navbar-light ">
            <div class="brand-left-side d-flex">
                <div style="margin-top:25px;">
                    <p>LOGO</p>
                </div>
            </div>

            <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <i class="material-icons">menu</i>
            </button>

            <div class="collapse navbar-collapse " id="navbarSupportedContent">
                <ul class="navbar-nav topnav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#jobs">HOME</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link btn btn-style2 text-white" type="button" href="javascript:void(0)"
                            (click)="navigateLogin()" data-toggle="modal" data-target="#myModal">LOGIN</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</header>

2.) Delete the jQuery and Bootstrap related JavaScript files. Do not use these with Angular

"node_modules/jquery/dist/jquery.js",
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.min.js",
"node_modules/bootstrap-notify/bootstrap-notify.js",

3.) Use an Bootstrap module specifically designed for Angular instead. You have a few options:

Since it looks like you are using Material Design with Bootstrap, I recommend you look into that 3rd one listed

The main thing to keep in mind here is that for an Angular project, you kind of have to do things "the Angular way" - you can't just pull in any old jQuery plugin and expect it to work like it would on a non-angular website. Angular needs to have full control of your web application and it needs to know about everything that gets changed. If you start using jQuery then Angular doesn't know what's going on and there will absolutely be conflicts like you are experiencing.

Angular 14 toggle menu not working / bootstrap 4.6

1 Answers1