Update

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 12.0.0-beta.5
+
+- feat: Add `provideGalleryOptions` and `provideLightboxOptions` to set global options.
+- refactor: Use `useFactory` function to set the default options for `GALLERY_CONFIG` and `LIGHTBOX_CONFIG` token.
+
 ## 12.0.0-beta.4
 
 > See the [storybook documentation](https://ngx-gallery-next.netlify.app/)

projects/ng-gallery-demo/src/app/app.config.ts

@@ -2,7 +2,7 @@ import { ApplicationConfig } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
 import { provideRouter, withHashLocation } from '@angular/router';
-import { GALLERY_CONFIG, GalleryConfig } from 'ng-gallery';
+import { provideGalleryOptions } from 'ng-gallery';
 import { provideScrollbarOptions } from 'ngx-scrollbar';
 import { provideHighlightOptions } from 'ngx-highlightjs';
 import { progressInterceptor } from 'ngx-progressbar/http';
@@ -11,12 +11,9 @@ import { provideNgProgressRouter } from 'ngx-progressbar/router';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    {
-      provide: GALLERY_CONFIG,
-      useValue: {
-        imageSize: 'cover'
-      } as GalleryConfig
-    },
+    provideGalleryOptions({
+      imageSize: 'cover'
+    }),
     provideRouter(appRoutes, withHashLocation()),
     provideHighlightOptions({
       coreLibraryLoader: () => import('highlight.js/lib/core'),

projects/ng-gallery-demo/src/app/pages/lightbox-example/lightbox-example.component.ts

@@ -6,7 +6,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { Observable, map } from 'rxjs';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { Gallery, GalleryItem } from 'ng-gallery';
-import { Lightbox, LIGHTBOX_CONFIG, LightboxModule } from 'ng-gallery/lightbox';
+import { Lightbox, LightboxModule, provideLightboxOptions } from 'ng-gallery/lightbox';
 import { Pixabay } from '../../service/pixabay.service';
 import { FooterComponent } from '../../shared/footer/footer.component';
 import { HlCodeComponent } from '../../shared/hl-code/hl-code.component';
@@ -23,12 +23,9 @@ import { SectionTitleComponent } from '../../shared/section-title/section-title.
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   providers: [
-    {
-      provide: LIGHTBOX_CONFIG,
-      useValue: {
-        keyboardShortcuts: false
-      }
-    }
+    provideLightboxOptions({
+      keyboardShortcuts: false
+    })
   ],
   imports: [CommonModule, LightboxModule, SectionTitleComponent, NoteComponent, MatButtonModule, RouterLink, HlCodeComponent, FontAwesomeModule, FooterComponent]
 })

projects/ng-gallery/lightbox/src/lightbox.model.ts

@@ -1,6 +1,10 @@
-import { InjectionToken } from '@angular/core';
+import { InjectionToken, Provider } from '@angular/core';
+import { defaultConfig } from './lightbox.default';
 
-export const LIGHTBOX_CONFIG = new InjectionToken<LightboxConfig>('LIGHTBOX_CONFIG');
+export const LIGHTBOX_CONFIG: InjectionToken<LightboxConfig> = new InjectionToken<LightboxConfig>('LIGHTBOX_CONFIG', {
+  providedIn: 'root',
+  factory: () => defaultConfig
+});
 
 export interface LightboxConfig {
   backdropClass?: string | string[];
@@ -15,3 +19,10 @@ export interface LightboxConfig {
   startAnimationTime?: number;
   exitAnimationTime?: number;
 }
+
+export function provideLightboxOptions(options: LightboxConfig): Provider {
+  return {
+    provide: LIGHTBOX_CONFIG,
+    useValue: { ...defaultConfig, ...options }
+  }
+}

projects/ng-gallery/lightbox/src/lightbox.service.ts

@@ -1,4 +1,4 @@
-import { ComponentRef, Inject, Injectable, Optional } from '@angular/core';
+import { ComponentRef, inject, Injectable } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { Overlay, OverlayRef, OverlayConfig } from '@angular/cdk/overlay';
@@ -7,7 +7,6 @@ import { Gallery } from 'ng-gallery';
 import { Subject } from 'rxjs';
 
 import { LightboxConfig, LIGHTBOX_CONFIG } from './lightbox.model';
-import { defaultConfig } from './lightbox.default';
 import { LightboxComponent } from './lightbox.component';
 
 @Injectable({
@@ -18,18 +17,20 @@ export class Lightbox {
   /** Gallery overlay ref */
   private _overlayRef: OverlayRef;
 
+  private _gallery: Gallery = inject(Gallery);
+
+  private _overlay: Overlay = inject(Overlay);
+
+  private _sanitizer: DomSanitizer = inject(DomSanitizer);
+
   /** Global config */
-  private _config: LightboxConfig;
+  private _config: LightboxConfig = inject(LIGHTBOX_CONFIG);
 
   /** Stream that emits when lightbox is opened */
-  opened = new Subject<string>();
+  opened: Subject<string> = new Subject<string>();
 
   /** Stream that emits when lightbox is closed */
-  closed = new Subject<string>();
-
-  constructor(@Optional() @Inject(LIGHTBOX_CONFIG) config: LightboxConfig, private _gallery: Gallery, private _overlay: Overlay, private _sanitizer: DomSanitizer) {
-    this._config = config ? { ...defaultConfig, ...config } : defaultConfig;
-  }
+  closed: Subject<string> = new Subject<string>();
 
   /**
    * Set Lightbox Config

projects/ng-gallery/src/lib/models/config.model.ts

@@ -1,7 +1,18 @@
-import { InjectionToken, TemplateRef } from '@angular/core';
+import { InjectionToken, Provider, TemplateRef } from '@angular/core';
 import { BezierEasingOptions } from '../smooth-scroll';
+import { defaultConfig } from '../utils/gallery.default';
 
-export const GALLERY_CONFIG: InjectionToken<GalleryConfig> = new InjectionToken<GalleryConfig>('GALLERY_CONFIG');
+export const GALLERY_CONFIG: InjectionToken<GalleryConfig> = new InjectionToken<GalleryConfig>('GALLERY_CONFIG', {
+  providedIn: 'root',
+  factory: () => defaultConfig
+});
+
+export function provideGalleryOptions(options: GalleryConfig): Provider {
+  return {
+    provide: GALLERY_CONFIG,
+    useValue: { ...defaultConfig, ...options }
+  }
+}
 
 type ImageSize = 'contain' | 'cover';
 

projects/ng-gallery/src/lib/services/gallery.service.ts

@@ -1,8 +1,7 @@
-import { Inject, Injectable, Optional } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 
 import { GalleryRef } from './gallery-ref';
 import { GalleryConfig, GALLERY_CONFIG } from '../models/config.model';
-import { defaultConfig } from '../utils/gallery.default';
 
 @Injectable({
   providedIn: 'root'
@@ -13,11 +12,7 @@ export class Gallery {
   private readonly _instances = new Map<string, GalleryRef>();
 
   /** Global config */
-  config: GalleryConfig;
-
-  constructor(@Optional() @Inject(GALLERY_CONFIG) config: GalleryConfig) {
-    this.config = config ? { ...defaultConfig, ...config } : defaultConfig;
-  }
+  config: GalleryConfig = inject(GALLERY_CONFIG);
 
   /**
    * Get or create gallery by ID

projects/ng-gallery/src/test.ts

@@ -13,5 +13,5 @@ getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting(), {
     teardown: { destroyAfterEach: false }
-}
+  }
 );