CODEWITHSUNDEEP
angulartypescriptdialogcomponentscommunication
Michael
Michael

Reputation: 297

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

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 component: transaction-pool.component. And after that I want to display the data in a data table dynamically. I tried to use push() but it didn't work.

What is a possible way to do that?

Following some code which I think could be important.

Part of the TS of the dialog:

  constructor(
    private fb: FormBuilder,
    private dialogRef: MatDialogRef<SendTXDialogComponent>,
    @Inject(MAT_DIALOG_DATA) data) {

    this.sender = data.sender;

    this.form = this.fb.group({
      sender: [this.sender, Validators.required],
      recipient: [this.recipient, Validators.required],
      amount: [this.amount, Validators.required],
      fee: [this.fee, Validators.required],
      releasedAt: [moment(), Validators.required]
    });
  }

Dialog gets opened in network.component.ts:

  openDialog(nodeID) {

    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.hasBackdrop = false;

    dialogConfig.data = {
      sender: nodeID,
    };

    const dialogRef = this.dialog.open(SendTXDialogComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(
      data => console.log('Send Transaction Output:', data)
    );

  }

transaction-pool.component.ts:

export class TransactionPoolComponent implements OnInit {
  displayedColumns = ['sender', 'recipient', 'amount', 'fee'];
  dataSource = ELEMENT_DATA;

  transaction: Transaction;

  constructor(private _AS: AuthenticationService) {
  }

  ngOnInit() {
    this._AS.transaction.subscribe( transaction => {
      this.transaction = transaction;
      this.dataSource.push(this.transaction); // This doesn't display the data in the table
      }
    );
  }
}

export interface Transaction {
  sender: number;
  recipient: string;
  amount: number;
  fee: string;
}

const ELEMENT_DATA: Transaction[] = [
];

Upvotes: 2

Views: 4736

Answers (3)

I.Step
I.Step

Reputation: 779

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.

Upvotes: 0

Abhishek
Abhishek

Reputation: 1778

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);
    });
  }

Upvotes: 4

Swoox
Swoox

Reputation: 3740

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.

Upvotes: 1

Related Questions