title: Bootstrap drop down with angular 7 not working well
body: <p>I'm making a drop-down language switch list for my Angular app, some time the menu does not work when navigate from component to other unless I refresh the page, and I do not understand why !</p>
  
  <p>this is the html code :</p>
  
  <pre><code>  &lt;!-- language --&gt;
        &lt;div class="traduction"&gt;
          &lt;ul&gt;
            &lt;li class="nav-item dropdown no-arrow"&gt;
              &lt;a class="nav-link dropdown-toggle" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                &lt;img style="width:30px; height:30px;" class="img-profile rounded-circle" [src]="translate.currentLang == 'fr' ? '../../../assets/img/fr.png' : '../../../assets/img/ar.png'"&gt;
              &lt;/a&gt;
              &lt;div class="lang-menu dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown"&gt;
                &lt;a class="dropdown-item" (click)="changeLang('fr')"&gt;
                  &lt;i class="far fa-flag fa-sm fa-fw mr-2 text-gray-400"&gt;&lt;/i&gt;
                  Français
                &lt;/a&gt;
                &lt;a class="dropdown-item" (click)="changeLang('ar')"&gt;
                  &lt;i class="far fa-flag fa-sm fa-fw mr-2 text-gray-400"&gt;&lt;/i&gt;
                  عربي
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
   &lt;!-- end language --&gt;
  </code></pre>
  
  <p>the drop down is on the auth and navbar components, when navigate from auth to app home the dropdown does not work unless I refresh the page, on logout also  !</p>
  
  <p>I'm using angular 7 with bootstrap 4</p>