How to Get Another Component Variable

Question

I have the following situation:

utils-Nav-user.component.html

<nav class="navbar fixed-bottom navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand text-white">ESC - Sistema De Controle De Pizzaria - </a>
  <a class="navbar-brand text-white">Usuário Logado: {{loginUsuarioParam}}</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropup">
        <a class="nav-link dropdown-toggle text-white" id="dropdown10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Login</a>
        <div class="dropdown-menu" aria-labelledby="dropdown10">
          <a class="dropdown-item" routerLink="/usuario/login" routerLinkActive="active">Sair</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

utils-Nav-usuario.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
  selector: 'app-utils-nav-usuario',
  templateUrl: './utils-nav-usuario.component.html',
  styleUrls: ['./utils-nav-usuario.component.css']
})
export class UtilsNavUsuarioComponent {

  loginUsuarioParam : string;

}

I have this variable in my Component and I need to read this variable in several parts of the program, but how do I read in another Component for example in the example below.

request-piece-create.component.ts

  abrirCaixa() {

    this.caixa.codigoUsuario = this.loginUsuarioParam;

    this.caixaService.saveCaixa(this.caixa)
    .subscribe (
      data => {
        if (data.status == 200) {
          this.toastr.success("Pedido Avulso", "Pedido Avulso Alterado Com Sucesso.");

        }
      },
      error => {
        if (error.status == 0) {
          this.toastr.error("Pedido Avulso", "Sem Conexão Com O WebService.");
        } else {
          this.error = error.json();
          this.toastr.error("Pedido Avulso", this.error.message); 
        }
      }
    );
  }

I have this method above that is in another Component And I want to read to play in this class Someone has any idea how I do it, I had the idea to change that nav how it is used on all screens create a Module for him but now do not know how to use the variable that is there.

Answer 1

There are two possibilities:

The first is if the component you want to read the variable is child of the component that has the loginUsuarioParam variable (Utilsnavusuariocomponent). In this case you declare the loginUsuarioParam variable as @Input() in the child component:

import { Component, OnInit, OnDestroy, Input } from '@angular/core';
@Component({
  selector: 'app-pedido-avulso-create',
  templateUrl: './pedido-avulso-create.component.html',
  styleUrls: ['./pedido-avulso-create.component.css']
})
export class UtilsPedidoAvulsoCreateComponent {
  /* você pode declarar um valor padrão caso a variável não seja declarada no componente */
  Input() loginUsuarioParam = '';

}

And the other option is to save to a global variable or localStorage.