Expansion Panel

Ramco Ramco

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

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ramco Ramco2y ago

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 Chhaya2y ago
To create a dynamic Expansion Panel component in Angular, you can follow these steps:
1. Create a new Angular component for the Expansion Panel.
2. Define the necessary imports for Angular Material components like MatExpansionModule, MatFormFieldModule, MatInputModule, MatIconModule, MatButtonModule, MatDatepickerModule.
3. Implement the Expansion Panel logic in the component class.
4. 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.