Drop down menu sometime won't work correctly

[SahnounM91]

#I'm making a drop-down language switch list for my Angular app, some time the menu does not work navigate from component to other unless I refresh the page, and I do not understand why !

this is the html code :

  <!-- language -->
      <div class="traduction">
        <ul>
          <li class="nav-item dropdown no-arrow">
            <a class="nav-link dropdown-toggle" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <img style="width:30px; height:30px;" class="img-profile rounded-circle" [src]="translate.currentLang == 'fr' ? '../../../assets/img/fr.png' : '../../../assets/img/ar.png'">
            </a>
            <div class="lang-menu dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
              <a class="dropdown-item" (click)="changeLang('fr')">
                <i class="far fa-flag fa-sm fa-fw mr-2 text-gray-400"></i>
                Français
              </a>
              <a class="dropdown-item" (click)="changeLang('ar')">
                <i class="far fa-flag fa-sm fa-fw mr-2 text-gray-400"></i>
                عربي
              </a>
            </div>
          </li>
        </ul>
      </div>
 <!-- end language -->

I'm using bootstrap 4.3.1 and Angular 7

[Johann-S]

Sorry, but we cannot help with how-to or general troubleshooting issues here; only bug reports and feature requests. You'll want to ask around in the official Slack team or Stack Overflow. See our readme for more details.