Standalone components #9433

README.md

@@ -16,10 +16,10 @@ See the component in action on [the demo page](https://ecodev.github.io/fab-spee
    ```bash
    yarn add @ecodev/fab-speed-dial
    ```
-2. In `app.module.ts` add the following modules to the `imports` array:
-   - `MatButtonModule`
-   - `MatIconModule`
-   - `EcoFabSpeedDialModule`
+2. In your standalone components add the following to the `imports` array:
+   - `EcoFabSpeedDialComponent`
+   - `EcoFabSpeedDialTriggerComponent`
+   - `EcoFabSpeedDialActionsComponent`
 
 ## Usage
 

projects/fab-speed-dial/src/lib/fab-speed-dial.spec.ts

@@ -1,9 +1,12 @@
 import {TestBed} from '@angular/core/testing';
-
-import {Direction, EcoFabSpeedDialActionsComponent, EcoFabSpeedDialComponent} from './fab-speed-dial';
+import {
+    Direction,
+    EcoFabSpeedDialActionsComponent,
+    EcoFabSpeedDialComponent,
+    EcoFabSpeedDialTriggerComponent,
+} from './fab-speed-dial';
 import {By} from '@angular/platform-browser';
 import {Component, ViewChild} from '@angular/core';
-import {EcoFabSpeedDialModule} from '@ecodev/fab-speed-dial';
 
 describe('FabSpeedDial', () => {
     it('should apply direction class based on direction', () => {
@@ -136,7 +139,7 @@ describe('FabSpeedDial', () => {
         </div>
     `,
     standalone: true,
-    imports: [EcoFabSpeedDialModule],
+    imports: [EcoFabSpeedDialActionsComponent, EcoFabSpeedDialTriggerComponent, EcoFabSpeedDialComponent],
 })
 class TestAppComponent {
     @ViewChild(EcoFabSpeedDialActionsComponent)

projects/fab-speed-dial/src/public-api.ts

@@ -8,5 +8,3 @@ export {
     Direction,
     AnimationMode,
 } from './lib/fab-speed-dial';
-
-export {EcoFabSpeedDialModule} from './lib/fab-speed-dial.module';

src/app/app.component.spec.ts

@@ -12,7 +12,6 @@ import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatCardModule} from '@angular/material/card';
 
 import {AppComponent} from './app.component';
-import {EcoFabSpeedDialModule} from '@ecodev/fab-speed-dial';
 
 describe('AppComponent', () => {
     let component: AppComponent;
@@ -21,8 +20,6 @@ describe('AppComponent', () => {
     beforeEach(async () => {
         await TestBed.configureTestingModule({
             imports: [
-                EcoFabSpeedDialModule,
-
                 MatIconModule,
                 MatButtonModule,
                 MatButtonToggleModule,
@@ -34,8 +31,8 @@ describe('AppComponent', () => {
                 MatTooltipModule,
                 MatToolbarModule,
                 FormsModule,
+                AppComponent,
             ],
-            declarations: [AppComponent],
         }).compileComponents();
         fixture = TestBed.createComponent(AppComponent);
         component = fixture.componentInstance;

src/app/app.component.ts

@@ -1,10 +1,36 @@
 import {Component} from '@angular/core';
-import {AnimationMode, Direction} from '@ecodev/fab-speed-dial';
+import {
+    AnimationMode,
+    Direction,
+    EcoFabSpeedDialActionsComponent,
+    EcoFabSpeedDialComponent,
+    EcoFabSpeedDialTriggerComponent,
+} from '@ecodev/fab-speed-dial';
+import {MatIconModule} from '@angular/material/icon';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {FormsModule} from '@angular/forms';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatCardModule} from '@angular/material/card';
+import {MatButtonModule} from '@angular/material/button';
+import {MatToolbarModule} from '@angular/material/toolbar';
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
+    standalone: true,
+    imports: [
+        MatToolbarModule,
+        MatButtonModule,
+        MatCardModule,
+        MatRadioModule,
+        FormsModule,
+        MatSlideToggleModule,
+        MatIconModule,
+        EcoFabSpeedDialComponent,
+        EcoFabSpeedDialTriggerComponent,
+        EcoFabSpeedDialActionsComponent,
+    ],
 })
 export class AppComponent {
     private _fixed = false;

src/main.ts

@@ -1,13 +1,39 @@
-import {enableProdMode} from '@angular/core';
-import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {enableProdMode, importProvidersFrom} from '@angular/core';
 
-import {AppModule} from './app/app.module';
 import {environment} from './environments/environment';
+import {AppComponent} from './app/app.component';
+import {FormsModule} from '@angular/forms';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatCardModule} from '@angular/material/card';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatInputModule} from '@angular/material/input';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {bootstrapApplication, BrowserModule} from '@angular/platform-browser';
 
 if (environment.production) {
     enableProdMode();
 }
 
-platformBrowserDynamic()
-    .bootstrapModule(AppModule)
-    .catch(err => console.error(err));
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(
+            BrowserModule,
+            MatIconModule,
+            MatButtonModule,
+            MatButtonToggleModule,
+            MatInputModule,
+            MatRadioModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatSlideToggleModule,
+            MatTooltipModule,
+            MatToolbarModule,
+            FormsModule,
+        ),
+    ],
+}).catch(err => console.error(err));