{"id":18223,"date":"2024-09-20T13:02:41","date_gmt":"2024-09-20T07:32:41","guid":{"rendered":"https:\/\/www.softsuave.com\/blog\/?p=18223"},"modified":"2025-10-30T15:02:30","modified_gmt":"2025-10-30T09:32:30","slug":"expand-collapse-panels-angular-without-material-ui","status":"publish","type":"post","link":"https:\/\/www.softsuave.com\/blog\/expand-collapse-panels-angular-without-material-ui\/","title":{"rendered":"Expand And Collapse Panel in Angular Without Material UI: Step-by-Step Guide"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-flat ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.softsuave.com\/blog\/expand-collapse-panels-angular-without-material-ui\/#Setting_Up_Your_Angular_Project\" >Setting Up Your Angular Project<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.softsuave.com\/blog\/expand-collapse-panels-angular-without-material-ui\/#Creating_the_Accordion_Animations_File\" >Creating the Accordion Animations File<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.softsuave.com\/blog\/expand-collapse-panels-angular-without-material-ui\/#Building_the_Accordion_Component\" >Building the Accordion Component<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.softsuave.com\/blog\/expand-collapse-panels-angular-without-material-ui\/#Animating_the_Panel_Expansion_and_Collapse\" >Animating the Panel Expansion and Collapse<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.softsuave.com\/blog\/expand-collapse-panels-angular-without-material-ui\/#Testing_and_Debugging_the_Accordion_Component\" >Testing and Debugging the Accordion Component<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.softsuave.com\/blog\/expand-collapse-panels-angular-without-material-ui\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n\n<div class=\"wp-block-columns has-border-color is-layout-flex wp-container-core-columns-is-layout-29cf1a26 wp-block-columns-is-layout-flex\" style=\"border-color:#ff0042;border-width:3px;margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20);padding-top:0;padding-right:var(--wp--preset--spacing--20);padding-bottom:0;padding-left:var(--wp--preset--spacing--20)\">\n<div class=\"wp-block-column has-border-color has-ast-global-color-5-border-color has-ast-global-color-6-background-color has-background is-layout-flow wp-container-core-column-is-layout-334757f1 wp-block-column-is-layout-flow\" style=\"border-width:12px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\">\n<p><strong>Key Takeaways<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This blog covers a step-by-step approach to creating an <strong>expand and collapse panel in Angular without Material UI<\/strong>.<\/li>\n\n\n\n<li>Using Angular\u2019s built-in animation features, we show how to build a lightweight and modular panel solution without relying on external libraries.<\/li>\n\n\n\n<li>This guide covers the setup, coding of the accordion component, integrating animations, and testing for optimal performance.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0806ab5c wp-block-columns-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:90%\">\n<p>For modern web applications, it is vital to have appealing, dynamic, &amp; 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\u2019s built-in animation capabilities.&nbsp;<\/p>\n\n\n\n<p>Make sure to <a href=\"https:\/\/www.softsuave.com\/hire-angularjs-developers\">hire Angular developers<\/a> so you can ensure that features, like expand and collapse panels, are implemented with precision, leveraging the full potential of Angular\u2019s native tools. This guide will walk you through building an <strong>expand and collapse panel in Angular without Material UI<\/strong> using Angular animations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-setting-up-your-angular-project\" style=\"text-transform:none\"><span class=\"ez-toc-section\" id=\"Setting_Up_Your_Angular_Project\"><\/span>Setting Up Your Angular Project<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>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:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install @angular\/platform-browser\/animations<\/code><\/pre>\n\n\n\n<p>After installing, you need to import this module into your <strong>app.module.ts file<\/strong>. Here\u2019s how:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { BrowserAnimationsModule } from '@angular\/platform-browser\/animations';\n@NgModule({\n  declarations: &#91;...],\n  imports: &#91;BrowserAnimationsModule, ...],\n  providers: &#91;...],\n  bootstrap: &#91;AppComponent]\n})\nexport class AppModule {}\n<\/code><\/pre>\n\n\n\n<p>The BrowserAnimations Module enables your <a href=\"https:\/\/angular.dev\/\">Angular<\/a> project to handle animations effectively, making it critical for our task. Without importing it, any attempt to add animations will fail, so ensure it\u2019s properly set up.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-creating-the-accordion-animations-file\" style=\"text-transform:none\"><span class=\"ez-toc-section\" id=\"Creating_the_Accordion_Animations_File\"><\/span>Creating the Accordion Animations File<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Here\u2019s how you can set up the expand Collapse animation trigger in a dedicated file:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { trigger, state, style, transition, animate } from '@angular\/animations';\n\nexport const expandCollapse = trigger('expandCollapse', &#91;\n  state('collapsed', style({ height: '0px', overflow: 'hidden' })),\n  state('expanded', style({ height: '*' })),\n  transition('collapsed &lt;=&gt; expanded', &#91;animate('300ms ease-out')])\n]);\n<\/code><\/pre>\n\n\n\n<p>In this file, we define the expand Collapse trigger. It manages the panel&#8217;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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-building-the-accordion-component\" style=\"text-transform:none\"><span class=\"ez-toc-section\" id=\"Building_the_Accordion_Component\"><\/span>Building the Accordion Component<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now that the animation file is ready, it\u2019s time to create the accordion component where the animations will be applied. First, generate a new component using Angular CLI:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ng generate component accordion\n<\/code><\/pre>\n\n\n\n<p>Inside the accordion component, you\u2019ll define a template for the panel sections and integrate the animations. The structure of the component might look something like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div *ngFor=\"let section of sections; let i = index\"&gt;\n  &lt;div (click)=\"toggle(i)\"&gt;\n    {{ section.title }}\n  &lt;\/div&gt;\n  &lt;div &#91;@expandCollapse]=\"section.expanded ? 'expanded' : 'collapsed'\"&gt;\n    &lt;p&gt;{{ section.content }}&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>Here, we use<strong> ngFor<\/strong> 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.<\/p>\n\n\n\n<p>Next, let\u2019s look at the logic behind toggling the panel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-animating-the-panel-expansion-and-collapse\" style=\"text-transform:none\"><span class=\"ez-toc-section\" id=\"Animating_the_Panel_Expansion_and_Collapse\"><\/span>Animating the Panel Expansion and Collapse<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To make the accordion functional, we\u2019ll 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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export class AccordionComponent {\n  sections = &#91;\n    { title: 'Section 1', content: 'Content 1', expanded: false },\n    { title: 'Section 2', content: 'Content 2', expanded: false }\n  ];\n\n  toggle(index: number) {\n    this.sections&#91;index].expanded = !this.sections&#91;index].expanded;\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>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 <strong>expand Collapse<\/strong> animation. This method allows each section to expand or collapse independently, ensuring a smooth user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-testing-and-debugging-the-accordion-component\" style=\"text-transform:none\"><span class=\"ez-toc-section\" id=\"Testing_and_Debugging_the_Accordion_Component\"><\/span>Testing and Debugging the Accordion Component<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Once the accordion component is complete, testing becomes essential to ensure everything works as expected across different environments. Start by testing the accordion\u2019s performance across popular browsers like Chrome, Firefox, and Edge to confirm smooth animations.<\/p>\n\n\n\n<p>If you encounter issues where animations don\u2019t work, one common cause is missing module imports, especially the <strong>Browser Animations Module<\/strong>. Double-check your <strong>app.module.ts<\/strong> file to ensure everything is correctly imported<\/p>\n\n\n\n<p>Additionally, verify that your <strong>@Component <\/strong>decorator includes the animations array:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Component({\n  selector: 'app-accordion',\n  templateUrl: '.\/accordion.component.html',\n  styleUrls: &#91;'.\/accordion.component.css'],\n  animations: &#91;expandCollapse]\n})\n<\/code><\/pre>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusion\" style=\"text-transform:none\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this guide, we walked through the process of building an <strong>expand and collapse panel in Angular without Material UI<\/strong> using Angular\u2019s built-in animation features. This approach offers a lightweight, customizable solution that doesn\u2019t 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.<\/p>\n\n\n\n<p>You can unlock more complex UI features when you <a href=\"https:\/\/www.softsuave.com\/blog\/angular-development-team\/\">dedicated Angular development team<\/a>, 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. <\/p>\n\n\n\n<p>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.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Discover a custom method for implementing an Expand and collapse panel in Angular without Material UI to enhance your application&#8217;s functionality today!<\/p>\n","protected":false},"author":3,"featured_media":18289,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[92,7],"tags":[],"class_list":["post-18223","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-it-solutions","category-web-solutions"],"_links":{"self":[{"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/posts\/18223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/comments?post=18223"}],"version-history":[{"count":0,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/posts\/18223\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/media\/18289"}],"wp:attachment":[{"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/media?parent=18223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/categories?post=18223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/tags?post=18223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}