Merge pull request #12 from benshabatnoam/master

Custom template component

Author: victos

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:4200",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,23 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "problemMatcher": []
+    },
+    {
+      "type": "npm",
+      "script": "build",
+      "path": "projects/ng-busy/",
+      "problemMatcher": []
+    },
+    {
+      "type": "npm",
+      "script": "build",
+      "problemMatcher": []
+    }
+  ]
+}

package.json

@@ -52,4 +52,4 @@
     "ts-node": "~5.0.1",
     "tslint": "~5.9.1"
   }
-}
+}

projects/ng-busy/README.md

@@ -136,6 +136,7 @@ In other words, you may use flexible syntax:
 | minDuration | Optional | 0 | The amount of time to keep the indicator showing even if the busy thing was completed quicker. Specified in milliseconds.|
 | disableAnimation | Optional | false | Disable the animation when the spinner appear |
 | wrapperClass | Optional | 'ng-busy' | The name(s) of the CSS classes to be applied to the wrapper element of the indicator. |
+| templateNgStyle | Optional | { } | An object that will be assigned to the custom component assigned to `template` option, if one was configured (see example below in Overriding Defaults). |
 
 
 ## Overriding Defaults
@@ -157,7 +158,8 @@ import {CustomBusyComponent} from '...'
                 backdrop: false,
                 template: CustomBusyComponent,
                 delay: 200,
