CODEWITHSUNDEEP
htmlangular
Ixam Deirf
Ixam Deirf

Reputation: 435

Retaining selected option from dropdown

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...');
        }



    }
}

Upvotes: 0

Views: 430

Answers (2)

Allen Wahlberg
Allen Wahlberg

Reputation: 192

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

Upvotes: 0

LLL
LLL

Reputation: 3771

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.

Upvotes: 1

Related Questions