show the same data of one component in various components. Angular 4

Question

Hello im showing one HTML code in various others components. In browser when changing from one component to other, the data showned from the shared component changes.. how can i keep always the same values.

if i select one of the options from the select i want that option to stays the same if i change from one component to another.

HTML SHARED

<div class="row">
    <div class="col col-sm-6">
        <div class="card mb-3">
            <div class="card-header">
                Parametros Variables
            </div>
            <div class="card-block">
                <div class="form-group">
                <label>Modo :</label>
                <select id="selectid" class="form-control-mb-12"
                ngModel (ngModelChange)="modo($event)">
                    <option value="mod1">MODO 1</option>
                    <option value="mod2">MODO 2</option>
                    <option value="mod3">MODO 3</option>
                </select>
                 <label>Intervalo de Guarda :</label>
                <select class="form-control-mb-12"
                (change)="intGua($event.target.value)">
                    <option value="unCuarto">1/4</option>
                    <option value="unOctavo">1/8</option>
                    <option value="unDie">1/16</option>
                    <option value="unTrein">1/32</option>
                </select> <br>
                One-Seg : <button (click)="change()" id="oneseg" type="button" class="btn btn-sm btn-secondary">Desactivado</button>
            </div>
            </div>
            <div class="card-footer">
                <button class="btn btn-info btn-sm" (click)="randomize()">Update</button>
            </div>
        </div>
    </div>
</div>

TS from Shared Component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-param-var',
  templateUrl: './param-var.component.html',
  styleUrls: ['./param-var.component.scss']
})
export class ParamVarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  change(){

   var change = document.getElementById("oneseg");
                    if (change.innerHTML === "Desactivado")
                    {
                        change.innerHTML = "Activado";
                    }
                    else {
                        change.innerHTML = "Desactivado";
                    }
}

modo(value: string){
  switch(value) {
    case "mod1":
       console.log ("WORKS MODO 1");
       break;
    case "mod2":
        console.log ("WORKS MODO 2");
       break;
    case "mod3":
        console.log ("WORKS MODO 3");
       break;
  }
}

intGua(value : string) {
switch(value) {
    case "unCuarto":
       console.log ("WORKS 1/4");
       break;
    case "unOctavo":
        console.log ("WORKS 1/8");
       break;
    case "unDie":
        console.log ("WORKS 1/16");
       break;
    case "unTrein":
        console.log ("WORKS 1/32");
       break;
  }


}

}

how i call the html component from others component

<p>
  resumen works!
</p>

<app-param-var></app-param-var>

how i import the component into other components

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


import { ResumenRoutingModule } from './resumen-routing.module';
import { ResumenComponent } from './resumen.component';

import { FormsModule, ReactiveFormsModule} from '@angular/forms';
import {ParamVarModule} from '../param-var/param-var.module';

@NgModule({
  imports: [
    CommonModule,
    ResumenRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    ParamVarModule,

  ],
  declarations: [ResumenComponent,


  ]
})
export class ResumenModule { }

Answer 1

You would need to put that component outside of your other ones, probably in AppComponent . Otherwise, Angular is going to rerender, and therefore reset, your component on page change. Then, you can *ngIf that component out of AppComponent whenever you're not on a page that needs it.

// Shared service

class ShowService {
    showResumen:boolean = false;
}


// In your pages requiring the page

class YourPageNeedingResumenComponent {
    constructor(service: ShowService) {
        service.showResumen = true;
    }
}


// In your pages NOT requiring the page

class YourPageNotNeedingResumenComponent {
    constructor(service: ShowService) {
        service.showResumen = false;
    }
}


// app.component.ts
class AppComponent {
    constructor(service: ShowService, ...otherdependencies) {}
}


// app.component.html

<however you're containing components> </however> // this is your other content
<app-resumen *ngIf="service.showResumen"></app-resumen>