Retaining selected option from dropdown

Question

i have a dropdown with different options. i want to keep the selected option at the top of the dropdown till the user changes it. Right now if i select any options and i go out of the component and then come back, the dropdown reset with the first value....

HTML

 <select class="form-control-mb-12"
                (change)="intSelection($event.target.value)" >

                    <option  value="1/4">1/4</option>
                    <option value="1/8">1/8</option>
                    <option  value="1/16">1/16</option>
                    <option  value="1/32">1/32</option>
 </select>

Component

import { Component, OnInit } from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
import { ModuladorService } from 'app/Services/modulador.service'

@Component({
  selector: 'app-resumen',
  templateUrl: './resumen.component.html',
  styleUrls: ['./resumen.component.scss'],
  providers: [ModuladorService]
})
export class ResumenComponent implements OnInit {

  intSelected : string = "" ;

  constructor(private _moduladorService:ModuladorService) {

        this.intSelected = this._moduladorService.obtenerParametros();

   }




  ngOnInit() {

  }

  intSelection(value){

    switch(value) {
    case "1/4":   
     this.intSelected = value;
       break;
    case "1/8":
     this.intSelected = value;           
       break;
    case "1/16":
     this.intSelected = value;
       break;
    case "1/32":
     this.intSelected = value;
       break;
  }
      this._moduladorService.actualizarParametros(this.intSelected);
  }

SERVICE

import { Injectable } from '@angular/core';
import { InitParam } from 'app/layout/modulador/resumen/init-param'

@Injectable()
export class ModuladorService extends InitParam {

  constructor() {
    super();
    this.load();
   }

   obtenerParametros(){

      var intSelected = JSON.parse(localStorage.getItem('intSelected'));
      return intSelected;

   }

   actualizarParametros(newParam : any){

          var intSelected = JSON.parse(localStorage.getItem('intSelected'));

          intSelected = newParam;

          localStorage.setItem('intSelected', JSON.stringify(intSelected));


   }

}

iNIT FOR SERVICE

export class InitParam {



load(){

        if(localStorage.getItem('intSelected')=== null ){
            console.log('No se encontraron parametros...');

            var intSelected = '1/4'

            localStorage.setItem('intSelected', JSON.stringify(intSelected));
        }else{
                console.log('Cargando parametros...');
        }



    }
}

you really don't need that switch statement there, it does nothing, just leave ```intSelection(value){ this.intSelected = value; }``` — LLL, Jul 17 '17 at 20:22

score 1 · Accepted Answer · answered Jul 17 '17 at 20:07

1

You could keep the selected things in an @Injectable service, which, if not made as, definitely feels like, a singleton.

Or input / output it from / to a parent component.

answered Jul 17 '17 at 20:07

LLL

3,566
2
25
44

can u give an example? im using service to storage data.. but dont know how to relate the storaged data with the dropwdown view. check now with full code. – Ixam Deirf Jul 17 '17 at 20:17
1

https://stackoverflow.com/questions/3518002/how-can-i-set-the-default-value-for-an-html-select-element – LLL Jul 17 '17 at 20:19
not answering my question..... the users is the one who chose from the dropdown. and the the option he select is the one that should keep showing the dropwdown on the top . – Ixam Deirf Jul 17 '17 at 20:21
This worked for me – Ixam Deirf Jul 17 '17 at 20:26
1. user selects something. 2. you save it in the service and put it at the top. 3. component is changed and returned back. 4. if something is saved in the service add it to the top again. – LLL Jul 17 '17 at 20:26
1

Also, don't hardcode the selections in the template, make an array ```options = [ 'a', 'b', 'c']``` then iterate them with ```ngFor``` like in the examples here - https://johnpapa.net/angular-2-ngfor/ – LLL Jul 17 '17 at 20:28

score 0 · Answer 2 · answered Jul 17 '17 at 20:10

0

You need storage data in services. Services injectable to module. If you need save information in all application - use services in providers at app.module.ts

answered Jul 17 '17 at 20:10

Allen Wahlberg

192
10

yes im doing that. but how do i keep the option selected in the dropdown. check now with full code. – Ixam Deirf Jul 17 '17 at 20:16

Retaining selected option from dropdown

2 Answers2