Angular Material এক্সপ্যানশন প্যানেল

Web Development - অ্যাঙ্গুলার ম্যাটেরিয়াল (Angular Material) -

Angular Material এর MatExpansionPanel কম্পোনেন্টটি একটি ইন্টারেকটিভ এবং কাস্টমাইজযোগ্য উপাদান, যা একাধিক সেকশন বা প্যানেল থাকা অবস্থায় শুধুমাত্র একটি প্যানেল প্রদর্শিত রাখে, অন্যগুলো লুকানো থাকে। এটি সাধারণত FAQ (Frequently Asked Questions), অ্যাকর্ডিয়ন স্টাইলের মেনু, বা অন্যান্য সেকশন ভিত্তিক কন্টেন্ট প্রদর্শনে ব্যবহৃত হয়।

এটি ডায়নামিক ভাবে প্যানেল খুলতে এবং বন্ধ করতে সক্ষম এবং ব্যবহারকারীর জন্য একটি পরিষ্কার এবং সজ্জিত লেআউট তৈরি করে।

এক্সপ্যানশন প্যানেল তৈরি করার পদক্ষেপ

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

MatExpansionModule ব্যবহার করতে আপনাকে এটি আপনার অ্যাপ্লিকেশনের app.module.ts ফাইলে ইমপোর্ট করতে হবে:

import { MatExpansionModule } from '@angular/material/expansion';

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

২. HTML টেমপ্লেটে এক্সপ্যানশন প্যানেল ব্যবহার করা

এখন, HTML টেমপ্লেটে MatExpansionPanel কম্পোনেন্ট ব্যবহার করা যেতে পারে। এক্সপ্যানশন প্যানেল সাধারণত একটি <mat-expansion-panel> ট্যাগের মধ্যে থাকে এবং এতে বিভিন্ন সেকশন থাকে।

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 1
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>Content for panel 1.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 2
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>Content for panel 2.</p>
  </mat-expansion-panel>
</mat-accordion>

<mat-expansion-panel>: এক্সপ্যানশন প্যানেল তৈরি করার জন্য ব্যবহৃত উপাদান।
<mat-expansion-panel-header>: এক্সপ্যানেলটির শিরোনাম, যা ক্লিকযোগ্য হয়ে প্যানেলটিকে খুলবে বা বন্ধ করবে।
<mat-panel-title>: প্যানেলটির শিরোনাম টেক্সট।

এখানে দুটি এক্সপ্যানশন প্যানেল আছে এবং প্রত্যেকটি পৃথক কনটেন্ট ধারণ করে।

৩. এক্সপ্যানশন প্যানেলের ভিজ্যুয়াল কাস্টমাইজেশন

আপনি এক্সপ্যানশন প্যানেলের ভিতরে কনটেন্টের স্টাইল এবং প্যানেল কনটেন্টের ব্যাকগ্রাউন্ড পরিবর্তন করতে CSS ব্যবহার করতে পারেন:

mat-expansion-panel {
  background-color: #f5f5f5;
}

mat-expansion-panel-header {
  background-color: #00796b;
  color: white;
}

mat-panel-title {
  font-size: 18px;
}

এটি প্যানেলটির শিরোনাম এবং কনটেন্টের ব্যাকগ্রাউন্ড রঙ এবং টেক্সট স্টাইল কাস্টমাইজ করবে।

এক্সপ্যানশন প্যানেল ক্লোজ করা বা ওপেন করা

Angular Material এর MatExpansionPanel আপনাকে প্রোগ্রামেটিকালি প্যানেল ওপেন বা ক্লোজ করার সুযোগ দেয়। এর জন্য আপনি [expanded] প্রপার্টি ব্যবহার করতে পারেন, যা প্যানেলটি যদি খোলা থাকে তখন true থাকবে এবং যদি বন্ধ থাকে তাহলে false থাকবে।

<mat-expansion-panel [expanded]="isPanelExpanded">
  <mat-expansion-panel-header>
    <mat-panel-title>
      Expandable Panel
    </mat-panel-title>
  </mat-expansion-panel-header>
  <p>Panel Content</p>
</mat-expansion-panel>

