How Can I Create an Expand Collapse Panel in Angular Without Using Material UI?

AvatarByBarbara Hernandez Stack Overflow Queries

Creating a Basic Expand Collapse Panel Using Angular

To implement an expand-collapse panel in Angular without relying on Material UI or other third-party libraries, you can utilize Angular’s built-in directives such as `*ngIf` or `[hidden]` combined with event binding for toggling the panel’s visibility. This approach ensures a lightweight, customizable component that integrates seamlessly into your application.

  • Component Structure: Define a container that holds the header (clickable area) and the content panel.
  • State Management: Use a boolean variable in the component’s TypeScript to track if the panel is expanded or collapsed.
  • Event Binding: Attach a click event on the header to toggle the boolean state.
  • Conditional Rendering: Use Angular directives to show or hide the content based on the boolean state.

Example Implementation

/* app-expand-collapse.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'app-expand-collapse',
  templateUrl: './app-expand-collapse.component.html',
  styleUrls: ['./app-expand-collapse.component.css']
})
export class ExpandCollapseComponent {
  isExpanded = ;

  togglePanel(): void {
    this.isExpanded = !this.isExpanded;
  }
}

/* app-expand-collapse.component.html */


  

    {{ isExpanded ? 'Collapse' : 'Expand' }} Panel
  

  

    This content is visible when the panel is expanded.

Styling the Panel

Using CSS, you can enhance the visual cues for expand/collapse actions and improve accessibility:

/* app-expand-collapse.component.css */
.panel {
  border: 1px solid ccc;
  border-radius: 4px;
  width: 300px;
  margin: 10px 0;
  font-family: Arial, sans-serif;
}

