Angular Accordion - Customize Item Appearance
For a minor customization of Accordion panels, you can define specific fields in panel data objects. For example, the following code generates three panels, the first and third are not customized, the second is disabled.
HTML
TypeScript
- <dx-accordion
- [dataSource]="accordionData">
- </dx-accordion>
- import { DxAccordionModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- accordionData = [{
- title: "Employee",
- text: "John Smith"
- }, {
- title: "Phone Number",
- text: "(555)555-5555",
- disabled: true
- }, {
- title: "Position",
- text: "Network Administrator"
- }];
- }
- @NgModule({
- imports: [
- // ...
- DxAccordionModule
- ],
- // ...
- })
If you need a more flexible solution, define an itemTemplate and itemTitleTemplate:
HTML
TypeScript
- <dx-accordion
- [dataSource]="accordionData"
- itemTitleTemplate="title"
- itemTemplate="item">
- <div *dxTemplate="let employee of 'title'">
- <span>{{employee.firstName}} </span>
- <span>{{employee.lastName}}</span>
- </div>
- <div *dxTemplate="let employee of 'item'">
- <span>{{employee.birthDate}} </span>
- <span>{{employee.position}}</span>
- </div>
- </dx-accordion>
- import { DxAccordionModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- accordionData = [{
- firstName: "John", lastName: "Smith",
- birthDate: "1986/03/14",
- position: "Network Administrator"
- }, {
- firstName: "Samantha", lastName: "Jones",
- birthDate: "1972/11/13",
- position: "Technical Writer"
- }];
- }
- @NgModule({
- imports: [
- // ...
- DxAccordionModule
- ],
- // ...
- })
You can also customize individual items. Declare them using the dxItem component:
HTML
TypeScript
- <dx-accordion>
- <dxi-item title="John Smith">
- <span>Network Administrator</span>
- </dxi-item>
- <dxi-item title="Samantha Jones">
- <span>Technical Writer</span>
- </dxi-item>
- </dx-accordion>
- import { DxAccordionModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // ...
- }
- @NgModule({
- imports: [
- // ...
- DxAccordionModule
- ],
- // ...
- })
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.