feat(accordion): add programmatic expansion sample

live-editing/configs/AccordionConfigGenerator.ts

@@ -31,6 +31,12 @@ export class AccordionConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: '/layouts/accordion/'
         }));
 
+        configs.push(new Config({
+            component: 'AccordionProgrammaticExpansionComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: '/layouts/accordion/'
+        }));
+
         configs.push(new Config({
             component: 'AccordionStyleComponent',
             additionalFiles: ["/src/app/layouts/accordion/accordion-style/layout.scss"],

src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.html

@@ -0,0 +1,26 @@
+<div class="button-group">
+    <button igxButton="contained" igxRipple type="button" (click)="accordion.expandAll()">Show All</button>
+    <button igxButton="outlined" igxRipple type="button" (click)="accordion.collapseAll()">Hide All</button>
+</div>
+
+<article class="sample-wrapper">
+    <igx-accordion #accordion>
+        <igx-expansion-panel>
+            <igx-expansion-panel-header>
+                <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title>
+            </igx-expansion-panel-header>
+            <igx-expansion-panel-body>
+                Content Panel 1
+            </igx-expansion-panel-body>
+        </igx-expansion-panel>
+
+        <igx-expansion-panel>
+            <igx-expansion-panel-header>
+                <igx-expansion-panel-title>Title Panel 2</igx-expansion-panel-title>
+            </igx-expansion-panel-header>
+            <igx-expansion-panel-body>
+                Content Panel 2
+            </igx-expansion-panel-body>
+        </igx-expansion-panel>
+    </igx-accordion>
+</article>

src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.scss

@@ -0,0 +1,17 @@
+$ep-sample-border: 1px solid rgba(174, 174, 174, 0.25);
+
+.button-group {
+    display: flex;
+    gap: 8px;
+    padding: 16px;
+}
+
+.sample-wrapper {
+    overflow-y: auto;
+    max-height: 380px;
+    margin: 8px;
+}
+
+igx-expansion-panel {
+    border: $ep-sample-border;
+}

src/app/layouts/accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IgxAccordionComponent } from 'igniteui-angular/accordion';
+import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective } from 'igniteui-angular/expansion-panel';
+
+@Component({
+    selector: 'app-accordion-programmatic-expansion',
+    styleUrls: ['./accordion-programmatic-expansion.component.scss'],
+    templateUrl: './accordion-programmatic-expansion.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [IgxButtonDirective, IgxRippleDirective, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelBodyComponent]
+})
+export class AccordionProgrammaticExpansionComponent {
+}

src/app/layouts/layouts-routes-data.ts

@@ -4,6 +4,7 @@ export const layoutsRoutesData = {
     'accordion-sample-1': { displayName: 'Accordion 1', parentName: 'Accordion' },
     'accordion-sample-2': { displayName: 'Accordion 2', parentName: 'Accordion' },
     'accordion-sample-3': { displayName: 'Accordion 3', parentName: 'Accordion' },
+    'accordion-programmatic-expansion': { displayName: 'Accordion Programmatic Expansion', parentName: 'Accordion' },
     'accordion-style': { displayName: 'Accordion Styling', parentName: 'Accordion' },
     'avatar-sample-1': { displayName: 'Avatar with Initials', parentName: 'Avatar' },
     'avatar-sample-2': { displayName: 'Avatar with Image', parentName: 'Avatar' },

src/app/layouts/layouts.routes.ts

@@ -80,6 +80,7 @@ import { View3Component } from './tabs/views/view3/view3.component';
 import { AccordionSample1Component } from './accordion/accordion-sample-1/accordion-sample-1.component';
 import { AccordionSample2Component } from './accordion/accordion-sample-2/accordion-sample-2.component';
 import { AccordionSample3Component } from './accordion/accordion-sample-3/accordion-sample-3.component';
+import { AccordionProgrammaticExpansionComponent } from './accordion/accordion-programmatic-expansion/accordion-programmatic-expansion.component';
 import { AccordionStyleComponent } from './accordion/accordion-style/accordion-style.component';
 import {StepperLabelPositionAndOrientationSampleComponent
 } from './stepper/stepper-label-position-and-orientation-sample/stepper-label-position-and-orientation-sample.component';
@@ -107,6 +108,11 @@ export const LayoutsRoutes: Routes = [
         data: layoutsRoutesData['accordion-sample-3'],
         path: 'accordion-sample-3'
     },
+    {
+        component: AccordionProgrammaticExpansionComponent,
+        data: layoutsRoutesData['accordion-programmatic-expansion'],
+        path: 'accordion-programmatic-expansion'
+    },
     {
         component: AccordionStyleComponent,
         data: layoutsRoutesData['accordion-style'],