TypeScript কোড:

export class AppComponent {
  isPanelExpanded = true;  // প্যানেলটি ডিফল্টভাবে ওপেন থাকবে

  togglePanel() {
    this.isPanelExpanded = !this.isPanelExpanded;  // প্যানেলটি খুলতে বা বন্ধ করতে
  }
}

এখানে isPanelExpanded একটি ভেরিয়েবল যেটি প্যানেলের এক্সপান্ডেড (খোলা) অবস্থান নির্ধারণ করে। আপনি এটি টগল করতে পারবেন togglePanel() ফাংশনের মাধ্যমে।

এক্সপ্যানশন প্যানেলের অন্যান্য কাস্টমাইজেশন

১. একাধিক প্যানেল একসাথে খুলে রাখা

ডিফল্টভাবে mat-accordion এর মধ্যে থাকা প্যানেলগুলির মধ্যে একাধিক প্যানেল একসাথে খোলা থাকতে পারে। তবে, আপনি যদি চান যে একটি সময় কেবল একটিই প্যানেল খোলা থাকে, তাহলে multi="false" প্রপার্টি যোগ করতে পারেন।

<mat-accordion multi="false">
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 1
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>Content for panel 1.</p>
  </mat-expansion-panel>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 2
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>Content for panel 2.</p>
  </mat-expansion-panel>
</mat-accordion>

এতে শুধুমাত্র একটি প্যানেল খুলে থাকবে, বাকি প্যানেলগুলি বন্ধ থাকবে।

২. এক্সপ্যানশন প্যানেল আইকন সহ

আপনি এক্সপ্যানশন প্যানেলে আইকনও যুক্ত করতে পারেন, যেমন প্যানেল খোলার আগে বা পরে একটি আইকন প্রদর্শন করা।

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>
      Panel with Icon
    </mat-panel-title>
    <mat-icon>expand_more</mat-icon>
  </mat-expansion-panel-header>
  <p>Content with icon</p>
</mat-expansion-panel>

এখানে <mat-icon> ব্যবহার করে একটি আইকন যোগ করা হয়েছে, যা প্যানেল খোলার আগে প্রদর্শিত হবে।

Angular Material Expansion Panel একটি শক্তিশালী এবং কাস্টমাইজযোগ্য কম্পোনেন্ট যা সহজেই ডায়নামিক কনটেন্ট শো/হাইড করতে ব্যবহৃত হয়। এটি FAQ, মেনু সেকশন, বা অন্যান্য কনটেন্ট প্রদর্শনের জন্য উপযুক্ত। আপনি এক্সপ্যান্ড করা প্যানেল কন্ট্রোল, আইকন কাস্টমাইজেশন, স্টাইলিং, এবং ডায়নামিক কন্টেন্ট ব্যবস্থাপনা সহ বিভিন্ন ফিচার ব্যবহার করে প্যানেল কাস্টমাইজ করতে পারেন।

Content added By

Md Azizur Rahman

কোলাপসিবল প্যানেল তৈরি করা

Angular Material এর Accordion কম্পোনেন্ট ব্যবহার করে আপনি কোলাপসিবল প্যানেল তৈরি করতে পারেন, যা ব্যবহারকারীদের জন্য একাধিক প্যানেল একসাথে দেখানোর এবং তাদের চাহিদা অনুযায়ী কোলাপস বা এক্সপ্যান্ড (Collapse/Expand) করার সুযোগ প্রদান করে। এটি সাধারণত FAQ সেকশন বা অন্যান্য জায়গায় ব্যবহার করা হয়, যেখানে একাধিক কন্টেন্টকে একসাথে সুশৃঙ্খলভাবে প্রদর্শন করা হয়।

Angular Material এর MatAccordion এবং MatExpansionPanel কম্পোনেন্টের মাধ্যমে কোলাপসিবল প্যানেল তৈরি করা যায়।

১. প্রাথমিক প্রস্তুতি

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

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

আপনার app.module.ts ফাইলে MatExpansionModule ইমপোর্ট করুন:

import { MatExpansionModule } from '@angular/material/expansion';

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

