CODEWITHSUNDEEP
angulartypescriptlocal-storage
avdeveloper
avdeveloper

Reputation: 549

How to get set select value from localstorage?

I have the below select component:

<label>
{{ "HOME.SELECT" | translate }}
<select #langSelect (change)="translate.use(langSelect.value)" (change)='onOptionsSelected($event)'>
  <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="??">
    {{ lang }}</option>
 </select>
</label>

In the constructor, the selected language is saved into localstorage as below:

constructor(public translate: TranslateService) {
  translate.addLangs(["en-US", "fr-FR", "de-DE"]);
  if (localStorage.getItem('language')) {
  translate.setDefaultLang(localStorage.getItem('language'));
  translate.use(localStorage.getItem('language'));
} else {
  translate.setDefaultLang('en');
  translate.use('en');
  localStorage.setItem("language", "en");
}
}

How can I set selected index of the based on the value stored in localstorage?

Upvotes: 0

Views: 360

Answers (1)

Rajat
Rajat

Reputation: 187

Add 'value' parameter to select and pass variable to it like below. Assign the value of variable to localstorage value. Assign the same variable to 'selected'.

Updated your code below:

<pre>
  <label>
    {{ "HOME.SELECT" | translate }}
    <select #langSelect (change)="translate.use(langSelect.value)" (change)='onOptionsSelected($event)' value="localStorageValueVariable">
      <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="localStorageValueVariable">
        {{ lang }}</option>
     </select>
    </label>
</pre>

Upvotes: 1

Related Questions