CODEWITHSUNDEEP
angularangular-material
PrivateJoker
PrivateJoker

Reputation: 791

How to pass data to a generic angular component (dialog)

Is there a more intuitive way to accomplish what I have below?

I am trying to make a generic dialog component that the caller can customize by passing in a setupParam class.

I'm still new to the Angular world, while the below code does function as I want, it's not very intuitive to another developer that the setupParam class is needed.

Dialog HTML:

<div>
  <h2 mat-dialog-title>{{setupParams.title}}</h2>
  <mat-dialog-content>
    <ng-content></ng-content>
  </mat-dialog-content>
  <mat-dialog-actions>
    <button mat-raised mat-dialog-close [mat-dialog-close]="false">{{setupParams.button1}}</button>
    <button mat-raised [mat-dialog-close]="true">{{setupParams.button2}}</button>
  </mat-dialog-actions>
</div>

Dialog Typescript:

export class DialogGeneric {

  public setupParams: GenericDialogProperties;

  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
    this.setupParams = data.dialogParams;
  }
    //public dialogRef: MatDialogRef<DialogGeneric>, @Inject(MAT_DIALOG_DATA) public data: any) {}

}

Calling program Typescript:

  myMethod(id) {
    let myDialog = this.dialog.open(MyDialog, {
      height: "400px", width: "400px",
      data: { someData: "some data", dialogParams: this.modalSetup },
  });

Upvotes: 0

Views: 3245

Answers (1)

Abel Valdez
Abel Valdez

Reputation: 2408

Why not using @Input Decorators in your dialog Component Example:

In dialog Component:

 import { Component, Input } from '@angular/core';
    @Component({
    .....
    })
    export class DialogComponent{
       @Input() data: any;
    }

In parent component: 

<dialog [data]='dataObject'>

dataObject is an object that you will fill in the parent class with the text, title, images that you want to show in the Dialog

dataObject = {
    title: 'Title',
    text: 'Some question or any text' 
}

Documentation and full example

Upvotes: 1

Related Questions