২. কোলাপসিবল প্যানেল তৈরি করা

এখন MatAccordion এবং MatExpansionPanel ব্যবহার করে একটি কোলাপসিবল প্যানেল তৈরি করবো।

HTML কোড:

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 1
      </mat-panel-title>
      <mat-panel-description>
        This is the first panel
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the content of panel 1.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 2
      </mat-panel-title>
      <mat-panel-description>
        This is the second panel
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the content of panel 2.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 3
      </mat-panel-title>
      <mat-panel-description>
        This is the third panel
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the content of panel 3.</p>
  </mat-expansion-panel>
</mat-accordion>

এখানে:

mat-accordion: এটি কোলাপসিবল প্যানেলের মূল কন্টেইনার।
mat-expansion-panel: প্রতিটি কোলাপসিবল প্যানেল।
mat-expansion-panel-header: প্যানেলের শিরোনাম অংশ যেখানে mat-panel-title এবং mat-panel-description যুক্ত করা হয়।

৩. কোলাপসিবল প্যানেলের আচরণ নিয়ন্ত্রণ করা

আপনি expanded প্রপার্টি ব্যবহার করে প্যানেলের এক্সপ্যান্ড/কোলাপস নিয়ন্ত্রণ করতে পারেন।

HTML কোড:

<mat-accordion>
  <mat-expansion-panel [expanded]="panel1Expanded">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 1
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>This is the content of panel 1.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 2
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>This is the content of panel 2.</p>
  </mat-expansion-panel>
</mat-accordion>

TypeScript কোড:

export class AppComponent {
  panel1Expanded = true; // প্রথম প্যানেল ডিফল্টভাবে এক্সপ্যান্ড থাকবে
}

এখানে, panel1Expanded ভেরিয়েবলটি ব্যবহার করা হয়েছে, যার মাধ্যমে আপনি প্যানেল ১ এর এক্সপ্যান্ড বা কোলাপস করার আচরণ নিয়ন্ত্রণ করতে পারবেন।

৪. একাধিক প্যানেল একসাথে এক্সপ্যান্ড করা

ডিফল্টভাবে, Angular Material Accordion শুধুমাত্র একটি প্যানেল একসাথে এক্সপ্যান্ড হতে দেয়। তবে আপনি চাইলে সব প্যানেল একসাথে এক্সপ্যান্ড বা কোলাপস করতে পারবেন।

HTML কোড:

<mat-accordion multi="true">
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 1
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>This is the content of panel 1.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 2
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>This is the content of panel 2.</p>
  </mat-expansion-panel>
</mat-accordion>

এখানে multi="true" অ্যাট্রিবিউট ব্যবহার করা হয়েছে, যার মাধ্যমে একাধিক প্যানেল একসাথে এক্সপ্যান্ড হতে পারে।

৫. কাস্টম স্টাইলিং (CSS)

Angular Material ডিফল্ট স্টাইলিং প্রদান করে, তবে আপনি চাইলে কাস্টম স্টাইলও করতে পারেন। উদাহরণস্বরূপ, আপনি প্যানেলের শিরোনাম বা কন্টেন্টের ফন্ট, রং ইত্যাদি পরিবর্তন করতে পারেন।

CSS:

mat-expansion-panel {
  margin-bottom: 10px;
}

mat-expansion-panel-header {
  background-color: #f1f1f1;
}

mat-panel-title {
  font-weight: bold;
}

এখানে, আমরা প্যানেলের মাঝে স্পেস (margin) যোগ করেছি এবং শিরোনামের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করেছি।

Angular Material Accordion কম্পোনেন্ট ব্যবহার করে কোলাপসিবল প্যানেল তৈরি করা খুবই সহজ এবং কার্যকরী। এটি বিশেষত FAQ সেকশন, ডাইনামিক কনটেন্ট লোডিং, এবং যেকোনো জায়গায় যেখানে একাধিক অপশন বা কন্টেন্ট সুশৃঙ্খলভাবে উপস্থাপন করা দরকার, সেখানে ব্যবহার করা যায়। Angular Material এর সাহায্যে আপনি কাস্টম স্টাইলিং, এক্সপ্যান্ড/কোলাপস নিয়ন্ত্রণ এবং একাধিক প্যানেল একসাথে এক্সপ্যান্ড করার সুবিধা পেতে পারেন।

