বেসিক চেকবক্স ব্যবহার

Web Development - অ্যাঙ্গুলার ম্যাটেরিয়াল (Angular Material) - Angular Material কম্পোনেন্টস (বেসিক) |

Angular Material এর মাধ্যমে আপনি সহজে সুন্দর এবং কাস্টমাইজযোগ্য UI কম্পোনেন্ট তৈরি করতে পারেন। এর মধ্যে একটি জনপ্রিয় কম্পোনেন্ট হলো চেকবক্স (Checkbox)। Angular Material এর MatCheckbox কম্পোনেন্ট ব্যবহার করে আপনি চেকবক্স তৈরি করতে পারেন যা দেখতে আধুনিক এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

বেসিক চেকবক্স ব্যবহার

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

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

ng add @angular/material

এটি Angular Material, Angular CDK, এবং Angular Animations ইন্সটল করবে।

২. প্রয়োজনীয় মডিউল ইমপোর্ট করা

চেকবক্স ব্যবহারের জন্য MatCheckboxModule ইমপোর্ট করতে হবে। app.module.ts ফাইলে এটি ইমপোর্ট করুন:

import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
  declarations: [AppComponent],
  imports: [
    MatCheckboxModule,  // MatCheckboxModule ইমপোর্ট করা হয়েছে
    // অন্যান্য মডিউলস
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

৩. HTML ফাইলে বেসিক চেকবক্স তৈরি

এখন আপনি MatCheckbox কম্পোনেন্ট ব্যবহার করে চেকবক্স তৈরি করতে পারেন। নিচে একটি বেসিক চেকবক্সের উদাহরণ দেওয়া হলো:

<mat-checkbox>Accept Terms and Conditions</mat-checkbox>

এটি একটি বেসিক চেকবক্স তৈরি করবে, যেখানে ব্যবহারকারী চেকবক্সে টিক মার্ক দিতে পারবেন।

৪. চেকবক্সের মান (Checked Value) গ্রহণ করা

চেকবক্সের মান (যদি চেকবক্সটি চেক করা হয় বা না হয়) সংগ্রহ করতে আপনি ngModel ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:

<mat-checkbox [(ngModel)]="isChecked">Accept Terms and Conditions</mat-checkbox>

এখানে, isChecked একটি বুলিয়ান ভেরিয়েবল, যা চেকবক্সটি চেক বা আনচেক হলে আপডেট হবে। এটি টাইপ করা ভেরিয়েবলটির মানের উপর নির্ভর করবে।

export class AppComponent {
  isChecked = false;  // ডিফল্টভাবে চেকবক্সটি আনচেক করা
}

৫. চেকবক্সের স্টাইলিং কাস্টমাইজ করা

Angular Material এর মাধ্যমে আপনি চেকবক্সের স্টাইলও কাস্টমাইজ করতে পারেন। যেমন আপনি চেকবক্সের রঙ পরিবর্তন করতে পারেন:

<mat-checkbox color="primary">Accept Terms and Conditions</mat-checkbox>
<mat-checkbox color="accent">Receive Newsletter</mat-checkbox>
<mat-checkbox color="warn">Delete Account</mat-checkbox>

এখানে primary, accent, এবং warn রঙ ব্যবহার করা হয়েছে। Angular Material এর রঙ থিমের মাধ্যমে আপনি এই রঙ পরিবর্তন করতে পারেন।

৬. চেকবক্সের ডিসেবল স্টেট

আপনি চেকবক্সকে ডিসেবল (অচল) করতে চাইলে, disabled অ্যাট্রিবিউট ব্যবহার করতে পারেন:

<mat-checkbox disabled>Disabled Checkbox</mat-checkbox>

এটি চেকবক্সটি ডিসেবল করে দিবে, এবং ব্যবহারকারী এটি চেক বা আনচেক করতে পারবেন না।

Angular Material এর MatCheckbox কম্পোনেন্ট খুবই সহজে ব্যবহারযোগ্য এবং এটি অ্যাপ্লিকেশনে আধুনিক, সুন্দর এবং কার্যকরী চেকবক্স তৈরি করতে সহায়ক। আপনি এই কম্পোনেন্টের মাধ্যমে বিভিন্ন কাস্টমাইজেশন যেমন স্টাইল, রঙ, ডেটা বাইন্ডিং, এবং ডিসেবল স্টেট ইত্যাদি করতে পারেন। Angular Material আপনাকে সঠিকভাবে স্টাইল করা এবং ফাংশনাল চেকবক্স তৈরির জন্য প্রয়োজনীয় সমস্ত বৈশিষ্ট্য প্রদান করে।

Mark as Completed

Content added By

Md Azizur Rahman

বেসিক চেকবক্স ব্যবহার

বেসিক চেকবক্স ব্যবহার