Angular ngx-translate : drop down wont open when login and logout

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { AuthService } from '../auth.service';
import * as $ from 'jquery';
import { Router } from '@angular/router';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';


@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent implements OnInit {
  public loading: boolean;
  user: FormGroup;
  userRegis: FormGroup;
  cities: any[];
  govs: any[];
  governorates: any[];
  showSel = false;
  city: any;
  valideRegis: boolean = true;

  constructor(public translate: TranslateService, private http: HttpClient, private authservice: AuthService, private router: Router, private toastr: ToastrService) {
    translate.setDefaultLang('fr');
    translate.use('fr');
    this.user = new FormGroup({
      phone: new FormControl('', [Validators.required]),
      password: new FormControl('', [Validators.required, Validators.minLength(8), Validators.maxLength(30)]),
    });
    
      changeLang(val) {
    this.translate.use(val)
  }
  
  }

     <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>
    
    
    <div id="collapseOne" class="card-body collapse show pt-0" data-parent="#accordion">
              <div class="m-3">
                <form [formGroup]="user" (keyup.enter)="loginApi()">
                  <div class="form-group">
                    <input dir="{{ 'dir'| translate}}" type="phone" maxlength="8" minlength="8" formControlName="phone" placeholder="{{'authentification.Numérodetélephone' | translate}}"
                      [ngClass]="{ 'is-invalid': user.get('phone').touched && user.get('phone').invalid}" class="form-control">
                    <div class="invalid-feedback">{{'authentification.Minimum8chiffres'| translate}}</div>
                  </div>
                  <div class="form-group">
                    <input dir="{{ 'dir'| translate}}" type="password" minlength="8" maxlength="30" formControlName="password" placeholder="{{'authentification.motdepasse' | translate}}" class="form-control"
                      [ngClass]="{ 'is-invalid': user.get('password').touched && user.get('password').invalid}">
                    <div class="invalid-feedback">{{'authentification.doitavoirauminimum8caracteres' | translate}}</div>
                  </div>
                </form>
                <div class="sign-btn text-center">
    
                  <button [disabled]="!user.valid" (click)="loginApi()" class="loginBtn btn btn-lg btn-gradient-01">
                    <div *ngIf="!loading">{{'authentification.Meconnecter' | translate}}</div><i class="la la-spinner la-spin" *ngIf="loading"></i>
                  </button>
                </div>
                <div class="register">
                  {{'authentification.Motdepasseoublie' | translate}}
                  <br>
                  <a [routerLink]="['/newpass']">{{'authentification.recuperervotrecompte' | translate}}</a>
                </div>
              </div>
            </div>

import { Component, OnInit, AfterViewInit, Output, EventEmitter } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
// import { Socket } from 'ngx-socket-io';
import { SocketIOService } from '../../socket-io.service'
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';

import * as $ from 'jquery';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})

export class NavbarComponent implements OnInit, AfterViewInit {

  viewChecked: any = false;
  user: any;
  notifications: any[];

  avatarDropeddown: any = false;
  notifDropeddown: any = false;
  textDir: string = 'ltr';
  lng: string

  constructor(
    public translate: TranslateService,
    private router: Router,
    private http: HttpClient,
    // private socket: Socket
    private socketService: SocketIOService
  ) {
    translate.setDefaultLang('fr');
    translate.use('fr');

    this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
      if (event.lang == 'ar') {
        this.textDir = 'rtl';
      }
      else {
        this.textDir = 'ltr';
      }
    });
  }
  
    changeLang(val) {
    this.translate.use(val)
  }
  
  }

    <!-- 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:20px; height:20px;" 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>