Content added By

Md Azizur Rahman

এক্সপ্যানশন প্যানেল গ্রুপ করা

Angular Material এর Expansion Panel কম্পোনেন্টটি একটি খুবই ব্যবহারযোগ্য উপাদান, যা আপনি কোন কন্টেন্ট অথবা ইনফরমেশন গ্রুপকে এক্সপ্যান্ড বা কোলাপ্স (expand or collapse) করতে ব্যবহার করতে পারেন। এক্সপ্যানশন প্যানেল গ্রুপিং (Expansion Panel Grouping) ব্যবহার করে আপনি একাধিক এক্সপ্যানশন প্যানেলকে একটি গ্রুপে রাখতে পারেন, যেখানে একাধিক প্যানেল একসাথে এক্সপ্যান্ড বা কোলাপ্স করা যায়।

এখানে, আমরা দেখব কিভাবে Angular Material Expansion Panel গ্রুপিং করা যায় এবং এর কার্যপ্রণালী কিভাবে কাজ করে।

প্রাথমিক প্রস্তুতি

প্রথমে, আপনাকে MatExpansionModule ইমপোর্ট করতে হবে।

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

app.module.ts ফাইলে MatExpansionModule ইমপোর্ট করুন:

import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonModule } from '@angular/material/button';

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

এক্সপ্যানশন প্যানেল গ্রুপিং

এখন, mat-expansion-panel ব্যবহার করে একাধিক প্যানেলকে একটি গ্রুপে রাখা হবে, যেখানে একসাথে একাধিক প্যানেল এক্সপ্যান্ড বা কোলাপ্স করা যাবে।

২. HTML টেমপ্লেট

এখানে, আমরা একাধিক এক্সপ্যানশন প্যানেল ব্যবহার করেছি, এবং একটি mat-accordion ব্যবহার করে প্যানেলগুলোকে গ্রুপ করা হয়েছে।

<mat-accordion>
  <mat-expansion-panel [expanded]="isExpanded1">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 1
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>Content for Panel 1</p>
    <button mat-button (click)="togglePanel(1)">Toggle Panel 1</button>
  </mat-expansion-panel>

  <mat-expansion-panel [expanded]="isExpanded2">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 2
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>Content for Panel 2</p>
    <button mat-button (click)="togglePanel(2)">Toggle Panel 2</button>
  </mat-expansion-panel>

  <mat-expansion-panel [expanded]="isExpanded3">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 3
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>Content for Panel 3</p>
    <button mat-button (click)="togglePanel(3)">Toggle Panel 3</button>
  </mat-expansion-panel>
</mat-accordion>

এখানে:

mat-accordion: এটি এক্সপ্যানশন প্যানেলগুলোকে একটি গ্রুপে রাখে, এবং [expanded] প্রপার্টি ব্যবহার করে আপনি কন্ট্রোল করতে পারবেন কোন প্যানেলটি এক্সপ্যান্ড বা কোলাপ্স হবে।
togglePanel(): একটি কাস্টম ফাংশন যা প্যানেল এক্সপ্যান্ড বা কোলাপ্স করে।

৩. TypeScript কোড

এখন, togglePanel() ফাংশনটি তৈরি করতে হবে যা প্যানেলগুলোর এক্সপ্যান্ড স্টেট পরিবর্তন করবে। এই ফাংশনটি প্যানেল নং অনুযায়ী স্টেট চেক করবে এবং সেই অনুযায়ী এক্সপ্যান্ড/কোলাপ্স করবে।

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isExpanded1: boolean = false;
  isExpanded2: boolean = false;
  isExpanded3: boolean = false;

  togglePanel(panelNumber: number) {
    switch (panelNumber) {
      case 1:
        this.isExpanded1 = !this.isExpanded1;
        break;
      case 2:
        this.isExpanded2 = !this.isExpanded2;
        break;
      case 3:
        this.isExpanded3 = !this.isExpanded3;
        break;
    }
  }
}

এখানে:

