Angular Material এ ডায়ালগ এবং পপআপ কম্পোনেন্ট ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনে ব্যবহারকারী ইন্টারঅ্যাকশন এর জন্য মোডাল উইন্ডো তৈরি করতে পারেন। এগুলি সাধারণত গুরুত্বপূর্ণ তথ্য, সতর্কতা, ফর্ম, বা কনফার্মেশন বার্তা প্রদর্শন করতে ব্যবহৃত হয়। Angular Material এর MatDialog কম্পোনেন্ট আপনাকে সহজেই একটি ডায়ালগ বা পপআপ উইন্ডো তৈরি করার সুযোগ দেয়।
ডায়ালগ উইন্ডো ব্যবহারকারীকে একটিতে অ্যাকশন নেয়ার সুযোগ দেয় এবং একটি ডায়ালগ ক্লোজ করার পরে প্রাথমিক পেজে ফিরে যায়। এটি অ্যাপ্লিকেশনের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং একটি ফোকাসড এবং পরিষ্কার ইন্টারফেস প্রদান করতে সহায়ক।
প্রথমে আপনাকে MatDialogModule ইমপোর্ট করতে হবে, যা ডায়ালগ উইন্ডো তৈরির জন্য প্রয়োজনীয় মডিউল সরবরাহ করে।
import { MatDialogModule } from '@angular/material/dialog';
@NgModule({
imports: [
MatDialogModule
]
})
export class AppModule { }
ডায়ালগ উইন্ডো সাধারণত একটি আলাদা কম্পোনেন্টে তৈরি করা হয়। এই কম্পোনেন্টটি একটি পপআপ বা উইন্ডো হিসেবে কাজ করবে।
উদাহরণস্বরূপ, একটি ConfirmationDialogComponent কম্পোনেন্ট তৈরি করা হতে পারে।
ng generate component confirmation-dialog
confirmation-dialog.component.html ফাইলে ডায়ালগের কনটেন্ট তৈরি করুন।
<h1 mat-dialog-title>Are you sure?</h1>
<div mat-dialog-content>
<p>Do you really want to perform this action?</p>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">No</button>
<button mat-button (click)="onYesClick()">Yes</button>
</div>
এখানে, mat-dialog-title ডায়ালগের শিরোনাম, mat-dialog-content ডায়ালগের মূল কন্টেন্ট এবং mat-dialog-actions ডায়ালগে অ্যাকশন বাটন সংজ্ঞায়িত করেছে।
confirmation-dialog.component.ts ফাইলে টাইপস্ক্রিপ্ট কোড লিখে ডায়ালগ উইন্ডোর ফাংশনালিটি তৈরি করুন।
import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-confirmation-dialog',
templateUrl: './confirmation-dialog.component.html',
styleUrls: ['./confirmation-dialog.component.css']
})
export class ConfirmationDialogComponent {
constructor(public dialogRef: MatDialogRef<ConfirmationDialogComponent>) {}
onNoClick(): void {
this.dialogRef.close(); // ডায়ালগ বন্ধ করবে
}
onYesClick(): void {
// এখানে আপনার একশন প্রক্রিয়া যোগ করতে পারেন
this.dialogRef.close('Yes'); // 'Yes' এর মান প্রেরণ করবে
}
}
এখানে, MatDialogRef ব্যবহার করা হয়েছে যা ডায়ালগ বন্ধ করতে এবং ব্যবহৃত ডেটা ফেরত পাঠাতে সাহায্য করে।
ডায়ালগ উইন্ডো খোলার জন্য MatDialog সেবাটি ব্যবহার করা হয়। আপনি এটি ডায়ালগ কম্পোনেন্টে ইনজেক্ট করে ব্যবহার করতে পারবেন।
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(public dialog: MatDialog) {}
openDialog(): void {
const dialogRef = this.dialog.open(ConfirmationDialogComponent);
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed. Result: ', result);
});
}
}
এখানে, dialog.open(ConfirmationDialogComponent) ব্যবহার করে ডায়ালগ খোলা হচ্ছে এবং afterClosed() সাবস্ক্রিপশন ব্যবহৃত হচ্ছে যাতে ডায়ালগ বন্ধ হওয়ার পর ফলাফল পাওয়া যায়।
app.component.html এ ডায়ালগ খোলার জন্য একটি বাটন যোগ করুন:
<button mat-button (click)="openDialog()">Open Confirmation Dialog</button>
এটি ক্লিক করলে ডায়ালগ উইন্ডো ওপেন হবে।
ডায়ালগ উইন্ডোর সাইজ কাস্টমাইজ করতে width এবং height প্রপার্টি ব্যবহার করতে পারেন।
openDialog(): void {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
width: '400px',
height: '200px',
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed. Result: ', result);
});
}
আপনি ডায়ালগে ডাটা পাস করতে পারেন data প্রপার্টি ব্যবহার করে। উদাহরণস্বরূপ, আপনি ডায়ালগে একটি কনফার্মেশন মেসেজ পাঠাতে পারেন।
openDialog(): void {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
data: { message: 'Are you sure you want to delete this item?' }
});
dialogRef.afterClosed().subscribe(result => {
console.log('Dialog result: ', result);
});
}
এবং confirmation-dialog.component.ts ফাইলে ডাটা রিসিভ করতে:
import { Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-confirmation-dialog',
templateUrl: './confirmation-dialog.component.html',
styleUrls: ['./confirmation-dialog.component.css']
})
export class ConfirmationDialogComponent {
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
public dialogRef: MatDialogRef<ConfirmationDialogComponent>
) {}
onNoClick(): void {
this.dialogRef.close();
}
onYesClick(): void {
this.dialogRef.close('Yes');
}
}
এখানে, MAT_DIALOG_DATA সেবাটি ইনজেক্ট করা হয়েছে, যা ডায়ালগে পাঠানো ডাটা অ্যাক্সেস করতে সাহায্য করে।
Angular Material Dialog এবং Popup কম্পোনেন্টের মাধ্যমে আপনি সহজেই একটি সুন্দর এবং কার্যকর ডায়ালগ উইন্ডো তৈরি করতে পারেন। MatDialog সেবার মাধ্যমে ডায়ালগ তৈরি এবং পরিচালনা করা সহজ, এবং এটি আপনাকে Angular Material এর সাদৃশ্যপূর্ণ ডিজাইন প্রদান করে। আপনি ডায়ালগের সাইজ, ডাটা এবং অ্যাকশন কাস্টমাইজ করতে পারেন এবং ডায়ালগ উইন্ডোতে তথ্য বা কনফার্মেশন বার্তা প্রদর্শন করতে পারেন, যা ব্যবহারকারী অভিজ্ঞতা উন্নত করতে সহায়ক।
Angular Material Dialog (ডায়ালগ) একটি অত্যন্ত গুরুত্বপূর্ণ UI কম্পোনেন্ট যা পপ-আপ উইন্ডো তৈরি করতে ব্যবহৃত হয়। এটি ব্যবহারকারীদের কাছে অতিরিক্ত তথ্য, সতর্কতা, বা ব্যবহারকারীর ইনপুট গ্রহণ করতে সহায়ক। Angular Material এর MatDialog সার্ভিস ব্যবহার করে ডায়ালগ তৈরি এবং কনফিগার করা যায়। এখানে, আমরা বিস্তারিতভাবে ডায়ালগ তৈরি এবং কনফিগার করার প্রক্রিয়া আলোচনা করব।
প্রথমে, MatDialogModule মডিউলটি অ্যাঙ্গুলার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি আপনার app.module.ts ফাইলে অন্তর্ভুক্ত করতে হবে।
import { MatDialogModule } from '@angular/material/dialog';
@NgModule({
imports: [
MatDialogModule
]
})
export class AppModule { }
আপনার ডায়ালগের কন্টেন্ট হবে একটি কম্পোনেন্ট। প্রথমে একটি নতুন কম্পোনেন্ট তৈরি করুন যা ডায়ালগ হিসাবে কাজ করবে।
ng generate component dialog-example
এই কম্পোনেন্টের HTML ফাইলের মধ্যে ডায়ালগের কন্টেন্ট থাকবে:
<!-- dialog-example.component.html -->
<h1 mat-dialog-title>Dialog Title</h1>
<div mat-dialog-content>
This is the content of the dialog. You can pass dynamic data here.
</div>
<div mat-dialog-actions>
<button mat-button mat-dialog-close>Close</button>
</div>
এখানে:
mat-dialog-title: ডায়ালগের শিরোনাম।mat-dialog-content: ডায়ালগের মূল কন্টেন্ট।mat-dialog-actions: অ্যাকশন বা বাটন যা ডায়ালগের নিচে থাকে।আপনি যে কম্পোনেন্ট থেকে ডায়ালগ ওপেন করবেন, সেই কম্পোনেন্টে MatDialog সার্ভিস ব্যবহার করতে হবে।
প্রথমে, MatDialog সার্ভিস এবং ডায়ালগ কম্পোনেন্ট ইমপোর্ট করুন:
import { MatDialog } from '@angular/material/dialog';
import { DialogExampleComponent } from './dialog-example/dialog-example.component';
তারপর, যে কম্পোনেন্ট থেকে আপনি ডায়ালগ ওপেন করতে চান সেখানে MatDialog সার্ভিস ব্যবহার করুন:
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogExampleComponent } from './dialog-example/dialog-example.component';
@Component({
selector: 'app-root',
template: `<button mat-button (click)="openDialog()">Open Dialog</button>`
})
export class AppComponent {
constructor(public dialog: MatDialog) {}
openDialog() {
this.dialog.open(DialogExampleComponent);
}
}
এখানে openDialog() মেথডে DialogExampleComponent ডায়ালগ ওপেন করবে।
আপনি চাইলে ডায়ালগে ডেটা পাস করতে পারেন। open() মেথডের দ্বিতীয় আর্গুমেন্টে ডেটা পাস করা হয়।
openDialog() {
this.dialog.open(DialogExampleComponent, {
data: {
message: 'Hello from the parent component!'
}
});
}
এখন, ডায়ালগ কম্পোনেন্টে এই ডেটা গ্রহণ করতে হবে। এর জন্য MAT_DIALOG_DATA ইনজেক্ট করতে হবে:
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-dialog-example',
template: `<h1 mat-dialog-title>{{ data.message }}</h1>
<div mat-dialog-actions>
<button mat-button mat-dialog-close>Close</button>
</div>`
})
export class DialogExampleComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
}
এখানে MAT_DIALOG_DATA ডায়ালগে পাস করা ডেটা অ্যাক্সেস করার জন্য ব্যবহৃত হয়।
আপনি চাইলে ডায়ালগ থেকে কিছু ফলাফল বা ইনপুট সংগ্রহ করতে পারেন। এটি করার জন্য afterClosed() মেথড ব্যবহার করতে হয়।
openDialog() {
const dialogRef = this.dialog.open(DialogExampleComponent, {
data: { message: 'Do you agree?' }
});
dialogRef.afterClosed().subscribe(result => {
console.log('Dialog result: ', result);
});
}
এখন, dialog-example.component.ts ফাইলে ডায়ালগের ভিতরে একটি বাটনে ক্লিক করলে ফলাফল ফেরত পাঠানো হবে:
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-dialog-example',
template: `<h1 mat-dialog-title>{{ data.message }}</h1>
<div mat-dialog-actions>
<button mat-button (click)="closeDialog('Yes')">Yes</button>
<button mat-button (click)="closeDialog('No')">No</button>
</div>`
})
export class DialogExampleComponent {
constructor(
public dialogRef: MatDialogRef<DialogExampleComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {}
closeDialog(result: string) {
this.dialogRef.close(result);
}
}
এখানে, যখন ব্যবহারকারী "Yes" বা "No" বাটনে ক্লিক করবেন, তখন afterClosed() মাধ্যমে সেই মান অ্যাপ্লিকেশনের মূল কম্পোনেন্টে ফিরে আসবে।
Dialog Width, Height এবং Position কাস্টমাইজ করা
আপনি ডায়ালগের আকার এবং অবস্থান কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:
openDialog() {
const dialogRef = this.dialog.open(DialogExampleComponent, {
width: '400px',
height: '300px',
position: { top: '20px' }
});
}
Backdrop ক্লিক করে Dialog বন্ধ করা নিষেধ করা
আপনি চাইলে disableClose সেট করে ডায়ালগটি ব্যাকগ্রাউন্ড ক্লিক করে বন্ধ হতে নিষেধ করতে পারেন:
openDialog() {
const dialogRef = this.dialog.open(DialogExampleComponent, {
disableClose: true
});
}
Dialog অ্যাকশন এবং ক্লোজ কাস্টমাইজ করা
আপনি mat-dialog-actions বিভাগে আরও কাস্টম বাটন ব্যবহার করতে পারেন, যেমন "Confirm", "Cancel" ইত্যাদি:
<div mat-dialog-actions>
<button mat-button mat-dialog-close>Cancel</button>
<button mat-button (click)="confirm()">Confirm</button>
</div>
Angular Material এর MatDialog কম্পোনেন্ট ব্যবহার করে পপ-আপ উইন্ডো তৈরি এবং কনফিগার করা সহজ এবং কার্যকর। এটি ব্যবহারকারীদের সাথে ইন্টারঅ্যাকশন করতে, অতিরিক্ত তথ্য প্রদর্শন করতে বা ইনপুট সংগ্রহ করতে সাহায্য করে। আপনি MatDialog সার্ভিস ব্যবহার করে ডায়ালগ ওপেন করতে পারেন এবং MAT_DIALOG_DATA এর মাধ্যমে ডেটা পাস ও গ্রহণ করতে পারেন। থিমিং, আকার এবং পজিশন কাস্টমাইজ করে আরও উন্নত পপ-আপ উইন্ডো তৈরি করা সম্ভব।
Angular Material Dialog কম্পোনেন্ট ব্যবহার করে আপনি পপ-আপ ডায়ালগ তৈরি করতে পারেন যা অ্যাপ্লিকেশনে ইন্টারঅ্যাকটিভ এবং তথ্য প্রদর্শন করতে সহায়তা করে। ডায়ালগে ডাটা পাস করা একটি সাধারণ কিন্তু গুরুত্বপূর্ণ কাজ, যেখানে আপনি ডায়ালগ উইন্ডোতে কিছু ডাটা পাঠাতে পারেন এবং সেটি ডায়ালগের ভেতর ব্যবহার করতে পারেন।
প্রথমে, আপনাকে একটি ডায়ালগ কম্পোনেন্ট তৈরি করতে হবে। এখানে একটি 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() মেথডের মাধ্যমে ডায়ালগ থেকে ফলাফল গ্রহণ করা যায়। এই প্রক্রিয়া অ্যাপ্লিকেশনের মধ্যে ইন্টারঅ্যাকটিভ ডায়ালগ তৈরি করতে সহায়ক এবং খুবই কার্যকরী।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