-                minDuration: 600
+                minDuration: 600,
+                templateNgStyle: { "background-color": "black" }
             }))
         ],
         declarations: [
@@ -176,7 +178,7 @@ export class AppModule
 @Component({
   selector: 'default-busy',
   template: `
-    <div class="ng-busy-default-wrapper">
+    <div class="ng-busy-default-wrapper" [ngStyle]="templateNgStyle">
           <div class="ng-busy-default-sign">
             <div class="ng-busy-default-spinner">
               <div class="bar1"></div>

projects/ng-busy/src/lib/model/busy-config.ts

@@ -4,6 +4,7 @@ import {InstanceConfigHolderService} from '../service/instance-config-holder.ser
 
 export class BusyConfig implements IBusyConfig {
   template: TemplateRef<any> | Type<any>;
+  templateNgStyle: {};
   delay: number;
   minDuration: number;
   backdrop: boolean;
@@ -54,6 +55,7 @@ export class DefaultBusyComponent {
 
 export interface IBusyConfig {
   template?: TemplateRef<any> | Type<any>;
+  templateNgStyle?: {};
   delay?: number;
   minDuration?: number;
   backdrop?: boolean;
@@ -65,6 +67,7 @@ export interface IBusyConfig {
 
 export const BUSY_CONFIG_DEFAULTS = {
   template: DefaultBusyComponent,
+  templateNgStyle: {},
   delay: 0,
   minDuration: 0,
   backdrop: true,

projects/ng-busy/src/lib/ng-busy.directive.ts

@@ -10,14 +10,14 @@ import {
   TemplateRef, Type,
   ViewContainerRef
 } from '@angular/core';
-import {ViewRef} from '@angular/core/src/linker/view_ref';
-import {BusyTrackerService} from './service/busy-tracker.service';
-import {BusyConfigHolderService} from './service/busy-config-holder.service';
-import {Subscription} from 'rxjs';
-import {IBusyConfig} from './model/busy-config';
-import {NgBusyComponent} from './component/ng-busy/ng-busy.component';
-import {InstanceConfigHolderService} from './service/instance-config-holder.service';
-import {isPromise} from './util/isPromise';
+import { ViewRef } from '@angular/core/src/linker/view_ref';
+import { BusyTrackerService } from './service/busy-tracker.service';
+import { BusyConfigHolderService } from './service/busy-config-holder.service';
+import { Subscription } from 'rxjs';
+import { IBusyConfig } from './model/busy-config';
+import { NgBusyComponent } from './component/ng-busy/ng-busy.component';
+import { InstanceConfigHolderService } from './service/instance-config-holder.service';
+import { isPromise } from './util/isPromise';
 
 @Directive({
   selector: '[ngBusy]',
@@ -43,17 +43,18 @@ export class NgBusyDirective implements DoCheck, OnDestroy {
   private isLoading = false;
   private busyEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
   public template: TemplateRef<any> | Type<any>;
+  public templateNgStyle: {};
   private _option: any;
 
   constructor(private configHolder: BusyConfigHolderService,
-              private instanceConfigHolder: InstanceConfigHolderService,
-              private resolver: ComponentFactoryResolver,
-              private tracker: BusyTrackerService,
-              private appRef: ApplicationRef,
-              private vcr: ViewContainerRef,
-              private element: ElementRef,
-              private renderer: Renderer2,
-              private injector: Injector) {
+    private instanceConfigHolder: InstanceConfigHolderService,
+    private resolver: ComponentFactoryResolver,
+    private tracker: BusyTrackerService,
+    private appRef: ApplicationRef,
+    private vcr: ViewContainerRef,
+    private element: ElementRef,
+    private renderer: Renderer2,
+    private injector: Injector) {
     this.onStartSubscription = tracker.onStartBusy.subscribe(() => {
       setTimeout(() => {
         this.recreateBusyIfNecessary();
@@ -88,22 +89,24 @@ export class NgBusyDirective implements DoCheck, OnDestroy {
   private recreateBusyIfNecessary() {
     if (!this.busyRef
       || this.template !== this.optionsNorm.template
+      || this.templateNgStyle !== this.optionsNorm.templateNgStyle
     ) {
       this.destroyComponents();
       this.template = this.optionsNorm.template;
+      this.templateNgStyle = this.optionsNorm.templateNgStyle;
       this.createBusy();
       this.busyEmitter.emit(this.isLoading);
     }
   }
 
   private normalizeOptions(options: any): IBusyConfig {
     if (!options) {
-      options = {busy: []};
+      options = { busy: [] };
     } else if (Array.isArray(options)
       || isPromise(options)
       || options instanceof Subscription
     ) {
-      options = {busy: options};
+      options = { busy: options };
     }
     options = Object.assign({}, this.configHolder.config, options);
     if (!Array.isArray(options.busy)) {
@@ -151,6 +154,7 @@ export class NgBusyDirective implements DoCheck, OnDestroy {
     }
     const factory = this.resolver.resolveComponentFactory(this.template);
     const componentRef = factory.create(injector);
+    componentRef.instance.templateNgStyle = this.options.templateNgStyle;
     this.componentViewRef = componentRef.hostView;
     this.appRef.attachView(this.componentViewRef);
     return [[componentRef.location.nativeElement]];

src/app/modules/ng-busy-demo/component/code-viewer/code-viewer.component.ts

@@ -58,6 +58,7 @@ export class CodeViewerComponent implements OnChanges {
     options['backdrop'] = config.backdrop;
     options['message'] = config.message;
     options['wrapperClass'] = config.wrapperClass;
+    options['templateNgStyle'] = config.templateNgStyle;
     let result = JSON.stringify(options);
     result = result.replace('{', `{template:${template},`);
     return result;

src/app/modules/ng-busy-demo/component/custom-busy-component/custom-busy-component.component.ts

@@ -1,11 +1,11 @@
-import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
-import {BUSY_CONFIG_DEFAULTS} from 'ng-busy';
-import {InstanceConfigHolderService} from '../../../../../../projects/ng-busy/src/lib/service/instance-config-holder.service';
+import { Component, Inject } from '@angular/core';
+import { BUSY_CONFIG_DEFAULTS } from 'ng-busy';
+import { InstanceConfigHolderService } from '../../../../../../projects/ng-busy/src/lib/service/instance-config-holder.service';
 
 @Component({
   selector: 'default-busy',
   template: `
-      <div style="background: url('../../assets/img/du.gif') no-repeat center 20px; background-size: 72px;">
+      <div style="background: url('../../assets/img/du.gif') no-repeat center 20px; background-size: 72px;" [ngStyle]="templateNgStyle">
           <div style="margin-top: 110px; text-align: center; font-size: 18px; font-weight: 700; line-height: 110px;">
               {{message}}
           </div>

src/app/modules/ng-busy-demo/component/options/options.component.css

@@ -5,3 +5,7 @@
 .c-checkbox {
     line-height: 36px;
 }
+
+#template-ng-style {
+    height: 100px;
+}

src/app/modules/ng-busy-demo/component/options/options.component.html

@@ -7,8 +7,7 @@
 <div class="form-group row">
     <label for="options-min-duration" class="col-sm-5 form-control-label">Min duration (ms)</label>
     <div class="col-sm-7">
-        <input type="number" class="form-control" id="options-min-duration" name="minDuration"
-               [(ngModel)]="data.minDuration">
+        <input type="number" class="form-control" id="options-min-duration" name="minDuration" [(ngModel)]="data.minDuration">
     </div>
 </div>
 <div class="form-group row">
@@ -25,12 +24,18 @@
         </select>
     </div>
 </div>
+<div class="form-group row" *ngIf="templateType === 'custom'">
+    <label for="template-ng-style" class="col-sm-5 form-control-label">TemplateNgStyle</label>
+    <div class="col-sm-7">
+        <textarea type="text" class="form-control" id="template-ng-style" name="message" [(ngModel)]="templateNgStyle"></textarea>
+    </div>
+</div>
 <div class="form-group row">
     <label class="col-sm-5 form-control-label">Backdrop</label>
     <div class="col-sm-7">
         <label class="c-input c-checkbox">
             <input type="checkbox" id="options-backdrop" #backdrop name="backdrop" (change)="changeBackdrop(backdrop)"
-                   checked>
+                checked>
             <span class="c-indicator"></span>
             Show
         </label>
@@ -48,4 +53,4 @@
 </div>
 <div class="col-sm-offset-5 col-sm-7">
     <button type="button" class="btn btn-secondary" (click)="playDemo()">Demo</button>
-</div>
+</div>