Angular Material এর MatSnackbar কম্পোনেন্ট একটি সাধারণ বার্তা দেখানোর জন্য ব্যবহৃত হয়, যা স্বয়ংক্রিয়ভাবে কিছু সময়ের জন্য স্ক্রীনে প্রদর্শিত হয় এবং তারপর অদৃশ্য হয়ে যায়। এটি ব্যবহারকারীকে একটি সফল অপারেশন, ত্রুটি, বা অন্য কোন মেসেজ জানাতে সহায়ক। Snackbar সাধারণত অ্যাপ্লিকেশনের নীচে বা স্ক্রীনের নিচের দিকে প্রদর্শিত হয় এবং এটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করে।

MatSnackbar ব্যবহার করা

১. MatSnackbar মডিউল ইমপোর্ট করা

Snackbar কম্পোনেন্ট ব্যবহার করার জন্য MatSnackBarModule আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে করা হয়।

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

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

২. Snackbar সেবা ব্যবহার করা

Snackbar একটি সেবা (service) হিসেবে কাজ করে, তাই এটি ব্যবহার করতে হলে আপনাকে MatSnackBar সেবা ইঞ্জেক্ট করতে হবে এবং open() মেথড ব্যবহার করতে হবে।

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

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

  openSnackbar() {
    this.snackBar.open('This is a snackbar message', 'Close', {
      duration: 3000,
    });
  }
}

এখানে:

• open() মেথডে প্রথম প্যারামিটার হিসেবে প্রদর্শিত মেসেজ, দ্বিতীয় প্যারামিটার হিসেবে অ্যাকশন (যেমন "Close") এবং তৃতীয় প্যারামিটার হিসেবে কনফিগারেশন অপশন (যেমন duration) দেওয়া হয়েছে।

৩. HTML এ Snackbar কল করা

Snackbar ফাংশনটি টেমপ্লেটে কল করতে হবে, সাধারণত একটি বাটনের ক্লিকে।

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

এখানে, যখন আপনি "Show Snackbar" বাটনে ক্লিক করবেন, তখন Snackbar একটি মেসেজ দেখাবে।

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

১. পজিশন কাস্টমাইজেশন

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

this.snackBar.open('This is a snackbar message', 'Close', {
  duration: 3000,
  horizontalPosition: 'center',  // 'start', 'center', 'end'
  verticalPosition: 'top'         // 'top', 'bottom'
});

এখানে:

• horizontalPosition: এটি "start", "center", অথবা "end" হতে পারে।
• verticalPosition: এটি "top" বা "bottom" হতে পারে।

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

Snackbar এ অ্যাকশন বাটন যুক্ত করা যায়, যেমন "Retry" বা "Undo"। এটি একটি ইন্টারঅ্যাক্টিভ বাটন প্রদান করে, যা ব্যবহারকারীকে আরও একটি অপশন দেয়।

this.snackBar.open('Action successful', 'Undo', {
  duration: 3000,
}).onAction().subscribe(() => {
  console.log('Undo clicked');
});

এখানে:

• onAction() মেথড ব্যবহার করে আপনি অ্যাকশন বাটনে ক্লিক করার ইভেন্ট হ্যান্ডেল করতে পারেন।

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

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

::ng-deep .mat-snack-bar-container {
  background-color: #4caf50;  /* Green background */
  color: white;               /* White text */
}

এখানে, ::ng-deep সিলেক্টর ব্যবহার করা হয়েছে, যা Angular এর অ্যাকর্ডিয়ান স্টাইলিং স্কোপিং সিস্টেমে snackbar এর কাস্টম স্টাইলস প্রয়োগ করতে সাহায্য করে।

৪. Snackbar এর ডিউরেশন কাস্টমাইজেশন

Snackbar এর মেসেজ প্রদর্শিত থাকার সময়কাল duration অপশন দিয়ে কাস্টমাইজ করা যেতে পারে।

this.snackBar.open('This is a snackbar message', 'Close', {
  duration: 5000  // Snackbar will stay for 5 seconds
});

