Navbar qui ne se referme pas: Angular 9

Version imprimable

Bonjour,

J'utilise ANGULAR 9 et Bootstrap 4 pour un petit projet et suis coincé avec la barre de navigation qui ne fait pas ce que je souhaite. Sur les smartphone et tablette,
J'arrive bien à ouvrir le menu en cliquant sur l'icone "navbar-toggler-icon" mais impossible de le refermer. J'ai cherché partout mais je ne trouve pas la solution. Impossible de trouver mon erreur. Pourriez-vous m'aider s'il vous plait?

Mon code html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<nav class="navbar navbar-expand-lg fixed-top row navbar-dark white">
  <!-- Brand -->
  <div class="container">
    <div class="white">
      <a href="#" class="navbar-brand"> 
        <img src="../../../../assets/img/logo-min.png" alt="" class="img-responsive" style="max-width: 150px">
      </a>
    </div>
    <!-- Toggler/collapsibe Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
 
    <!-- Navbar links -->
    <div class="collapse navbar-collapse blue" id="collapsibleNavbar">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="fas fa-car"></i>Automobile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="fas fa-car"></i>Automobile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="fas fa-car"></i>Automobile</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Je vous remercie d'avance pour votre retour.

Cordialement

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
      <nav class="navbar navbar-expand-lg navbar-light ">
        <a class="navbar-brand" href="#">Minimø</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">LifeStyle</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">PhotoDiary</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Musik</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Travel</a>
            </li>
          </ul>
        </div>
      </nav>

24/07/2020, 23h59
ricobye

Bonjour Dukoid

Merci beaucoup pour le retour. J'ai vu ce qui n'allait pas... Une fois encore Merci