Angular Material এর Snackbar কম্পোনেন্ট একটি সহজ এবং কার্যকর উপাদান যা অ্যাপ্লিকেশনের ব্যবহারকারীদেরকে ছোট নোটিফিকেশন, বার্তা বা সতর্কীকরণ দেখানোর জন্য ব্যবহৃত হয়। এটি সাধারণত অল্প সময়ের জন্য প্রদর্শিত হয় এবং কোনো অ্যাকশন (যেমন, ক্লিক বা টাইমআউট) এর মাধ্যমে অদৃশ্য হয়ে যায়। Snackbar মূলত একটি ফ্লোটিং বার, যা পৃষ্ঠার নিচের দিকে প্রদর্শিত হয়।

এটি MatSnackBar কম্পোনেন্ট ব্যবহার করে তৈরি করা যায় এবং ব্যবহারকারীর জন্য গুরুত্বপূর্ণ বার্তা প্রদর্শন করতে সাহায্য করে।

১. Snackbar ব্যবহার করার জন্য প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে আপনাকে MatSnackBarModule মডিউলটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।

import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    MatSnackBarModule,
    MatButtonModule
  ]
})
export class AppModule {}

২. Snackbar কম্পোনেন্ট ব্যবহার করা

এখন, আপনি MatSnackBar কম্পোনেন্ট ব্যবহার করে একটি নোটিফিকেশন তৈরি করতে পারবেন। এর মাধ্যমে আপনি একটি বার্তা প্রদর্শন করতে পারেন যা কিছু সেকেন্ডের জন্য স্ক্রিনে থাকবে এবং তারপর নিজে থেকেই অদৃশ্য হয়ে যাবে।

২.১. Snackbar তৈরি করা (Basic Usage)

import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

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

  openSnackBar() {
    this.snackBar.open('Hello, this is a snackbar notification!', 'Close', {
      duration: 3000, // Snackbar will automatically close after 3 seconds
    });
  }
}

এখানে, openSnackBar() মেথডটি ব্যবহার করে একটি Snackbar নোটিফিকেশন তৈরি করা হয়েছে, যেখানে:

• Message: 'Hello, this is a snackbar notification!'
• Action: 'Close' (ব্যবহারকারী ক্লিক করলে নোটিফিকেশন বন্ধ হবে)
• Duration: 3000 (থেকে এটি 3 সেকেন্ডের জন্য স্ক্রিনে থাকবে)

২.২. HTML ফাইলে Snackbar Trigger Button

এখন, HTML ফাইলে একটি বাটন যোগ করা যেতে পারে যা Snackbar ট্রিগার করবে।

<button mat-button (click)="openSnackBar()">Show Snackbar</button>

এটি একটি বাটন যা ব্যবহারকারী ক্লিক করলে Snackbar নোটিফিকেশনটি দেখাবে।

৩. Snackbar এর কাস্টমাইজেশন

Snackbar এর ডিজাইন এবং আচরণ কাস্টমাইজ করার জন্য আপনি বিভিন্ন অপশন ব্যবহার করতে পারেন।

৩.১. Snackbar এর স্টাইল কাস্টমাইজ করা

আপনি Snackbar এর স্টাইল পরিবর্তন করতে CSS বা SCSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি snackbar এর ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে পারেন।

.mat-snack-bar-container {
  background-color: #2196f3; /* Blue background */
  color: white; /* White text */
}

৩.২. Snackbar এ মেসেজ ও অ্যাকশন কাস্টমাইজ করা

Snackbar এ বিভিন্ন অ্যাকশন যোগ করা যেতে পারে। নিচে একটি উদাহরণ দেওয়া হলো যেখানে Snackbar এ দুটি অ্যাকশন রয়েছে: 'Undo' এবং 'Close'।

openSnackBar() {
  let snackBarRef = this.snackBar.open('Item deleted!', 'Undo', {
    duration: 5000
  });

  snackBarRef.onAction().subscribe(() => {
    console.log('Undo action triggered');
    // You can add your undo logic here
  });
}

এখানে:

• Action: 'Undo' ব্যবহারকারী ক্লিক করলে নির্দিষ্ট অ্যাকশন কার্যকর হবে।
• Duration: Snackbar 5 সেকেন্ডের জন্য থাকবে এবং তারপর নিজে থেকেই বন্ধ হয়ে যাবে।
• onAction(): যখন অ্যাকশন (যেমন 'Undo') ক্লিক করা হবে, তখন এই ইভেন্টটি ট্রিগার হবে।

৩.৩. Snackbar এর Position কাস্টমাইজ করা

Snackbar এর অবস্থান কাস্টমাইজ করতে horizontalPosition এবং verticalPosition অপশন ব্যবহার করা যায়।

openSnackBar() {
  this.snackBar.open('This is a custom positioned snackbar!', 'Close', {
    duration: 3000,
    horizontalPosition: 'center',
    verticalPosition: 'top',
  });
}

এখানে:

• horizontalPosition: Snackbar এর অনুভূমিক অবস্থান (যেমন, 'left', 'center', 'right')
• verticalPosition: Snackbar এর উল্লম্ব অবস্থান (যেমন, 'top', 'bottom')

৪. Snackbar এর কাস্টম কম্পোনেন্ট

Snackbar ব্যবহার করে আপনি কাস্টম কম্পোনেন্টও প্রদর্শন করতে পারেন। আপনি একটি Angular কম্পোনেন্ট তৈরি করতে পারেন এবং সেটিকে Snackbar হিসেবে ব্যবহার করতে পারেন।

৪.১. কাস্টম কম্পোনেন্ট তৈরি করা

import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-snackbar',
  template: '<span>Custom Snackbar Content</span>',
})
export class CustomSnackbarComponent {}

৪.২. Snackbar এ কাস্টম কম্পোনেন্ট ব্যবহার করা

import { MatSnackBar } from '@angular/material/snack-bar';
import { Component } from '@angular/core';
import { CustomSnackbarComponent } from './custom-snackbar.component';

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

  openCustomSnackBar() {
    this.snackBar.openFromComponent(CustomSnackbarComponent, {
      duration: 3000,
    });
  }
}

এখানে openFromComponent() মেথডটি ব্যবহার করে কাস্টম কম্পোনেন্ট CustomSnackbarComponent কে Snackbar হিসেবে প্রদর্শন করা হচ্ছে।

Angular Material Snackbar একটি শক্তিশালী এবং ব্যবহারকারী-বান্ধব উপাদান যা অ্যাপ্লিকেশনের জন্য দ্রুত এবং সুন্দর নোটিফিকেশন বার্তা প্রদর্শন করতে সাহায্য করে। এটি সহজে কাস্টমাইজযোগ্য এবং ব্যবহারকারীর অ্যাকশনের উপর ভিত্তি করে ইন্টারেকশন সাপোর্ট করে, যেমন Undo, Close, এবং Duration। এছাড়াও, আপনি কাস্টম কম্পোনেন্ট ব্যবহার করে আরো ইন্টারঅ্যাকটিভ এবং কাস্টমাইজড Snackbar তৈরি করতে পারেন।