Is it possible to append a selected value from angular dropdown to gluu url?

Question

Currently i am working on angular as a beginner and my task is to append selected value from dropdown to gluu login page url like this

If my Url is like this before append strong text http://localhost/folder/Home

after append the url will be http://something/xyz.passless.xhtml

my question is how to append value like this when i will click on signin button the url should be like this click this link to see he image http://something/xyz.passless.xhtml?lang=en

suppose my dropdown is like this

<select>
<option value=en>en</option>
<option value=en>fr</option>
</select>

plz help me and give a good solution of this problem Thanks in advance

Answer 1

Handle on change event in Html

<select (change)="onChange($event.target.value)">
<option value=en>en</option>
<option value=fr>fr</option>
</select>

import { Router } from '@angular/router';

constructor(private router: Router){}

// Navigate to the url with params
onChange(currentVal) {
    // suppose your current url is http://something/xyz.passless.xhtml
    // after navigation url will be http://something/xyz.passless.xhtml?lang=en
    this.router.navigate([`/xyz.passless.xhtml`], {
         queryParams: {
              lang: currentVal // 'en' --add any number of params
         }
    });
}