Angular Material এর MatSlideToggle কম্পোনেন্টটি একটি স্লাইড টগল সুইচ তৈরি করার জন্য ব্যবহৃত হয়, যা সাধারণত দুটি অবস্থা (যেমন, চালু বা বন্ধ, সক্ষম বা অক্ষম) সুইচ করার জন্য ব্যবহৃত হয়। এটি একটি খুব সাধারণ ইউআই উপাদান যা ব্যবহারকারীকে একটি অপশন সক্রিয় বা নিষ্ক্রিয় করতে সক্ষম করে, সাধারণত বাইনারি সিদ্ধান্ত (যেমন: Yes/No, On/Off) নিতে।

এটি সহজেই ব্যবহারযোগ্য এবং স্টাইলিশ, এবং আপনি Angular Material এর সাহায্যে দ্রুত স্লাইড টগল তৈরি করতে পারবেন।

MatSlideToggle ব্যবহার করা

১. Angular Material ইন্সটল করা

প্রথমে, আপনার Angular অ্যাপ্লিকেশনে Angular Material ইন্সটল করতে হবে। এটি যদি আগে থেকেই ইন্সটল না করা থাকে, তবে নিচের কমান্ডটি ব্যবহার করে ইন্সটল করুন:

npm install @angular/material

২. MatSlideToggleModule ইমপোর্ট করা

এখন আপনাকে MatSlideToggleModule ইমপোর্ট করতে হবে আপনার app.module.ts ফাইলে:

import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  imports: [
    MatSlideToggleModule,
    MatFormFieldModule
  ]
})
export class AppModule {}

৩. HTML কোডে MatSlideToggle ব্যবহার করা

এখন আপনি mat-slide-toggle ট্যাগ ব্যবহার করে স্লাইড টগল সুইচ তৈরি করতে পারেন।

<mat-slide-toggle>Enable Feature</mat-slide-toggle>

এটি একটি সাধারণ টগল সুইচ তৈরি করবে, যেটি "Enable Feature" নামে লেবেল থাকবে। ব্যবহারকারী এটি টগল করতে পারবেন।

MatSlideToggle কাস্টমাইজেশন

১. ডিফল্ট অবস্থান এবং ভ্যালু

আপনি checked অ্যাট্রিবিউট ব্যবহার করে টগল সুইচের ডিফল্ট অবস্থান সেট করতে পারেন (যেমন, সুইচটি চালু বা বন্ধ):

<mat-slide-toggle [checked]="isChecked">Enable Feature</mat-slide-toggle>

এখন, আপনি isChecked ভ্যারিয়েবলটি true বা false দিয়ে নিয়ন্ত্রণ করতে পারেন।

export class AppComponent {
  isChecked = true;  // সুইচটি ডিফল্টভাবে চালু থাকবে
}

২. ব্যবহারকারীর অ্যাকশন ট্র্যাক করা

আপনি (change) ইভেন্ট লিসেনার ব্যবহার করে স্লাইড টগল সুইচের অবস্থান পরিবর্তন ট্র্যাক করতে পারেন:

<mat-slide-toggle [(ngModel)]="isChecked" (change)="onToggleChange($event)">
  Enable Feature
</mat-slide-toggle>

export class AppComponent {
  isChecked = false;

  onToggleChange(event: any) {
    console.log('Toggle Changed:', event.checked);
  }
}

এখানে, (change) ইভেন্ট ব্যবহার করে আপনি টগল সুইচের অবস্থা পরিবর্তনের সময় event.checked দ্বারা নতুন অবস্থা (true/false) পাচ্ছেন।

৩. MatSlideToggle এর লেবেল কাস্টমাইজ করা

mat-slide-toggle এর মধ্যে আপনি কাস্টম লেবেল ব্যবহার করতে পারেন, যেমন "On" এবং "Off" বা অন্য যেকোনো টেক্সট:

<mat-slide-toggle [checked]="isChecked">
  {{ isChecked ? 'On' : 'Off' }}
</mat-slide-toggle>

এটি টগল সুইচের অবস্থান অনুযায়ী "On" বা "Off" টেক্সট প্রদর্শন করবে।

৪. ডিসেবল করা

আপনি [disabled] অ্যাট্রিবিউট ব্যবহার করে স্লাইড টগলকে অক্ষম (disabled) করতে পারেন:

<mat-slide-toggle [disabled]="isDisabled">Enable Feature</mat-slide-toggle>

export class AppComponent {
  isDisabled = true;  // টগল সুইচটি ডিফল্টভাবে নিষ্ক্রিয় থাকবে
}

এখানে isDisabled ভ্যারিয়েবলটি true হলে টগল সুইচটি অক্ষম হয়ে যাবে।

Styling MatSlideToggle

MatSlideToggle এর স্টাইল কাস্টমাইজ করতে Angular Material এর mat-slide-toggle ক্লাসের মাধ্যমে আপনি CSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি টগল সুইচের রঙ পরিবর্তন করতে পারেন:

mat-slide-toggle {
  color: #FF5722;  /* টগল সুইচের রঙ পরিবর্তন */
}

এছাড়া, আপনি mat-slide-toggle এর থিম এবং আউটপুট রঙ কাস্টমাইজ করতে পারেন এবং mat-toggle এর অবস্থান অনুযায়ী অ্যানিমেশন যোগ করতে পারেন।

Angular Material এর MatSlideToggle একটি অত্যন্ত শক্তিশালী এবং কাস্টমাইজযোগ্য কম্পোনেন্ট, যা ব্যবহারকারীদের বিভিন্ন অপশন সুইচ করার জন্য সহজ এবং আকর্ষণীয় উপায় প্রদান করে। এটি বিভিন্ন ধরনের পরিস্থিতিতে, যেমন ফিচার একটিভেশন বা ডিসএ্যাকটিভেশন, সিস্টেম সেটিংস কন্ট্রোল ইত্যাদিতে কার্যকরভাবে ব্যবহার করা যায়। ngModel, (change), এবং অন্যান্য অ্যাট্রিবিউটের মাধ্যমে আপনি ব্যবহারকারীর অ্যাকশন ট্র্যাক করতে পারেন এবং অ্যাপ্লিকেশনের মধ্যে ডাইনামিক ফিচার পরিবর্তন করতে পারেন।