Pass value to another angular page

Asked

Viewed 777 times

2

Good morning!! On a given page I have a button that takes code and name of a customer and I need to pass this information to an input of another page:

Page of the function that takes code and name

<tr *ngFor="let pesquisas of pesquisa">
              <td class="text-center">{{pesquisas.Codigo}}</td>
              <td class="text-center">{{pesquisas.Nome}}</td>
              <th>
                <button class="btn btn-default" (click)="PegarValores(pesquisas.Codigo, pesquisas.Nome)">
                  <i class="glyphicon glyphicon-ok" style="color:green;"></i>  Iniciar
                </button>
              </th>
            </tr>

Page I want to receive the information (input)

<div class="col-md-4">
      <label>Cliente:</label>
      <div class="input-group">
        <input type="text" class="form-control small" formControlName="codigoCliente" required>
        <input type="text" class="form-control size" formControlName="nomeCliente">
        <span class="input-group-btn">
          <button type="button" class="btn btn-info" style="height:30px;">
            <i class="glyphicon glyphicon-search a"></i>
          </button>
        </span>
      </div>
    </div>

Ps:I am receiving the information in the Take values function (when clicking, the console shows the client I am selecting)

html angular
  • 1

    The best is to use a shared service between the two components. Using something with a Behaviorsubject to share this information.

  • 1

    https://answall.com/questions/305588/compartilhar-dados-entre-components-angular-6/305989#305989

  • Man, thank you so much, solved my problem, hug!

1 answer

1


It has two main ways of sharing a state between two components that have no parent/child relationship. The first would be with Subject behavior with a service injected into the two components otherwise it would be by a state manager like the ngrx which follows the Redux standard.

Example with Subject behavior:

data.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

import { Data } from '../entities/data';

@Injectable()
export class DataService {

  private dataSource = new BehaviorSubject<SnapshotSelection>(new Data());
  data = this.dataSource.asObservable();

  constructor() { }

  updatedDataSelection(data: Data){
    this.dataSource.next(data);
  }

}

Its Component

constructor(private dataService: DataService) { }

dataService.data.subscribe(data => {
// use os dados aqui
})

dataService.updateData(newData);// para atualizar os dados

Source: https://medium.com/@weswhite/angular-behaviorsubject-service-60485ef064fc

Browser other questions tagged html angular

You are not signed in. Login or sign up in order to post.