Sending parameters between different pages without URL

For the communication between components of the same level a service is used, the use of service is part of the good practices of Angular, in addition to being very useful for cases like this, it is also customary to leave all http communications within the service.

The creation of services may seem like a lot of work, but once you understand how they work, writing them will be very simple and you will see the usefulness of them to organize your project.

The content to follow is a bit long, but we recommend you read it and try to understand it well.

Below an example of how to create services, integrate them to your component and module

// --------------- SERVICIO -------------------
import { Injectable } from '@angular/core';

@Injectable()

export class MiServicio {

  constructor() { }
  /* Declaramos 2 variables en el servicio, estas variables podran ser accedidas desde cualquier componente.
     Simplemente inyectamos el servicio en los componentes que deseamos que usen estas variables y servicios
  */
  miObjeto: any = {};
  miArray: any[] = [];

  // Funciones que tambien podran ser accedidas desde los componentes
  getObjeto() {
      return miObjecto;
  }

  getFromArray(token) {
      return this.miArray[this.miArray.findIndex(item => item.token === token)];
  }
  // Funcion para modificar la variable, que puede ser llamada desde cualquier componente
  modificarObjeto(nuevoObjeto) {
      this.miObjeto = newObjeto;
  }

}

// --------------- COMPONENTE-------------------
import { Component} from '@angular/core';
// Importar el servicio creado
import {MiServicio} from './miServicio.service';
@Component({
  selector:    'app-mi-componente',
  templateUrl: `<h1>{{miObjeto.token}}<h2>`
})
export class MiComponente {

    miObjeto: any = {};
    // Inyectamos el servicio en el componente para usarlo
    constructor(private miServicio: MiServicio) {
         /* aqui asignamos a miObjeto declarado arriba con el valor que retorna la funcion getObjeto()
         de miServicio */
         this.miObjeto = this.miServicio.getObjeto()
    }

    miFuncion(token) {
       /* aqui asignamos a miObjeto el valor que retornamos de la funcion getFromArray() de miServicio
         esta funcion recibe un parametro
       */
       this.miObjeto = this.miServicio.getFromArray(token);
    }

    /* Aqui llamamos a la funcion modificarObjeto y pasamos como parametro el objeto 
       que querramos guardar en aquella variable
    */
    modificarO() {
         this.miServicio.modificarObjeto(this.miObjeto);
       // vale la pena mencionar que no hace falta crear una funcion para modificar la varibale
       // tambien podemos hacerlo asi: this.miServicio.miObjeto = {}
       // pero es una buena practica separar este tipo de cosas en funciones para mejorar la legibilidad
    }
}

Finally the only thing left is to declare the service as a provider in the module

 // --------------- MODULO -------------------
 // Puedes tener tantos servicios como quieras, solo debes declararlos en providers
 // E inyectarlos en los componentes que quieras
declarations: [
    MiComponente
   ],

providers: [
    MiServicio
   ]