যদি আপনি duration না দেন, তবে snackbar স্বয়ংক্রিয়ভাবে কিছু সময় পর বন্ধ হয়ে যাবে।

Snackbar এর মাধ্যমে কাস্টম কন্টেন্ট

Snackbar এর মধ্যে কাস্টম কন্টেন্ট যেমন HTML ট্যাগ বা অন্যান্য উপাদানও যুক্ত করা যায়। তবে মনে রাখতে হবে, Snackbar সাধারণত টেক্সট বা সিম্পল কন্টেন্টের জন্য ব্যবহৃত হয়, HTML কন্টেন্ট ব্যবহার করার ক্ষেত্রে সতর্ক থাকা উচিত।

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

এখানে CustomSnackbarComponent একটি কাস্টম কম্পোনেন্ট যা Snackbar হিসেবে প্রদর্শিত হবে।

MatSnackbar একটি সহজ, শক্তিশালী এবং কাস্টমাইজযোগ্য উপায় ব্যবহারকারীদের বিভিন্ন মেসেজ বা স্টেটাস জানাতে। Angular Material এর Snackbar কম্পোনেন্ট আপনার অ্যাপ্লিকেশনে একটি সুদৃশ্য এবং কার্যকরী মেসেজ প্রদর্শন পদ্ধতি সরবরাহ করে। আপনি Snackbar এর পজিশন, অ্যাকশন বাটন, ডিউরেশন এবং কাস্টম স্টাইলিং কাস্টমাইজ করে এটি আপনার অ্যাপ্লিকেশনের প্রয়োজন অনুযায়ী সম্পূর্ণরূপে উপযোগী করে তুলতে পারেন।

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 তৈরি করতে পারেন।

Angular Material এর MatSnackbar কম্পোনেন্টটি ব্যবহারকারীদের ইন্টারঅ্যাকশন বা তথ্য প্রদর্শনের জন্য একটি স্ন্যাকবার বার (Snackbar bar) প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত একটি ছোট বার যা অ্যাপ্লিকেশনের নিচের অংশে প্রদর্শিত হয় এবং একটি নির্দিষ্ট সময়ের জন্য দৃশ্যমান থাকে।

Snackbar এর দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য রয়েছে:

1. স্থায়ীত্ব (Duration): কত সময়ের জন্য snackbar বারটি প্রদর্শিত থাকবে।
2. পজিশন (Position): snackbar বারটির অবস্থান কেমন হবে (যেমন, স্ক্রীনের উপর, নিচে, মাঝখানে, ডান, বামে ইত্যাদি)।

Angular Material এর MatSnackbar কম্পোনেন্টের মাধ্যমে আপনি এই দুটি বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।

১. MatSnackbar কনফিগারেশন সেটআপ

প্রথমে আপনাকে MatSnackBar ব্যবহার করার জন্য এটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।

app.module.ts ফাইলে MatSnackBarModule ইমপোর্ট করা

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

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

এখন আপনি MatSnackBar কম্পোনেন্ট ব্যবহার করতে পারবেন।

২. Snackbar স্থায়ীত্ব কাস্টমাইজ করা

Snackbar এর স্থায়ীত্ব কাস্টমাইজ করতে হলে, MatSnackBar এর open() মেথডের মধ্যে duration প্যারামিটারটি নির্ধারণ করতে হবে। duration প্যারামিটারটির মান মিলিসেকেন্ডে প্রদান করা হয় (যেমন, ২০০০ মিলিসেকেন্ড = ২ সেকেন্ড)।

উদাহরণ:

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('This is a snackbar message!', 'Close', {
      duration: 3000  // Snackbar 3 সেকেন্ডের জন্য দৃশ্যমান থাকবে
    });
  }
}

এখানে:

• duration: এটি নির্ধারণ করে যে snackbar কত সময়ের জন্য প্রদর্শিত হবে। এই উদাহরণে, snackbar বারটি ৩ সেকেন্ড (৩০০০ মিলিসেকেন্ড) দেখানো হবে।

