Expand And Collapse Panel in Angular Without Material UI: Step-by-Step Guide

For modern web applications, it is vital to have appealing, dynamic, & responsive UI components. A widely used feature is the expand and collapse panel, which allows the user to show or hide content. Developers usually use Material UI for this, but it can be undertaken even with Angular’s built-in animation capabilities. 

Make sure to hire Angular developers so you can ensure that features, like expand and collapse panels, are implemented with precision, leveraging the full potential of Angular’s native tools. This guide will walk you through building an expand and collapse panel in Angular without Material UI using Angular animations.

Setting Up Your Angular Project

Before diving into coding the accordion panel, we need to ensure that your Angular project is correctly set up. Start by installing the necessary dependencies, specifically the Browser Animations Module, which is essential for working with Angular animations. Install it using the following command:

npm install @angular/platform-browser/animations

After installing, you need to import this module into your app.module.ts file. Here’s how:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  declarations: [...],
  imports: [BrowserAnimationsModule, ...],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule {}

The BrowserAnimations Module enables your Angular project to handle animations effectively, making it critical for our task. Without importing it, any attempt to add animations will fail, so ensure it’s properly set up.

Creating the Accordion Animations File

Once your project is ready, the next step is to create a separate file for the accordion animations. This keeps your code organized and lets you reuse the same animations in different components. This practice is similar to how Angular developers manage reusability by creating custom directives for handling repetitive tasks, like copying strings programmatically.

Here’s how you can set up the expand Collapse animation trigger in a dedicated file:

import { trigger, state, style, transition, animate } from '@angular/animations';

export const expandCollapse = trigger('expandCollapse', [
  state('collapsed', style({ height: '0px', overflow: 'hidden' })),
  state('expanded', style({ height: '*' })),
  transition('collapsed <=> expanded', [animate('300ms ease-out')])
]);

In this file, we define the expand Collapse trigger. It manages the panel’s height during expansion and collapse, transitioning between a collapsed state (height of 0px) and an expanded state (height auto). This approach makes it easier to handle animations across multiple components.

Building the Accordion Component

Now that the animation file is ready, it’s time to create the accordion component where the animations will be applied. First, generate a new component using Angular CLI:

ng generate component accordion

Inside the accordion component, you’ll define a template for the panel sections and integrate the animations. The structure of the component might look something like this:

<div *ngFor="let section of sections; let i = index">
  <div (click)="toggle(i)">
    {{ section.title }}
  </div>
  <div [@expandCollapse]="section.expanded ? 'expanded' : 'collapsed'">
    <p>{{ section.content }}</p>
  </div>
</div>

Here, we use ngFor to loop through the sections, each representing a panel in the accordion. The toggle function controls whether the panel is expanded or collapsed based on user input.

Next, let’s look at the logic behind toggling the panel.

Animating the Panel Expansion and Collapse

To make the accordion functional, we’ll bind the expand Collapse animation to each panel dynamically. The animation state changes based on user interaction, with the toggle function controlling whether a panel expands or collapses. This design is somewhat similar to how Angular developers resolve dynamic issues, such as Full-calendar module loading, by handling state changes efficiently.

export class AccordionComponent {
  sections = [
    { title: 'Section 1', content: 'Content 1', expanded: false },
    { title: 'Section 2', content: 'Content 2', expanded: false }
  ];

  toggle(index: number) {
    this.sections[index].expanded = !this.sections[index].expanded;
  }
}

In this code, we declare an array of sections where each object holds the title, content, and expanded state. The toggle function changes the expanded state for the clicked section, triggering the expand Collapse animation. This method allows each section to expand or collapse independently, ensuring a smooth user experience.

Testing and Debugging the Accordion Component

Once the accordion component is complete, testing becomes essential to ensure everything works as expected across different environments. Start by testing the accordion’s performance across popular browsers like Chrome, Firefox, and Edge to confirm smooth animations.

If you encounter issues where animations don’t work, one common cause is missing module imports, especially the Browser Animations Module. Double-check your app.module.ts file to ensure everything is correctly imported

Additionally, verify that your @Component decorator includes the animations array:

@Component({
  selector: 'app-accordion',
  templateUrl: './accordion.component.html',
  styleUrls: ['./accordion.component.css'],
  animations: [expandCollapse]
})

Companies often value Angular developers for their ability to handle complex debugging issues like this. Their expertise makes Angular developers a great fit for startups where resourcefulness and efficiency are key, allowing them to implement features like expand/collapse panels without external libraries such as Material UI.

Conclusion

In this guide, we walked through the process of building an expand and collapse panel in Angular without Material UI using Angular’s built-in animation features. This approach offers a lightweight, customizable solution that doesn’t rely on external libraries, making your application more modular and efficient. By keeping animations in separate files and ensuring proper module imports, you can achieve smooth panel transitions that enhance your user interface.

You can unlock more complex UI features when you hire dedicated Angular developers, as their expertise allows for customized components, such as expandable panels, to be easily implemented. This flexibility is valuable for businesses aiming to build unique, high-performing web applications. With help from top IT outsourcing companies like Soft Suave, you can procure the skills and resources needed for these tailored solutions. 

With this custom approach, you have more control over the behavior of your accordion component, making it a great alternative to Material UI for specific projects.