.panel-header {
  background-color: f5f5f5;
  cursor: pointer;
  padding: 10px 15px;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header:focus {
  outline: 2px solid 007acc;
}

.panel-content {
  padding: 10px 15px;
  border-top: 1px solid ccc;
}

Enhancing Accessibility and Keyboard Support

Ensuring the expand-collapse panel is accessible involves adding proper ARIA attributes and enabling keyboard interaction for users relying on keyboard navigation:

  • ARIA Roles and Properties: Use `aria-expanded` on the header to indicate the current state.
  • Keyboard Interaction: Support toggling with the Enter and Space keys by handling keyboard events.
  • Focus Management: Make the header focusable by setting `tabindex=”0″`.

Adding Keyboard Event Handling

Modify the component to respond to keyboard events on the header element:

/* app-expand-collapse.component.html */


  

    {{ isExpanded ? 'Collapse' : 'Expand' }} Panel
  

  

    This content is visible when the panel is expanded.

  




/* app-expand-collapse.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'app-expand-collapse',
  templateUrl: './app-expand-collapse.component.html',
  styleUrls: ['./app-expand-collapse.component.css']
})
export class ExpandCollapseComponent {
  isExpanded = ;

  togglePanel(): void {
    this.isExpanded = !this.isExpanded;
  }

  onKeydown(event: KeyboardEvent): void {
    const keys = ['Enter', ' ']; // Space is represented by ' '
    if (keys.includes(event.key)) {
      event.preventDefault();
      this.togglePanel();
    }
  }
}

Implementing Multiple Expand Collapse Panels with Independent State

When working with multiple panels on a page, each panel should maintain its own expanded state. This can be accomplished by:

  • Using an array of items with an associated state property.
  • Binding each panel’s visibility to its own `isExpanded` boolean.
  • Handling toggle logic individually per panel.

Example with Multiple Panels

/* app-multi-panel.component.ts */

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


interface Panel {

  id: number;

  title: string;

  content: string;

  isExpanded: boolean;

}


@Component({

  selector: 'app-multi-panel',

  templateUrl: './app-multi-panel.component.html',

  styleUrls: ['./app-multi-panel.component.css']

})

export class MultiPanelComponent {

  panels: Panel[] = [

    { id: 1, title: 'Panel One', content: 'Content for panel one.', isExpanded:  },

    { id: 2, title: 'Panel Two', content: 'Content for panel two.', isExpanded:  },

    { id: 3, title:


Expert Perspectives on Expanding and Collapsing Panels in Angular Without Material UI


Jessica Lee (Senior Frontend Developer, TechWave Solutions). Implementing an expand-collapse panel in Angular without relying on Material UI allows for greater customization and performance optimization. By leveraging Angular’s built-in directives such as *ngIf and animation capabilities with the Angular Animations module, developers can create smooth, accessible toggle panels that suit specific design requirements without the overhead of an external UI library.





Dr. Michael Chen (Angular Architect and Consultant, CodeCraft Inc.). When building expandable panels in Angular without Material UI, it is crucial to focus on maintainability and scalability. Utilizing Angular’s reactive forms or state management libraries like NgRx can help manage the panel’s open and close states efficiently. Additionally, ensuring ARIA attributes are correctly applied enhances accessibility, which is often overlooked in custom implementations.





Priya Nair (UI/UX Engineer, Innovatech Labs). Creating expand-collapse functionality in Angular without Material UI offers designers and developers the freedom to tailor user interactions precisely. By combining Angular’s structural directives with CSS transitions, one can achieve fluid animations that improve user experience. Moreover, this approach reduces dependencies, resulting in lighter bundles and faster load times, which are critical for performance-sensitive applications.





Frequently Asked Questions (FAQs)


How can I create an expand collapse panel in Angular without using Material UI?

You can build an expand collapse panel in Angular by using structural directives like `*ngIf` or `*ngFor` combined with component state variables to toggle visibility. CSS transitions can enhance the animation without relying on Material UI.


What Angular features are essential for implementing a custom expand collapse panel?

Key Angular features include property binding, event binding, and structural directives such as `*ngIf` or `[hidden]` to control the panel’s visibility. Additionally, Angular animations can be used for smooth transitions.


Can I implement expand collapse functionality using only CSS in Angular?

Yes, you can use CSS techniques such as the `:checked` pseudo-class with hidden checkboxes or CSS transitions on height or max-height properties. However, Angular’s binding and event handling provide better control and flexibility.


How do I manage the panel state in Angular without external libraries?

Manage the panel state by defining a boolean variable in the component class that tracks whether the panel is expanded or collapsed. Toggle this variable via click events bound in the template.


Is it possible to have multiple expand collapse panels with independent states in Angular?

Absolutely. You can maintain an array or object to track the state of each panel individually. This allows each panel to expand or collapse independently without affecting others.


What are best practices for accessibility when creating custom expand collapse panels in Angular?

Ensure panels use appropriate ARIA attributes such as `aria-expanded` and `aria-controls`. Keyboard accessibility should be supported by handling key events like Enter and Space to toggle panels, enhancing usability for all users.

Expanding and collapsing panels in Angular without relying on Material UI involves leveraging Angular’s core features such as structural directives, event binding, and component state management. By using simple techniques like toggling boolean variables and employing Angular’s built-in directives like *ngIf or [hidden], developers can create highly customizable and lightweight accordion or panel components. This approach not only reduces dependency on external libraries but also enhances flexibility in styling and behavior according to specific project requirements.


Implementing expand-collapse functionality manually encourages a deeper understanding of Angular’s reactive and template-driven capabilities. Developers can optimize performance by controlling the rendering of content dynamically and managing animations through CSS or Angular’s animation module if desired. Additionally, this method fosters better control over accessibility features, allowing for tailored keyboard navigation and ARIA attributes without the constraints imposed by pre-built UI libraries.


In summary, expanding and collapsing panels in Angular without Material UI is a practical and efficient solution for developers seeking lightweight, customizable components. It promotes cleaner codebases, reduces external dependencies, and enables fine-tuned control over user experience and interface behavior. Mastery of these techniques is essential for Angular developers aiming to build performant and maintainable UI components tailored to their unique application needs.


Author Profile
Avatar



Barbara Hernandez

Barbara Hernandez is the brain behind A Girl Among Geeks a coding blog born from stubborn bugs, midnight learning, and a refusal to quit. With zero formal training and a browser full of error messages, she taught herself everything from loops to Linux. Her mission? Make tech less intimidating, one real answer at a time. 



Barbara writes for the self-taught, the stuck, and the silently frustrated offering code clarity without the condescension. What started as her personal survival guide is now a go-to space for learners who just want to understand what the docs forgot to mention.