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));