Dropdown fix

src/app/shared/components/footer/footer.component.html

@@ -20,18 +20,11 @@
             <!-- <div class="col-md-3 col-lg-4 text-right"> -->
                 <div class="col-sm-6 text-right ftr_lng">
               <div class="dropdown ftr_dropdown d-inline-block py-2">
-
+                <span class="flag" [ngStyle]="{ 'background-image': 'url(assets/img/' + translate.getCurrentLang() + '.jpg)'}"></span> 
-                <a class="dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown"
+                <!--<span class="flag"  ngIf="translate.getCurrentLang() =='de'" style="background-image: url('assets/img/german.jpg')"></span>-->
-                  aria-haspopup="true" aria-expanded="false">
+                <select class="langbut btn btn-outline-primary btn-rounded py-2 ml-2" #langSelect (change)="translate.changeLang(langSelect.value)">
-                  <span class="flag" style="background-image: url('assets/img/uk.jpg')"></span>English
+                  <option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}}</option>
-                </a>
+                </select>
-                <div class="dropdown-menu " aria-labelledby="navbarDropdown1">
-                  <a class="dropdown-item p-2" href="#"><span class="flag"
-                      style="background-image: url('assets/img/uk.jpg')"></span>English</a>
-                  <a class="dropdown-item p-2" href="#"><span class="flag"
-                      style="background-image: url('assets/img/german.jpg')"></span>German</a>
-
-                </div>
 
               </div>
               <button (click)="ChangeTheme()" class="theme_switch btn"><img src="assets/img/dark_theme.webp" height="20" class="light_theme_display"><img src="assets/img/light_theme.webp" height="19"  class="dark_theme_display"></button>

src/app/shared/components/header/header.component.html

@@ -14,9 +14,13 @@
 
           </li>
           <li class="nav-item dropdown bg-white">
-            <select class="btn btn-outline-primary btn-rounded text-white py-2 ml-2" #langSelect (change)="translate.changeLang(langSelect.value)">
+            
-              <option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}} ({{ lang }})</option>
+            <span class="flag " [ngStyle]="{ 'background-image': 'url(assets/img/' + translate.getCurrentLang() + '.jpg)'}"></span> 
+            <!--<span class="flag"  ngIf="translate.getCurrentLang() =='de'" style="background-image: url('assets/img/german.jpg')"></span>-->
+            <select class="langbut btn btn-outline-primary btn-rounded py-2 ml-2" #langSelect (change)="translate.changeLang(langSelect.value)">
+              <option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}}</option>
             </select>
+            
           </li>
           <button (click)="ChangeTheme()" class="theme_switch btn">
             <img

src/app/shared/components/siteheader/siteheader.component.html

@@ -17,13 +17,11 @@
       </div>
       <div class="mble_view_hdr">
         <div class="nav-item dropdown bg-white d-inline-block ml-2 order-1 order-sm-2">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
+          <span class="flag" [ngStyle]="{ 'background-image': 'url(assets/img/' + translate.getCurrentLang() + '.jpg)'}"></span> 
-            aria-haspopup="true" aria-expanded="false">
+            <!--<span class="flag"  ngIf="translate.getCurrentLang() =='de'" style="background-image: url('assets/img/german.jpg')"></span>-->
-            <span class="flag" style="background-image: url('assets/img/uk.jpg')"></span>English
+            <select class="langbut btn btn-outline-primary btn-rounded py-2 ml-2" #langSelect (change)="translate.changeLang(langSelect.value)">
-          </a>
+              <option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}}</option>
-          <select class="btn btn-outline-primary btn-rounded text-white py-2 ml-2" #langSelect (change)="translate.changeLang(langSelect.value)">
+            </select>
-            <option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}} ({{ lang }})</option>
-          </select>
         </div>
         <button (click)="ChangeTheme()" class="theme_switch mr-2 btn order-2 order-sm-3"><img
             src="assets/img/dark_theme.png" height="20" class="light_theme_display"><img

src/app/shared/services/trans-service.service.ts

@@ -11,7 +11,7 @@ export class TransServiceService{
   constructor(public translate : TranslateService,private cookie: CookieService) { 
     translate.addLangs(['en', 'de']);
     translate.setDefaultLang('en');
-    this.langLabel = {en: 'English', es: 'German'};
+    this.langLabel = {en: 'English', de: 'German'};
     // console.log('this.getCookie() ifconf',this.getCookie() != 'undefined' ? 1: 2);
    // console.log("(this.getCookie() && this.getCookie() != null) ? this.getCookie() : (this.getCurrentLang() && this.getCurrentLang() != null) ? this.getCurrentLang() : 'en'",(this.getCookie() && this.getCookie() != 'undefined') ? this.getCookie() : (this.getCurrentLang() && this.getCurrentLang() != 'undefined') ? this.getCurrentLang() : 'en');
     translate.use((this.getCookie() && this.getCookie() != 'undefined') ? this.getCookie() : (this.getCurrentLang() && this.getCurrentLang() != 'undefined') ? this.getCurrentLang() : 'en');

src/assets/css/style.css

@@ -603,3 +603,7 @@ body.dark_theme {
   min-width: 140px;
 margin-right: 10px;
 }
+.langbut.btn-outline-primary{
+  border:none !important;
+  color:rgba(0,0,0,.5);
+}