Angular Material Dialog কম্পোনেন্ট ব্যবহার করে আপনি পপ-আপ ডায়ালগ তৈরি করতে পারেন যা অ্যাপ্লিকেশনে ইন্টারঅ্যাকটিভ এবং তথ্য প্রদর্শন করতে সহায়তা করে। ডায়ালগে ডাটা পাস করা একটি সাধারণ কিন্তু গুরুত্বপূর্ণ কাজ, যেখানে আপনি ডায়ালগ উইন্ডোতে কিছু ডাটা পাঠাতে পারেন এবং সেটি ডায়ালগের ভেতর ব্যবহার করতে পারেন।

ডায়ালগে ডাটা পাস করার প্রক্রিয়া

1. MatDialogService ব্যবহার করে ডায়ালগ ওপেন করা।
2. ডায়ালগে ডাটা পাস করা।
3. ডায়ালগ থেকে ডাটা গ্রহণ করা।

১. ডায়ালগ কম্পোনেন্ট তৈরি করা

প্রথমে, আপনাকে একটি ডায়ালগ কম্পোনেন্ট তৈরি করতে হবে। এখানে একটি DialogComponent তৈরি করা হবে।

ng generate component dialog

dialog.component.ts ফাইলে ডায়ালগ কম্পোনেন্টের কনটেন্ট থাকবে:

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.css']
})
export class DialogComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
}

এখানে, MAT_DIALOG_DATA ইনজেক্টর ব্যবহার করে ডায়ালগ কম্পোনেন্টে ডাটা পাস করা হয়।

ডায়ালগের HTML ফাইলে ডাটা দেখানো হবে:

<h2 mat-dialog-title>Dialog with Data</h2>
<mat-dialog-content>
  <p>{{ data }}</p>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>Close</button>
</mat-dialog-actions>

এখানে, data প্রপার্টি থেকে পাস করা ডাটা দেখানো হবে।

২. ডায়ালগ ওপেন এবং ডাটা পাস করা

ডায়ালগ কম্পোনেন্টে ডাটা পাস করতে, আপনার MatDialog সার্ভিস ব্যবহার করতে হবে। এটি অ্যাপ্লিকেশনের মূল কম্পোনেন্ট (যেমন app.component.ts) এ করা হবে।

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public dialog: MatDialog) {}

  openDialog() {
    const dialogRef = this.dialog.open(DialogComponent, {
      data: 'Hello from AppComponent!' // এখানে ডায়ালগে পাস করা ডাটা
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('Dialog closed: ', result);
    });
  }
}

এখানে, openDialog() ফাংশনটি ডায়ালগ খুলবে এবং data: 'Hello from AppComponent!' এর মাধ্যমে ডায়ালগে ডাটা পাস করা হবে।

৩. ডায়ালগ থেকে ডাটা গ্রহণ করা

ডায়ালগ বন্ধ হওয়ার পর আপনি afterClosed() মেথডের মাধ্যমে ডায়ালগ থেকে ফলাফল গ্রহণ করতে পারেন।

openDialog() {
  const dialogRef = this.dialog.open(DialogComponent, {
    data: 'Hello from AppComponent!'
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('Dialog closed with result: ', result);
  });
}

এখানে, result হবে যেকোনো ডাটা যা ডায়ালগ থেকে ফেরত আসে।

৪. ডায়ালগে ডাটা পাস করার আরো একটি উদাহরণ

ডায়ালগে কাস্টম অবজেক্ট পাস করা যেতে পারে। উদাহরণস্বরূপ:

openDialog() {
  const dialogRef = this.dialog.open(DialogComponent, {
    data: { name: 'John Doe', age: 30 }
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('Dialog closed with result: ', result);
  });
}

এখানে, ডায়ালগে name এবং age নামে একটি অবজেক্ট পাস করা হচ্ছে।

Angular Material Dialog ব্যবহার করে আপনি সহজেই ডায়ালগ উইন্ডো তৈরি করতে পারেন এবং ডায়ালগে ডাটা পাস করতে পারেন। MAT_DIALOG_DATA ইনজেক্টরের মাধ্যমে ডায়ালগ কম্পোনেন্টে ডাটা পাস করা হয় এবং afterClosed() মেথডের মাধ্যমে ডায়ালগ থেকে ফলাফল গ্রহণ করা যায়। এই প্রক্রিয়া অ্যাপ্লিকেশনের মধ্যে ইন্টারঅ্যাকটিভ ডায়ালগ তৈরি করতে সহায়ক এবং খুবই কার্যকরী।