Angular 6 Mobile Language selection issue

[jcmiron]

I'm having an issue with the mobile language selection using angular. When not in mobile view, the language selection works just fine. I can toggle between languages and when I click on one, the current selection changes just fine and everything works. But when I go into mobile view, the click no longer works and it seems to always be the "Francais" text and never the "English" no matter what language I was before I shrink to mobile view.

`

<section id="wb-lng" class="visible-md visible-lg">
        <h2>Language selection</h2>            
        <ul *ngIf="isEnglish; else frenchLanguageSelection" class="text-right">
          <li><a lang="fr" hreflang="fr" (click)="switchLanguage('fr')" style="cursor: pointer;">Français</a></li>
          <li class="curr" style="cursor: pointer;">English&#32;<span>(current)</span></li>
        </ul>
        
        <ng-template #frenchLanguageSelection>
            <ul class="text-right">
              <li class="curr" style="cursor: pointer;">Français&#32;<span>(actuel)</span></li>
              <li><a lang="en" hreflang="en" (click)="switchLanguage('en')"  style="cursor: pointer;">English</a></li>
            </ul>
        </ng-template>
        
      </section>

`

Any thoughts?

[Pacoup]

I think the problem is that the mobile menu is created dynamically, and createMobilePanelMenu() is only called on init, so if your language switch doesn't actually do a plain navigation, the menu is never initted again, so it stays in whatever the code was on first load.

@duboisp Is there any way to call createMobilePanelMenu() on demand?

[LaurentGoderre]

Reinitting would be very inefficient. Plugins should perhaps have a function to change all it's strings

[jcmiron]

I looked at the WET code for the menu and it seems like onAjaxLoaded() function recreates the section tag along with ul and li tags instead of taking the old ones. This causes an issue because Angular adds things to those tags.

<section _ngcontent-c0="" class="visible-md visible-lg" id="wb-lng">
    <h2 _ngcontent-c0="">Language selection</h2>
    <!--bindings={
  "ng-reflect-ng-if": "true",
  "ng-reflect-ng-if-else": "[object Object]"
}--><ul _ngcontent-c0="" class="text-right"><li _ngcontent-c0=""><a _ngcontent-c0="" hreflang="fr" lang="fr" style="cursor: pointer;">Français</a></li><li _ngcontent-c0="" class="curr" style="cursor: pointer;">English <span _ngcontent-c0="">(current)</span></li></ul><!----></section>

Now this might not be the issue but maybe there is something there?