Passing Data of a Row from a table component to a Form component with an edit button

Issue

I'm using Angular, please can anyone help me with an example of passing Data from a row of a table component and display it in another form component using an edit button.

I tried to use a service for this, by using BehaviourSubject.

emit.service.ts

@Injectable({
  providedIn: 'root'
})
export class EmitService {

public defaultValue : string = '';
public RowSender : BehaviorSubject<string>= new BehaviorSubject<string>(this.defaultValue);
public currentValueEmit = this.RowSender.asObservable();


public sendValue(RowtoEmit:string){

this.RowSender.next(RowtoEmit);

}

public recieveValue():Observable<string>{
    return this.RowSender.asObservable();
}  
   
   
  constructor() { }
}

Tier.Component.ts (this is the table component)

constructor(private router: Router,private _EmitService :EmitService){}

//this the button for editing in table actions' column

edit(value : any)
    {
     this._EmitService.sendValue(value.id);
     this._EmitService.sendValue(value.raisonSociale);
     this._EmitService.sendValue(value.nomComplet);
     this._EmitService.sendValue(value.adresse);
     this.router.navigateByUrl('referencielcommun/Tier/Form');
    }

Form.Component.ts

 constructor(private _EmitService : EmitService) {

      this._EmitService.recieveValue().subscribe(
        (d:any)=>{
          {
          this.TierForm.controls['ID'].setValue(d.id);
          this.TierForm.controls['NomComplet'].setValue(d.raisonSociale ?? null);
          this.TierForm.controls['NomComplet'].setValue(d.nomComplet ?? null);
          this.TierForm.controls['Adresse'].setValue(d.adresse ?? null);
  
        }}); 
     }

Form.component.html

 <form [formGroup] ="TierForm" class="form-inline" (ngSubmit)="onFormSubmit()" >
      <fieldset>
      <legend>Formulaire de Tier</legend>
    
   <div class="container">
      <div class="row" >
        
        <div class="col-xs-12 col-md-4">
          <div style="display: flex;flex-direction: column;">
            <mat-label><strong> Raison Sociale :</strong></mat-label>
            <mat-form-field class="example-full-width" appearance="fill">
              <input matInput ngModel formControlName="RaisonSociale">
              <mat-error *ngIf="true">
                Ce Champs est obligatoire.
              </mat-error>
            </mat-form-field>
          </div>
        </div>
      
      <div class="col-xs-12 col-md-4">
        <div style="display: flex;flex-direction: column;">
          <mat-label><strong> Nom complet :    </strong> </mat-label>
          <mat-form-field class="example-full-width" appearance="fill">
            <input matInput ngModel formControlName="NomEtPrenom">
          </mat-form-field>
         </div>
      </div>
      
      <div class="col-xs-12 col-md-4">
        <div style="display: flex;flex-direction: column;">
          <mat-label><strong> Adresse :    </strong> </mat-label>
          <mat-form-field class="example-full-width" appearance="fill">
            <input matInput ngModel formControlName="Adresse">
            <mat-error *ngIf="true">
              Ce Champs est obligatoire.
            </mat-error>
          </mat-form-field>
        </div>
      </div>
  
  <div class="center">
      <button class="addbutton" mat-raised-button color="primary" type="submit"  style="justify-content: left !important;">{{actionBtn}}</button>
      <button class="addbutton" mat-raised-button color="warn" (click)="Annuler()"  style="justify-content: left !important;">Annuler</button>
    </div>
     </fieldset>
    </form>

Solution

Now it is solved after starting from the begining.

First and foremost, we create an emitter service in order to send and receive data between two components.

emit.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class EmitService {

//we have to set an empty defaultValue for the TableRow
  public defaultValue : string = '';
  public TableRow : BehaviorSubject<string>= new BehaviorSubject<string>(this.defaultValue);


  public sendValue(RowtoEmit:string){
    this.TableRow.next(RowtoEmit);}

  public recieveValue():Observable<string>{
      return this.TableRow.asObservable();}  

  constructor() { }
}

And then we head to the Table component, that is of course from which we're going to send the data to the form component.

table.component.ts

// we declare the router and the Emit service in the constructor

  constructor(private router: Router,private _EmitService :EmitService){

// we add a method for the edit button on table

  edit(value : any)
    {

      this._EmitService.sendValue(value);
      this.router.navigateByUrl('referencielcommun/Tier/Form');
    }
}

Now we have to fetch the row data from our table with (click)="edit(row)"

table.component.html

 <ng-container matColumnDef="ACTION" >
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="actionheader"> Action</th>
            <td mat-cell *matCellDef="let row">
          
            <button mat-icon-button color="primary" type="button" (click)="edit(row)">
              <mat-icon>edit</mat-icon>
            </button>   
            </td>
          </ng-container>

then we head to our form component where we're going to receive our data and display them in the inputs.

form.component.ts

TierForm:any = this.formBuilder.group({
    ID:[0],
    RaisonSociale:[null,[Validators.required]],
    NomEtPrenom:[null],
    Adresse:[null,[Validators.required]],
  });

// we declare the router & the emit service as well in the constructor

constructor(private router : Router,private _EmitService : EmitService){

/* in the body of the constructor we set the values of the data recieved from 
our row in the form inputs*/


      this._EmitService.recieveValue().subscribe(
        (d:any)=>{
          if(d != null)
          {
          this.TierForm.get('ID').setValue(d.id ?? 0);
          this.TierForm.get('RaisonSociale').setValue(d.raisonSociale ?? null);
          this.TierForm.get('NomEtPrenom').setValue(d.nomEtPrenom ?? null);
          this.TierForm.get('Adresse').setValue(d.adresse ?? null);
        }}); 

}

And finally we put our formcontrols.

form.component.html

<div class="col-xs-12 col-md-4">
          <div style="display: flex;flex-direction: column;">
            <mat-label><strong> Raison Sociale :</strong></mat-label>
            <mat-form-field class="example-full-width" appearance="fill">
              <input matInput  [formControl]="TierForm.get('RaisonSociale')">
              <mat-error *ngIf="true">
                Ce Champs est obligatoire.
              </mat-error>
            </mat-form-field>
          </div>
        </div>
      
       <div class="col-xs-12 col-md-4">
        <div style="display: flex;flex-direction: column;">
          <mat-label><strong> Nom complet :    </strong> </mat-label>
          <mat-form-field class="example-full-width" appearance="fill">
            <input matInput [formControl]="TierForm.get('NomEtPrenom')">
          </mat-form-field>
         </div>
      </div>
      
      <div class="col-xs-12 col-md-4">
        <div style="display: flex;flex-direction: column;">
          <mat-label><strong> Adresse :    </strong> </mat-label>
          <mat-form-field class="example-full-width" appearance="fill">
            <input matInput  [formControl]="TierForm.get('Adresse')">
            <mat-error *ngIf="true">
              Ce Champs est obligatoire.
            </mat-error>
          </mat-form-field>
        </div>
      </div>

Keep in mind that BehaviourSubject holds the value even if you navigate to another component, that's why you have to set the sent value to '' or null if you're done working with it.

Answered By - Hamid Elouardaoui