Refactor module to include a configuration when calling #forRoot

README.md

@@ -87,6 +87,8 @@ After that, you can use the `ngx-skeleton-loader` components in your templates,
 
 Also, you can import the module in your app by calling `NgxSkeletonLoaderModule.forRoot()` when adding it. So it will be available across your Angular application.
 
+Importing the module this way also allows you to globally configure the default values for the `ngx-skeleton-loader` components in your application, in case you need some different default values for your app.
+
 ```typescript
 ...
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -98,7 +100,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
   ],
   imports: [
     ...
-    NgxSkeletonLoaderModule.forRoot(),
+    NgxSkeletonLoaderModule.forRoot({ animation: 'pulse', loadingText: 'This item is actually loading...' }),
     ...
   ],
   providers: [],
@@ -112,6 +114,7 @@ export class YourAppComponent {}
 ```html
 <div class="item">
   <ngx-skeleton-loader count="5" appearance="circle"></ngx-skeleton-loader>
+  <!-- above line will produce the rendering of 5 circles with the pulse animation and the aria-valuetext attribute set with "This item is actually loading..." -->
 </div>
 ```
 
@@ -125,7 +128,8 @@ You can also define which appearance want to use in your skeleton loader by pass
 
 ### Options
 
-- `''` - _default_: it will use it `''` as appearance. At the end, it will render like a line, but line is not a expected appearance to be passed;
+- `''` - _default_: it will use it `''` as appearance. At the end, it will render like a line;
+- `line`: it will render like a line. This is the same behavior as passing an empty string;
 - `circle`: it will use `circle` as appearance. Great for avatar skeletons, for example :);
 
 ## Animations

projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader-config.types.ts

@@ -0,0 +1,18 @@
+import { InjectionToken } from '@angular/core';
+
+export type NgxSkeletonLoaderConfigTheme = {
+  // This is required since ngStyle is using `any` as well
+  // More details in https://angular.io/api/common/NgStyle
+  // tslint:disable-next-line: no-any
+  [k: string]: any;
+} | null;
+
+export interface NgxSkeletonLoaderConfig {
+  appearance: 'circle' | 'line' | '';
+  animation: 'progress' | 'progress-dark' | 'pulse' | 'false' | false;
+  theme: NgxSkeletonLoaderConfigTheme;
+  loadingText: string;
+  count: number;
+}
+
+export const NGX_SKELETON_LOADER_CONFIG = new InjectionToken<NgxSkeletonLoaderConfig>('ngx-skeleton-loader.config');

projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.spec.ts

@@ -103,7 +103,7 @@ describe('NgxSkeletonLoaderComponent', () => {
   it('should console errors if `appearance` is an invalid option and is running in development mode', () => {
     expect(console.error).toHaveBeenCalledWith(
       // tslint:disable-next-line: max-line-length
-      `\`NgxSkeletonLoaderComponent\` need to receive 'appearance' as: circle or empty string. Forcing default to "''".`,
+      `\`NgxSkeletonLoaderComponent\` need to receive 'appearance' as: circle or line or empty string. Forcing default to "''".`,
     );
   });
 

projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.ts

@@ -8,8 +8,15 @@ import {
   ChangeDetectionStrategy,
   OnChanges,
   SimpleChanges,
+  Optional,
+  Inject,
 } from '@angular/core';
 import { start, end } from 'perf-marks/marks';
+import {
+  NgxSkeletonLoaderConfig,
+  NgxSkeletonLoaderConfigTheme,
+  NGX_SKELETON_LOADER_CONFIG,
+} from './ngx-skeleton-loader-config.types';
 
 @Component({
   selector: 'ngx-skeleton-loader',
@@ -24,24 +31,31 @@ export class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDest
   static ngAcceptInputType_animation: boolean | string;
 
   @Input()
-  count = 1;
+  count: NgxSkeletonLoaderConfig['count'];
 
   @Input()
-  loadingText = 'Loading...';
+  loadingText: NgxSkeletonLoaderConfig['loadingText'];
 
   @Input()
-  appearance: 'circle' | '' = '';
+  appearance: NgxSkeletonLoaderConfig['appearance'];
 
   @Input()
-  animation: 'progress' | 'progress-dark' | 'pulse' | 'false' | false = 'progress';
+  animation: NgxSkeletonLoaderConfig['animation'];
 
-  // This is required since ngStyle is using `any` as well
-  // More details in https://angular.io/api/common/NgStyle
-  // tslint:disable-next-line: no-any
-  @Input() theme: { [k: string]: any } = {};
+  @Input()
+  theme: NgxSkeletonLoaderConfigTheme;
 
   // tslint:disable-next-line: no-any
-  items: Array<any> = [];
+  items: Array<any>;
+
+  constructor(@Inject(NGX_SKELETON_LOADER_CONFIG) @Optional() config?: NgxSkeletonLoaderConfig) {
+    this.appearance = config?.appearance ?? 'line';
+    this.animation = config?.animation ?? 'progress';
+    this.theme = config?.theme ?? null;
+    this.loadingText = config?.loadingText ?? 'Loading...';
+    this.count = config?.count ?? 1;
+    this.items = [];
+  }
 
   ngOnInit() {
     start('NgxSkeletonLoader:Rendered');
@@ -61,7 +75,6 @@ export class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDest
       }
       this.count = 1;
     }
-
     this.items.length = this.count;
 
     const allowedAnimations = ['progress', 'progress-dark', 'pulse', 'false'];
@@ -77,11 +90,11 @@ export class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDest
       this.animation = 'progress';
     }
 
-    if (['circle', ''].indexOf(String(this.appearance)) === -1) {
+    if (['circle', 'line', ''].indexOf(String(this.appearance)) === -1) {
       // Shows error message only in Development
       if (isDevMode()) {
         console.error(
-          `\`NgxSkeletonLoaderComponent\` need to receive 'appearance' as: circle or empty string. Forcing default to "''".`,
+          `\`NgxSkeletonLoaderComponent\` need to receive 'appearance' as: circle or line or empty string. Forcing default to "''".`,
         );
       }
       this.appearance = '';

projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.module.ts

@@ -1,17 +1,19 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { NgxSkeletonLoaderComponent } from './ngx-skeleton-loader.component';
 import { CommonModule } from '@angular/common';
 
+import { NgxSkeletonLoaderComponent } from './ngx-skeleton-loader.component';
+import { NgxSkeletonLoaderConfig, NGX_SKELETON_LOADER_CONFIG } from './ngx-skeleton-loader-config.types';
+
 @NgModule({
   declarations: [NgxSkeletonLoaderComponent],
   imports: [CommonModule],
   exports: [NgxSkeletonLoaderComponent],
 })
-
 export class NgxSkeletonLoaderModule {
-  static forRoot(): ModuleWithProviders<NgxSkeletonLoaderModule> {
+  static forRoot(config?: Partial<NgxSkeletonLoaderConfig>): ModuleWithProviders<NgxSkeletonLoaderModule> {
     return {
       ngModule: NgxSkeletonLoaderModule,
+      providers: [{ provide: NGX_SKELETON_LOADER_CONFIG, useValue: config }],
     };
   }
 }

projects/ngx-skeleton-loader/src/public-api.ts

@@ -4,3 +4,4 @@
 
 export * from './lib/ngx-skeleton-loader.component';
 export * from './lib/ngx-skeleton-loader.module';
+export * from './lib/ngx-skeleton-loader-config.types';