Angular: Pass data from Material Dialog to component, which didn't open the dialog

Question

I have a network.component which opens my dialog send-tx-dialog.component. The user fills the send-tx-dialog with information. I want to send that information to another com

Answer 1

You should use shared service. In ngAfterViewInit subscribe dialog component to property you want to listen in shared service. In parent component call shared service method that will set property in shared service. Property should be of a type Subject (rxjs)

Take a look at this post: and you will understand everything. Section with shared service. https://netbasal.com/event-emitters-in-angular-13e84ee8d28c Just make sure that you subscribe in ngAfterViewInit in dialog component.

Answer 2

I don't know this is the right way to solve problem but i try to help if it's work for you

network.component.html

<button mat-raised-button (click)="openDialog()">Click</button>

network.component.ts

 constructor(private fb: FormBuilder, private _AS: AuthService, public dialog: MatDialog) {}
    openDialog(): void {
        const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
          width: '250px',
          data: ''
        });

        dialogRef.afterClosed().subscribe(result => {
          this._AS.emitTransaction(result);
          console.log('The dialog was closed');
        });
      }

dialog TS:

@Component({
  selector: 'app-dialog',
  templateUrl: 'dialog.html',
})
export class DialogOverviewExampleDialog {
  form: FormGroup;
  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any, private fb: FormBuilder) {
   this.form = this.fb.group({
      sender: ['', Validators.required],
      recipient: ['', Validators.required],
      amount: ['', Validators.required],
      fee: ['', Validators.required],
      releasedAt: [moment(), Validators.required]
    });
  }
  onNoClick(): void {
    this.dialogRef.close();
  }
}

dialog.html

<div [formGroup]="form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="first" formControlName="sender">
  </mat-form-field>
  <mat-form-field class="example-full-width">
    <input matInput placeholder="second" formControlName="recipient">
  </mat-form-field>
<mat-form-field class="example-full-width">
    <input matInput placeholder="second" formControlName="amount">
  </mat-form-field>
<mat-form-field class="example-full-width">
    <input matInput placeholder="second" formControlName="fee">
  </mat-form-field>
<mat-form-field class="example-full-width">
    <input matInput placeholder="second" formControlName="releasedAt">
  </mat-form-field>
 <button [mat-dialog-close]="form.value">save</button>
</div>

AuthService:

 export class AuthService {

     public transaction = new BehaviorSubject<any>(false);
  transaction$ = this.transaction.asObservable();

  emitTransaction(data: any) {
    this.transaction.next(data);
  }

transaction-pool.component.ts

ngOnInit() {
    this._AS.transaction$.subscribe(data => {
      this.data = data;
      console.log(this.data);
    });
  }

Answer 3

In your shared service you can do:

public transaction = new Subject<any>();

emitTransaction(val) {
  this.transaction.next(val);
}

And after your subribe of the closed dialog do:

dialogRef.afterClosed().subscribe(
      data => this.sharedService.emitTransaction(data);
    );

And in your other component:

this.sharedService.transaction.subscribe(transaction => {
    this.transaction = transaction;
  })

It should look something like this.