feat: use injection token for module configuration (#195)

closes #194
ng-select · Jan 17, 2018 · f5e99f0 · f5e99f0
1 parent 5932fec
commit f5e99f0
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -61,9 +61,16 @@ import {NgSelectModule} from '@ng-select/ng-select';
 export class AppModule {
 }
 ```
-You can also configure global configuration and localization messages by using NgSelectModule.forRoot:
+You can also configure global configuration and localization messages by providing custom NG_SELECT_DEFAULT_CONFIG
 ```js
-NgSelectModule.forRoot({notFoundText: 'Your custom not found text', typeToSearchText: 'Your custom type to search text'})
+    providers: [
+        {
+            provide: NG_SELECT_DEFAULT_CONFIG,
+            useValue: {
+                notFoundText: 'Custom not found'
+            }
+        }
+    ]
 ```
 ### SystemJS
 If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.

diff --git a/demo/app/app.module.ts b/demo/app/app.module.ts
@@ -4,7 +4,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule, Routes } from '@angular/router';
-import { NgSelectModule } from '@ng-select/ng-select';
+import { NgSelectModule, NG_SELECT_DEFAULT_CONFIG } from '@ng-select/ng-select';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { AppComponent } from './app.component';
@@ -44,7 +44,7 @@ const appRoutes: Routes = [
 @NgModule({
     imports: [
         BrowserModule,
-        NgSelectModule.forRoot(),
+        NgSelectModule,
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
@@ -58,7 +58,13 @@ const appRoutes: Routes = [
         )
     ],
     providers: [
-        DataService
+        DataService,
+        {
+            provide: NG_SELECT_DEFAULT_CONFIG,
+            useValue: {
+                notFoundText: 'Custom not found'
+            }
+        }
     ],
     declarations: [
         AppComponent,

diff --git a/integration/src/app/app.module.ts b/integration/src/app/app.module.ts
@@ -4,7 +4,7 @@ import {FormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
 
 import {AppComponent} from './app.component';
-import {NgSelectModule} from '@ng-select/ng-select';
+import {NgSelectModule, NG_SELECT_DEFAULT_CONFIG} from '@ng-select/ng-select';
 
 @NgModule({
   declarations: [
@@ -14,9 +14,16 @@ import {NgSelectModule} from '@ng-select/ng-select';
     CommonModule,
     FormsModule,
     BrowserModule,
-    NgSelectModule.forRoot({clearAllText: ''})
+    NgSelectModule
+  ],
+  providers: [
+    {
+      provide: NG_SELECT_DEFAULT_CONFIG,
+      useValue: {
+          notFoundText: 'Custom not found'
+      }
+  }
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule {

diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,3 @@
-export { NgSelectComponent } from './ng-select/ng-select.component';
+export { NgSelectComponent, NG_SELECT_DEFAULT_CONFIG } from './ng-select/ng-select.component';
 export { NgSelectModule } from './ng-select/ng-select.module';
 export { NgOption, NgSelectConfig } from './ng-select/ng-select.types';
diff --git a/src/ng-select/ng-select.component.ts b/src/ng-select/ng-select.component.ts
@@ -17,9 +17,10 @@ import {
     ViewChild,
     ElementRef,
     ChangeDetectionStrategy,
-    Optional,
+    Inject,
     SimpleChanges,
-    Renderer2, ContentChildren, QueryList
+    Renderer2, ContentChildren, QueryList,
+    InjectionToken
 } from '@angular/core';
 
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -30,6 +31,8 @@ import { ItemsList } from './items-list';
 import { Subject } from 'rxjs/Subject';
 import { NgOptionComponent } from './ng-option.component';
 
+export const NG_SELECT_DEFAULT_CONFIG = new InjectionToken<NgSelectConfig>('ng-select-default-options');
+
 const NG_SELECT_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => NgSelectComponent),
@@ -133,7 +136,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
         return this.itemsList.value;
     }
 
-    constructor( @Optional() config: NgSelectConfig,
+    constructor(@Inject(NG_SELECT_DEFAULT_CONFIG) config: NgSelectConfig,
         private changeDetectorRef: ChangeDetectorRef,
         private elementRef: ElementRef,
         private renderer: Renderer2
@@ -669,9 +672,6 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
     }
 
     private mergeGlobalConfig(config: NgSelectConfig) {
-        if (!config) {
-            config = new NgSelectConfig();
-        }
         this.notFoundText = this.notFoundText || config.notFoundText;
         this.typeToSearchText = this.typeToSearchText || config.typeToSearchText;
         this.addTagText = this.addTagText || config.addTagText;

diff --git a/src/ng-select/ng-select.module.ts b/src/ng-select/ng-select.module.ts
@@ -1,10 +1,9 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { NgSelectComponent } from './ng-select.component';
+import { NgSelectComponent, NG_SELECT_DEFAULT_CONFIG } from './ng-select.component';
 import { NgOptionTemplateDirective, NgLabelTemplateDirective } from './ng-templates.directive';
 import { VirtualScrollModule } from './virtual-scroll.component';
 import { SpinnerComponent } from './spinner.component';
-import { NgSelectConfig } from './ng-select.types';
 import { NgOptionComponent } from './ng-option.component';
 
 @NgModule({
@@ -24,23 +23,20 @@ import { NgOptionComponent } from './ng-option.component';
         NgOptionComponent,
         NgOptionTemplateDirective,
         NgLabelTemplateDirective
+    ],
+    providers: [
+        {
+            provide: NG_SELECT_DEFAULT_CONFIG,
+            useValue: {
+                notFoundText: 'No items found',
+                typeToSearchText: 'Type to search',
+                addTagText: 'Add item',
+                loadingText: 'Loading...',
+                clearAllText: 'Clear all',
+                disableVirtualScroll: false
+            }
+        }
     ]
 })
-export class NgSelectModule {
-    static forRoot(config?: NgSelectConfig): ModuleWithProviders {
-        return provideModule(config);
-    }
-
-    static forChild(config?: NgSelectConfig): ModuleWithProviders {
-        return provideModule(config);
-    }
-}
+export class NgSelectModule { }
 
-export function provideModule(config: NgSelectConfig) {
-    return {
-        ngModule: NgSelectModule,
-        providers: [
-            {provide: NgSelectConfig, useValue: config}
-        ]
-    };
-}
diff --git a/src/ng-select/ng-select.types.ts b/src/ng-select/ng-select.types.ts
@@ -18,11 +18,11 @@ export enum KeyCode {
     Backspace = 8
 }
 
-export class NgSelectConfig {
-    notFoundText?= 'No items found';
-    typeToSearchText?= 'Type to search';
-    addTagText?= 'Add item';
-    loadingText?= 'Loading...';
-    clearAllText? = 'Clear all';
-    disableVirtualScroll?= false;
+export interface NgSelectConfig {
+    notFoundText?: string;
+    typeToSearchText?: string;
+    addTagText?: string;
+    loadingText?: string;
+    clearAllText?: string;
+    disableVirtualScroll?: boolean;
 }