feat(accordion): migrated to standalone

Author: lexasq

libs/common-docs/src/lib/common/schematics/schematics.component.html

@@ -138,7 +138,7 @@ <h2 id="getting-started">Schematics</h2>
     ],
     <span class="kwd">imports</span>: [
         <span class="pln">  &hellip;</span>
-        <span class="lit">AccordionModule.forRoot()</span>,
+        <span class="lit">AccordionModule</span>,
     ],
         bootstrap: [AppComponent]
     <span class="pun">{{'}'}}</span>)

libs/doc-pages/accordion/src/lib/accordion.module.ts

@@ -17,7 +17,7 @@ export { AccordionSectionComponent } from './accordion-section.component';
         ...DEMO_COMPONENTS
     ],
     imports: [
-        AccordionModule.forRoot(),
+        AccordionModule,
         CommonModule,
         FormsModule,
         DocsModule,

libs/doc-pages/accordion/src/lib/docs/usage.md

@@ -5,7 +5,7 @@ import { AccordionModule } from 'ngx-bootstrap/accordion';
 @NgModule({
   imports: [
     BrowserAnimationsModule,
-    AccordionModule.forRoot(),
+    AccordionModule,
     ...
   ]
 })

src/accordion/accordion-group.component.ts

@@ -2,6 +2,8 @@ import {
   Component, HostBinding, Inject, Input, OnDestroy, OnInit, Output, EventEmitter
 } from '@angular/core';
 import { AccordionComponent } from './accordion.component';
+import { CollapseModule } from 'ngx-bootstrap/collapse';
+import { NgClass, NgIf } from '@angular/common';
 
 /**
  * ### Accordion heading
@@ -10,14 +12,16 @@ import { AccordionComponent } from './accordion.component';
  * will be used as group's header template.
  */
 @Component({
-  selector: 'accordion-group, accordion-panel',
-  templateUrl: './accordion-group.component.html',
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: {
-    class: 'panel',
-    style: 'display: block'
-  },
-  styleUrls: ['./accordion.scss']
+    selector: 'accordion-group, accordion-panel',
+    templateUrl: './accordion-group.component.html',
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: {
+        class: 'panel',
+        style: 'display: block'
+    },
+    styleUrls: ['./accordion.scss'],
+    standalone: true,
+    imports: [NgClass, NgIf, CollapseModule]
 })
 export class AccordionPanelComponent implements OnInit, OnDestroy {
   /** turn on/off animation */

src/accordion/accordion.component.ts

@@ -4,15 +4,16 @@ import { AccordionConfig } from './accordion.config';
 
 /** Displays collapsible content panels for presenting information in a limited amount of space. */
 @Component({
-  selector: 'accordion',
-  template: `<ng-content></ng-content>`,
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: {
-    '[attr.aria-multiselectable]': 'closeOthers',
-    role: 'tablist',
-    class: 'panel-group',
-    style: 'display: block'
-  }
+    selector: 'accordion',
+    template: `<ng-content></ng-content>`,
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: {
+        '[attr.aria-multiselectable]': 'closeOthers',
+        role: 'tablist',
+        class: 'panel-group',
+        style: 'display: block'
+    },
+    standalone: true
 })
 export class AccordionComponent {
   /** turn on/off animation */

src/accordion/accordion.module.ts

@@ -1,17 +1,10 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { NgModule } from '@angular/core';
 
 import { AccordionComponent } from './accordion.component';
 import { AccordionPanelComponent } from './accordion-group.component';
-import { CollapseModule } from 'ngx-bootstrap/collapse';
 
 @NgModule({
-  imports: [CommonModule, CollapseModule],
-  declarations: [AccordionComponent, AccordionPanelComponent],
-  exports: [AccordionComponent, AccordionPanelComponent]
+    imports: [AccordionComponent, AccordionPanelComponent],
+    exports: [AccordionComponent, AccordionPanelComponent]
 })
-export class AccordionModule {
-  static forRoot(): ModuleWithProviders<AccordionModule> {
-    return { ngModule: AccordionModule, providers: [] };
-  }
-}
+export class AccordionModule {}

src/accordion/testing/accordion.component.spec.ts

@@ -4,8 +4,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AccordionConfig, AccordionModule } from '../index';
 
 @Component({
-  selector: 'accordion-test',
-  template: ''
+    selector: 'accordion-test',
+    template: '',
+    standalone: true
 })
 class TestAccordionComponent {
   oneAtATime = true;
@@ -75,12 +76,12 @@ describe('Component: Accordion', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [TestAccordionComponent],
-      imports: [
-        AccordionModule.forRoot(),
-        BrowserAnimationsModule
-      ]
-    });
+    imports: [
+        AccordionModule,
+        BrowserAnimationsModule,
+        TestAccordionComponent
+    ]
+});
     TestBed.overrideComponent(TestAccordionComponent, {
       set: { template: html }
     });