isExpanded1, isExpanded2, isExpanded3: প্রতিটি এক্সপ্যানশন প্যানেলের জন্য একটি বুলিয়ান ভেরিয়েবল, যা প্যানেলের এক্সপ্যান্ড স্টেট নির্দেশ করে।
togglePanel(): এই ফাংশনটি ব্যবহারকারীর ক্লিক করার সময় প্যানেলগুলোর এক্সপ্যান্ড স্টেট পরিবর্তন করবে।

একাধিক প্যানেল একসাথে এক্সপ্যান্ড/কোলাপ্স করা

আপনি চাইলে একসাথে একাধিক প্যানেল এক্সপ্যান্ড বা কোলাপ্স করার জন্য একটি ফাংশন ব্যবহার করতে পারেন।

expandAllPanels() {
  this.isExpanded1 = true;
  this.isExpanded2 = true;
  this.isExpanded3 = true;
}

collapseAllPanels() {
  this.isExpanded1 = false;
  this.isExpanded2 = false;
  this.isExpanded3 = false;
}

এটি expandAllPanels() এবং collapseAllPanels() ফাংশন তৈরি করবে, যা একসাথে সমস্ত প্যানেল এক্সপ্যান্ড বা কোলাপ্স করতে সাহায্য করবে।

আপনি এই ফাংশনগুলিকে একটি বাটনের সাথে সংযুক্ত করতে পারেন:

<button mat-button (click)="expandAllPanels()">Expand All</button>
<button mat-button (click)="collapseAllPanels()">Collapse All</button>

স্টাইলিং (CSS)

Angular Material এক্সপ্যানশন প্যানেলের জন্য ডিফল্ট স্টাইলিং প্রদান করে, তবে আপনি কাস্টম CSS ব্যবহার করে প্যানেল এবং এর কনটেন্ট কাস্টমাইজ করতে পারেন।

mat-expansion-panel {
  margin: 10px 0;
}

mat-panel-title {
  font-weight: bold;
}

mat-expansion-panel-header {
  background-color: #f1f1f1;
}

এখানে, mat-expansion-panel এর জন্য মার্জিন, mat-panel-title এর জন্য ফন্ট ওয়েট এবং mat-expansion-panel-header এর ব্যাকগ্রাউন্ড কাস্টমাইজ করা হয়েছে।

Angular Material Expansion Panel এবং Accordion কম্পোনেন্টগুলি ব্যবহার করে আপনি সহজেই একাধিক প্যানেল তৈরি করতে পারেন এবং তাদের মধ্যে এক্সপ্যান্ড/কোলাপ্স করার ফিচার যোগ করতে পারেন। mat-accordion এর সাহায্যে আপনি একসাথে একাধিক প্যানেল গ্রুপ করতে পারেন এবং [expanded] প্রপার্টি ব্যবহার করে প্যানেলের এক্সপ্যান্ড স্টেট কন্ট্রোল করতে পারেন। এটি ব্যবহারকারীদের জন্য একটি ইন্টারঅ্যাকটিভ এবং কার্যকরী ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে।

Content added By

Md Azizur Rahman

ফর্মের সাথে এক্সপ্যানশন প্যানেল ব্যবহার

Angular Material এর <mat-expansion-panel> কম্পোনেন্টটি ব্যবহারকারীদের জন্য একটি খুব কার্যকরী UI উপাদান, যা ট্যাবের মতো কাজ করে। এটি সাধারণত কনটেন্ট বা ফর্মের বিভিন্ন অংশ একসাথে আড়াল করতে বা প্রদর্শন করতে ব্যবহৃত হয়। এটি এক্সপ্যান্ডেবল এবং কোল্লাপসেবল কনটেন্ট ব্লক তৈরি করতে সাহায্য করে, যা বিশেষভাবে যখন অনেক কনটেন্ট একসাথে দেখানো হয়, তখন খুব কার্যকরী।

এখানে আমরা দেখবো কিভাবে Angular Material Expansion Panel ব্যবহার করে ফর্মের বিভিন্ন অংশ বা ইনপুট ফিল্ডগুলো প্রদর্শন এবং আড়াল করতে পারি।

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