৩. Snackbar পজিশন কাস্টমাইজ করা

Snackbar এর পজিশন পরিবর্তন করতে, MatSnackBar এর open() মেথডে horizontalPosition এবং verticalPosition প্যারামিটার ব্যবহার করা হয়। এই প্যারামিটারগুলি snackbar বারটির অনুভূমিক এবং উল্লম্ব অবস্থান কাস্টমাইজ করতে সহায়ক।

পজিশন কাস্টমাইজ করার জন্য বিকল্প প্যারামিটারগুলি:

• horizontalPosition: এটি snackbar এর অনুভূমিক অবস্থান নির্ধারণ করে (বাম বা ডান)।
  • start: বাম পাশে
  • center: স্ক্রীনের মাঝখানে
  • end: ডান পাশে
• verticalPosition: এটি snackbar এর উল্লম্ব অবস্থান নির্ধারণ করে (উপর বা নিচে)।
  • top: স্ক্রীনের উপরের দিকে
  • bottom: স্ক্রীনের নিচে

উদাহরণ:

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('Snackbar with custom position!', 'Close', {
      duration: 3000,
      horizontalPosition: 'center',  // স্ক্রীনের মাঝখানে
      verticalPosition: 'top'        // স্ক্রীনের উপরের দিকে
    });
  }
}

এখানে:

• horizontalPosition: 'center' সেট করার মাধ্যমে snackbar স্ক্রীনের মাঝখানে থাকবে।
• verticalPosition: 'top' সেট করার মাধ্যমে snackbar স্ক্রীনের উপরের দিকে থাকবে।

৪. Snackbar কাস্টম স্টাইলিং এবং অ্যাকশন বাটন

Snackbar এর মধ্যে আপনি কাস্টম স্টাইলিংও যোগ করতে পারেন। এছাড়া, snackbar বারটির সাথে একটি অ্যাকশন বাটন (যেমন Close) যোগ করতে পারবেন। এই বাটনে ক্লিক করলে snackbar বন্ধ হয়ে যাবে।

উদাহরণ:

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('Snackbar with action button', 'Undo', {
      duration: 3000,
      horizontalPosition: 'end',
      verticalPosition: 'bottom'
    }).onAction().subscribe(() => {
      console.log('Undo action clicked!');
    });
  }
}

এখানে:

• onAction(): এটি একটি ইভেন্ট হ্যান্ডলার, যা 'Undo' বাটনে ক্লিক করা হলে ট্রিগার হবে।
• 'Undo': snackbar বারটির সাথে একটি অ্যাকশন বাটন যোগ করা হয়েছে, যা ব্যবহারকারীর কাছে প্রাপ্ত হবে।

৫. স্টাইলিং কাস্টমাইজেশন

Snackbar এর স্টাইল কাস্টমাইজ করতে আপনি CSS ব্যবহার করতে পারেন। যেমন, আপনি snackbar এর ব্যাকগ্রাউন্ড রং বা ফন্ট স্টাইল পরিবর্তন করতে পারেন।

.mat-snack-bar-container {
  background-color: #4caf50;  /* সবুজ ব্যাকগ্রাউন্ড */
  color: white;               /* সাদা টেক্সট */
}

এটি mat-snack-bar-container ক্লাসকে টার্গেট করে, যা snackbar এর কন্টেইনারের স্টাইল নির্ধারণ করে।

Angular Material Snackbar কম্পোনেন্টের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনে ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব বার তৈরি করতে পারেন। duration প্যারামিটার ব্যবহার করে snackbar এর স্থায়ীত্ব কাস্টমাইজ করা যায় এবং horizontalPosition এবং verticalPosition প্যারামিটার ব্যবহার করে snackbar এর পজিশন নির্ধারণ করা যায়। এই দুটি বৈশিষ্ট্য আপনার অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও কার্যকর এবং উন্নত করতে সাহায্য করবে।