title: Passing Data of a Row from a table component to a Form component with an edit button
body: <p>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.</p>
  <p>I tried to use a service for this, by using BehaviourSubject.</p>
  <p><strong>emit.service.ts</strong></p>
  <pre><code>
  @Injectable({
    providedIn: 'root'
  })
  export class EmitService {
  
  public defaultValue : string = '';
  public RowSender : BehaviorSubject&lt;string&gt;= new BehaviorSubject&lt;string&gt;(this.defaultValue);
  public currentValueEmit = this.RowSender.asObservable();
  
  
  public sendValue(RowtoEmit:string){
  
  this.RowSender.next(RowtoEmit);
  
  }
  
  public recieveValue():Observable&lt;string&gt;{
      return this.RowSender.asObservable();
  }  
     
     
    constructor() { }
  }
  </code></pre>
  <p><strong>Tier.Component.ts (this is the table component)</strong></p>
  <pre><code>
  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');
      }
  </code></pre>
  <p><strong>Form.Component.ts</strong></p>
  <pre><code>
   constructor(private _EmitService : EmitService) {
  
        this._EmitService.recieveValue().subscribe(
          (d:any)=&gt;{
            {
            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);
    
          }}); 
       }
  </code></pre>
  <p><strong>Form.component.html</strong></p>
  <pre><code> &lt;form [formGroup] =&quot;TierForm&quot; class=&quot;form-inline&quot; (ngSubmit)=&quot;onFormSubmit()&quot; &gt;
        &lt;fieldset&gt;
        &lt;legend&gt;Formulaire de Tier&lt;/legend&gt;
      
     &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;row&quot; &gt;
          
          &lt;div class=&quot;col-xs-12 col-md-4&quot;&gt;
            &lt;div style=&quot;display: flex;flex-direction: column;&quot;&gt;
              &lt;mat-label&gt;&lt;strong&gt; Raison Sociale :&lt;/strong&gt;&lt;/mat-label&gt;
              &lt;mat-form-field class=&quot;example-full-width&quot; appearance=&quot;fill&quot;&gt;
                &lt;input matInput ngModel formControlName=&quot;RaisonSociale&quot;&gt;
                &lt;mat-error *ngIf=&quot;true&quot;&gt;
                  Ce Champs est obligatoire.
                &lt;/mat-error&gt;
              &lt;/mat-form-field&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        
        &lt;div class=&quot;col-xs-12 col-md-4&quot;&gt;
          &lt;div style=&quot;display: flex;flex-direction: column;&quot;&gt;
            &lt;mat-label&gt;&lt;strong&gt; Nom complet :    &lt;/strong&gt; &lt;/mat-label&gt;
            &lt;mat-form-field class=&quot;example-full-width&quot; appearance=&quot;fill&quot;&gt;
              &lt;input matInput ngModel formControlName=&quot;NomEtPrenom&quot;&gt;
            &lt;/mat-form-field&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;col-xs-12 col-md-4&quot;&gt;
          &lt;div style=&quot;display: flex;flex-direction: column;&quot;&gt;
            &lt;mat-label&gt;&lt;strong&gt; Adresse :    &lt;/strong&gt; &lt;/mat-label&gt;
            &lt;mat-form-field class=&quot;example-full-width&quot; appearance=&quot;fill&quot;&gt;
              &lt;input matInput ngModel formControlName=&quot;Adresse&quot;&gt;
              &lt;mat-error *ngIf=&quot;true&quot;&gt;
                Ce Champs est obligatoire.
              &lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    
    &lt;div class=&quot;center&quot;&gt;
        &lt;button class=&quot;addbutton&quot; mat-raised-button color=&quot;primary&quot; type=&quot;submit&quot;  style=&quot;justify-content: left !important;&quot;&gt;{{actionBtn}}&lt;/button&gt;
        &lt;button class=&quot;addbutton&quot; mat-raised-button color=&quot;warn&quot; (click)=&quot;Annuler()&quot;  style=&quot;justify-content: left !important;&quot;&gt;Annuler&lt;/button&gt;
      &lt;/div&gt;
       &lt;/fieldset&gt;
      &lt;/form&gt;
  </code></pre>