Sending data to Dialog Component

Question

Sending data to Dialog Component

While working on implementing the dialog component of material2, I encountered a particular issue:

I am aiming to create a versatile dialog for all confirmation messages, allowing developers to input text based on business requirements. However, according to the documentation, there are no specific provisions for this. Is there a workaround available, or should I consider submitting it as a feature request on GitHub?

export class ConfirmationDialogComponent implements OnInit {
  @Input() confirmationText: string;
  @Input() confirmationTitle: string;
  @Input() confirmationActions: [string, string][] = [];

  constructor(public dialogRef: MdDialogRef<ConfirmationDialogComponent>) {}

  ngOnInit() {}
}

Usage example:

let dialogRef = this.dialog.open(ConfirmationDialogComponent);

angular typescript angular2-material

Answer 1

Answer №1

When you use the open method, it provides you with the component instance which allows you to inject any content into it like so:

openDialog() {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog);
    let instance = dialogRef.componentInstance;
    instance.text = "This text can be used inside DialogOverviewExampleDialog template ";
    console.log('dialogRef',dialogRef);
  }

Then within the DialogOverviewExampleDialog template, you can display the injected text using:

this is the text {{text }}

Plunker

Normally, I would create a configuration object that my Component understands and pass it when opening the modal :

 private config = {
    title :"Hello there ",
    text :"What else ? "
 };

 openDialog() {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog);
    let instance = dialogRef.componentInstance;
    instance.config = this.config;
    console.log('dialogRef',dialogRef);
  }

And then inside the modal component :

<div class="my-modal">
   <h1>{{config.title}}</h1>
   <p>{{config.text}}</p>
</div>

Answer 2

When you use the open method, it provides you with the component instance which allows you to inject any content into it like so:

openDialog() {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog);
    let instance = dialogRef.componentInstance;
    instance.text = "This text can be used inside DialogOverviewExampleDialog template ";
    console.log('dialogRef',dialogRef);
  }

Then within the DialogOverviewExampleDialog template, you can display the injected text using:

this is the text {{text }}

Plunker

Normally, I would create a configuration object that my Component understands and pass it when opening the modal :

 private config = {
    title :"Hello there ",
    text :"What else ? "
 };

 openDialog() {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog);
    let instance = dialogRef.componentInstance;
    instance.config = this.config;
    console.log('dialogRef',dialogRef);
  }

And then inside the modal component :

<div class="my-modal">
   <h1>{{config.title}}</h1>
   <p>{{config.text}}</p>
</div>

Sending data to Dialog Component

Answer №1

Similar questions

The Challenge of Iterating Through an Array of Objects in Angular Components using TypeScript

The definition of "regeneratorRuntime" is missing in the rete.js library

React onClick event image attribute is unique because it allows for interactive

Encountering a type-safety problem while attempting to add data to a table with Drizzle

What could cause my arguments to "not align with any signature" of console.log?

The best practices for utilizing ES6 Modules syntax in TypeScript files within a NextJS environment

What is the best approach for initializing and adding dataset in a database using Nest.JS when launching the application for the first time?

GlobalsService is encountering an issue resolving all parameters: (?)

The Order ID field in the Serenity-Platform's Order Details tab is not registering orders

Passing back function results in an IONIC application

calculating the dynamic height of a document from top to bottom using Angular

TypeScript and Express create a powerful array combination capability within the type system

Is there a way to deactivate the Interceptor in a exported function?

Challenges encountered when sending an HTTP post request in Ionic 2 with Angular 2

Angular - Error: Cannot find module 'fs'

Instructions for designing a Loading Indicator or Progress Bar within the App Directory of NextJS

Facebook is failing to detect meta tags for Angular Universal

After refreshing the page, RouterLinkActive in Angular 6 fails to work

What is the rationale behind assigning a random value to the `(keyup)` event in order to update template local variables in Angular2?

Using TypeScript with Angular UI Router for managing nested named views in the application