প্রথমে, আপনাকে MatExpansionModule এবং ReactiveFormsModule ইমপোর্ট করতে হবে।

import { MatExpansionModule } from '@angular/material/expansion';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    MatExpansionModule,
    ReactiveFormsModule
  ]
})
export class AppModule { }

২. এক্সপ্যানশন প্যানেল ফর্মের সাথে ব্যবহার

এখন, আমরা mat-expansion-panel কম্পোনেন্ট ব্যবহার করে ফর্মের ইনপুট ফিল্ডগুলো একটি এক্সপ্যানশন প্যানেলে রাখব। যখন ব্যবহারকারী প্যানেল এক্সপ্যান্ড করবেন, তখন ফর্মের ফিল্ডগুলো দেখা যাবে এবং যখন কোলাপ্স হবে, তখন ফিল্ডগুলো আড়াল হয়ে যাবে।

HTML টেমপ্লেট

<mat-accordion>
  <mat-expansion-panel [expanded]="isExpanded" (expandedChange)="onExpansionChange($event)">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal Information
      </mat-panel-title>
    </mat-expansion-panel-header>

    <form [formGroup]="form">
      <mat-form-field>
        <mat-label>Name</mat-label>
        <input matInput formControlName="name" required>
      </mat-form-field>

      <mat-form-field>
        <mat-label>Email</mat-label>
        <input matInput formControlName="email" required>
      </mat-form-field>

      <mat-form-field>
        <mat-label>Phone</mat-label>
        <input matInput formControlName="phone">
      </mat-form-field>
    </form>
  </mat-expansion-panel>
</mat-accordion>

এখানে:

mat-accordion: এটি মূল প্যানেলগুলোকে একত্রে গ্রুপ করে রাখে।
mat-expansion-panel: এক্সপ্যানশন প্যানেলটি তৈরি করে, যা ফর্ম বা কনটেন্ট প্রদর্শন এবং আড়াল করার জন্য ব্যবহৃত হয়।
[expanded]: এটি প্যানেল এক্সপ্যান্ডেড বা কোলাপ্সড রয়েছে কিনা তা নিয়ন্ত্রণ করে।
(expandedChange): এই ইভেন্টের মাধ্যমে প্যানেল এক্সপ্যান্ড হওয়া বা কোলাপ্স হওয়ার পরিবর্তন সনাক্ত করা যায়।

৩. টাইপস্ক্রিপ্ট কোড

এখন, টাইপস্ক্রিপ্ট ফাইলে ফর্মের জন্য একটি FormGroup তৈরি করতে হবে এবং expanded প্রপার্টি ব্যবহার করে এক্সপ্যানশন প্যানেলের অবস্থান নিয়ন্ত্রণ করতে হবে।

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  form: FormGroup;
  isExpanded: boolean = true;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      phone: ['']
    });
  }

  onExpansionChange(event: boolean) {
    console.log("Panel expanded:", event);
  }
}

এখানে:

FormGroup: এটি ফর্মের বিভিন্ন ইনপুট ফিল্ডের একটি গ্রুপ তৈরি করে।
Validators.required: ফর্মের ইনপুট ফিল্ডগুলোকে আবশ্যিক হিসেবে নির্ধারণ করে।
isExpanded: এটি এক্সপ্যানশন প্যানেলের বর্তমান অবস্থা নির্ধারণ করে (কোলাপ্সড বা এক্সপ্যান্ডেড)।

৪. কাস্টম স্টাইলিং

mat-expansion-panel এর কিছু সাধারণ স্টাইল কাস্টমাইজেশন করা যায়। যেমন, আপনি প্যানেলের ব্যাকগ্রাউন্ড রঙ, প্যাডিং, অথবা শ্যাডো পরিবর্তন করতে পারেন।

mat-expansion-panel {
  margin-bottom: 15px;
  background-color: #f1f1f1;
}

mat-expansion-panel-header {
  background-color: #007bff;
  color: white;
}

mat-form-field {
  width: 100%;
}

এখানে:

