Expansion Panel

Question

Hi

I have User Personal Address / Correspondence Address as a separate component. I want to use Dynamic Expansion Panel which should be a separate component.

Below is the Expansion Panel Components

import { Component } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatExpansionModule } from '@angular/material/expansion';
import { BreadcrumbComponent } from '@shared/components/breadcrumb/breadcrumb.component';
@Component({
  selector: 'app-expansion-panel',
  templateUrl: './expansion-panel.component.html',
  styleUrls: ['./expansion-panel.component.scss'],
  standalone: true,
  imports: [
    BreadcrumbComponent,
    MatExpansionModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
    MatButtonModule,
    MatDatepickerModule,
  ],
})
export class ExpansionPanelComponent {
  breadscrums = [
    {
      title: 'Expansion',
      items: ['UI'],
      active: 'Expansion',
    },
  ];

  panelOpenState = false;
  step = 0;
  setStep(index: number) {
    this.step = index;
  }
  nextStep() {
    this.step++;
  }
  prevStep() {
    this.step--;
  }
  constructor() {
    //constructor
  }
}

Regards

Ramco Ramco · Answer

Hi Jayraj Below code you have hardcoded . How this information can come from another component. panels = [ { title: 'Panel 1' content: 'Content for Panel 1' } { title: 'Panel 2' content: 'Content for Panel 2' } // Add more panels as needed ]; Thanks

Jayraj Chhaya · Answer

To create a dynamic Expansion Panel component in Angular you can follow these steps: Create a new Angular component for the Expansion Panel. Define the necessary imports for Angular Material components like MatExpansionModule MatFormFieldModule MatInputModule MatIconModule MatButtonModule MatDatepickerModule. Implement the Expansion Panel logic in the component class. Use Angular Material Expansion Panel directives in the HTML template to display the dynamic panels. import { Component } from '@angular/core'; @Component({ selector: 'app-expansion-panel' templateUrl: './expansion-panel.component.html' styleUrls: ['./expansion-panel.component.scss'] }) export class ExpansionPanelComponent { panels = [ { title: 'Panel 1' content: 'Content for Panel 1' } { title: 'Panel 2' content: 'Content for Panel 2' } // Add more panels as needed ]; panelOpenState = false; constructor() { // Initialize component } } In the HTML template ( expansion-panel.component.html ) you can iterate over the panels array to dynamically create Expansion Panels: {{ panel.title }} {{ panel.content }} By following these steps and customizing the Expansion Panel component according to your requirements you can achieve a dynamic and reusable Expansion Panel component in Angular.