• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • About
  • Life
  • Tech
  • Travel
  • Work
  • Questions
  • Contact

Welcome

.

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

April 11, 2020 by

Questions › Angular ngx-translate : drop down wont open when login and logout
0
Vote Up
Vote Down
Garmaine asked 4 years ago

I'm working with ngx translate and I define the drop down menu language in my login interface and the nav bar component, for the first time when a user loggedIN the dropdown won't open, also when logout, it open only when refresh the page !!!

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>

I do not understand why the drop down won't open when the user get access for the first time to login and home interface !

Are you looking for the answer?
Original Question and Possible Answers can be found on `http://stackoverflow.com`

Question Tags: angular, html, javascript, routing, translation

Please login or Register to submit your answer




Primary Sidebar

Tags

Advancements best Business strategies commercial convenience economic Finances Cognitive decline Financial growth firm Future Hidden Gems Home hydration Impact Innovations lighting line of work Mental health Must-See New York City office patronage Productivity profession Profitability tips Profit optimization pursuit recreation Revenue enhancement romance sippy cups social station Technological breakthroughs technology toddlers trading transaction Treasures Uncover undertaking Well-being Wonders Work Young onset dementia

Newsletter

Complete the form below, and we'll send you all the latest news.

Footer

Footer Funnies

Who knew that reading the footer could be such a hilarious adventure? As we navigate websites, books, and documents, we often stumble upon the unassuming space at the bottom, only to discover a treasure trove of amusement. In this side-splitting compilation, we present 100 jokes that celebrate the unsung hero of content – the footer. Get ready to chuckle, giggle, and maybe even snort as we dive into the world of footnotes, disclaimers, and hidden comedic gems. Brace yourself for a wild ride through the footer!

Recent

  • Unveiling the Enigma: Almost-Magical Lamp Lights Highway Turns
  • The Impact of Young Onset Dementia on Employment and Finances: Optimizing Post-Diagnostic Approaches
  • 11 Wonders of 2023 Technological Breakthrough – Unveiling the Future
  • Work from Home and Stay Mentally Sane – Achieve Productivity and Well-being
  • Hidden Gems of New York City – Uncover the Must-See Treasures!

Search

Tags

Advancements best Business strategies commercial convenience economic Finances Cognitive decline Financial growth firm Future Hidden Gems Home hydration Impact Innovations lighting line of work Mental health Must-See New York City office patronage Productivity profession Profitability tips Profit optimization pursuit recreation Revenue enhancement romance sippy cups social station Technological breakthroughs technology toddlers trading transaction Treasures Uncover undertaking Well-being Wonders Work Young onset dementia

Copyright © 2023