mat-expansion-panel: প্যানেলটির নিচে কিছু মার্জিন যোগ করা হয়েছে এবং ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে।
mat-expansion-panel-header: প্যানেলের হেডারের ব্যাকগ্রাউন্ড রঙ এবং লেখার রঙ পরিবর্তন করা হয়েছে।

৫. একাধিক এক্সপ্যানশন প্যানেল

একাধিক এক্সপ্যানশন প্যানেল তৈরি করার জন্য, আপনি mat-accordion ব্যবহার করতে পারেন, যা সব প্যানেল একসাথে গ্রুপ করে রাখবে।

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Section 1
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>Content for Section 1</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Section 2
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>Content for Section 2</p>
  </mat-expansion-panel>
</mat-accordion>

এখানে, mat-accordion ব্যবহার করে একাধিক এক্সপ্যানশন প্যানেল তৈরি করা হয়েছে। একবারে একটি প্যানেল এক্সপ্যান্ড হবে এবং অন্যটি কোলাপ্স হবে।

Angular Material Expansion Panel ফর্মের সাথে ব্যবহার করে আপনি একটি অত্যন্ত কার্যকরী এবং ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে পারেন। এক্সপ্যানশন প্যানেল ব্যবহারকারীদের জন্য অতিরিক্ত কনটেন্ট বা ইনপুট ফিল্ডগুলো আড়াল বা প্রদর্শন করার সুবিধা প্রদান করে, যা অ্যাপ্লিকেশনের ক্লিন এবং সুশৃঙ্খল ডিজাইনের জন্য অত্যন্ত উপকারী। Angular Material এর এক্সপ্যানশন প্যানেল সহজেই কাস্টমাইজ এবং স্টাইল করা যায়, যা আপনার অ্যাপ্লিকেশনের জন্য আরো ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব অভিজ্ঞতা তৈরি করে।

Content added By

Md Azizur Rahman

Angular Material এক্সপ্যানশন প্যানেল কোলাপসিবল প্যানেল তৈরি করা এক্সপ্যানশন প্যানেল গ্রুপ করা ফর্মের সাথে এক্সপ্যানশন প্যানেল ব্যবহার

Angular Material এক্সপ্যানশন প্যানেল

এক্সপ্যানশন প্যানেল তৈরি করার পদক্ষেপ

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

২. HTML টেমপ্লেটে এক্সপ্যানশন প্যানেল ব্যবহার করা

৩. এক্সপ্যানশন প্যানেলের ভিজ্যুয়াল কাস্টমাইজেশন

এক্সপ্যানশন প্যানেল ক্লোজ করা বা ওপেন করা

TypeScript কোড:

এক্সপ্যানশন প্যানেলের অন্যান্য কাস্টমাইজেশন

১. একাধিক প্যানেল একসাথে খুলে রাখা

২. এক্সপ্যানশন প্যানেল আইকন সহ

কোলাপসিবল প্যানেল তৈরি করা

১. প্রাথমিক প্রস্তুতি

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

২. কোলাপসিবল প্যানেল তৈরি করা

HTML কোড:

৩. কোলাপসিবল প্যানেলের আচরণ নিয়ন্ত্রণ করা

HTML কোড:

TypeScript কোড:

৪. একাধিক প্যানেল একসাথে এক্সপ্যান্ড করা

HTML কোড:

৫. কাস্টম স্টাইলিং (CSS)

CSS:

এক্সপ্যানশন প্যানেল গ্রুপ করা

প্রাথমিক প্রস্তুতি

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

এক্সপ্যানশন প্যানেল গ্রুপিং

২. HTML টেমপ্লেট

৩. TypeScript কোড

একাধিক প্যানেল একসাথে এক্সপ্যান্ড/কোলাপ্স করা

স্টাইলিং (CSS)

ফর্মের সাথে এক্সপ্যানশন প্যানেল ব্যবহার

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

২. এক্সপ্যানশন প্যানেল ফর্মের সাথে ব্যবহার

HTML টেমপ্লেট

৩. টাইপস্ক্রিপ্ট কোড

৪. কাস্টম স্টাইলিং

৫. একাধিক এক্সপ্যানশন প্যানেল

All Notifications

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Promotion