To create an expand/collapse panel in Angular without Material UI, you can use a simple implementation leveraging Angular’s built-in directives such as *ngIf, *ngFor, or ngClass. This approach uses native HTML, CSS, and Angular functionality to toggle visibility of content inside a panel.
Here’s a step-by-step guide:
1. Set up your Angular component
HTML: Expand/Collapse Panel
<!-- app.component.html -->
<div class="panel" *ngFor="let item of panels; let i = index">
<div class="panel-header" (click)="togglePanel(i)">
<h3>{{ item.title }}</h3>
<button>
{{ item.isOpen ? 'Collapse' : 'Expand' }}
</button>
</div>
<div class="panel-body" *ngIf="item.isOpen">
<p>{{ item.content }}</p>
</div>
</div>
TypeScript: Toggle Logic
// app.component.ts
import { Component } from '@angular/core';
({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
panels = [
{ title: 'Panel 1', content: 'This is the content of Panel 1', isOpen: false },
{ title: 'Panel 2', content: 'This is the content of Panel 2', isOpen: false },
{ title: 'Panel 3', content: 'This is the content of Panel 3', isOpen: false }
];
togglePanel(index: number) {
this.panels[index].isOpen = !this.panels[index].isOpen;
}
}
CSS: Styling the Panel
/* app.component.css */
.panel {
border: 1px solid #ccc;
margin-bottom: 10px;
border-radius: 5px;
}
.panel-header {
background-color: #f1f1f1;
padding: 10px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-body {
padding: 10px;
background-color: #fff;
}
button {
background: none;
border: none;
color: #007bff;
font-size: 14px;
cursor: pointer;
}
button:hover {
text-decoration: underline;
}
Explanation:
*ngForLoop: The panel structure is repeated for each item in thepanelsarray.*ngIfDirective: The panel body content is conditionally rendered based on whetherisOpenis true or false.togglePanel()Function: This function is called when the header is clicked, toggling theisOpenstate of the clicked panel.- Styling: Basic CSS to define the look of the panel, making the header clickable and toggling the button text between “Expand” and “Collapse.”
2. Expand/Collapse Behavior
- Clicking on the panel header will trigger the
togglePanel()method, flipping theisOpenstate. - If
isOpenis true, the panel content will be shown (thanks to*ngIf). Otherwise, it will be hidden.
Optional Enhancements:
- Accordion Style (Only one panel open at a time): You can modify the
togglePanel()function to close any currently open panel when opening a new one:
togglePanel(index: number) {
this.panels.forEach((panel, i) => {
panel.isOpen = i === index ? !panel.isOpen : false;
});
}
- Transition Animation: You can add smooth open/close animations using Angular’s
@angular/animationspackage or simple CSS transitions with height manipulation.
Conclusion:
This implementation provides a simple and customizable way to create an expand/collapse panel in Angular without relying on third-party libraries like Material UI. You can easily modify the design, add animations, or convert it into an accordion by adapting the logic in the togglePanel() function.
