fix(core): Change DetectionStrategy to OnPush

Author: t-ho

README.md

@@ -22,7 +22,7 @@ Available spinners:
 * Show foreground loader with **progress bar**
 * The page content can be **blurred/frosted** while showing foreground loader. See [NgxUiLoaderBlurred](https://github.com/t-ho/ngx-ui-loader/wiki/NgxUiLoaderBlurred-directive) directive for more details
 * Show loader with different id for different tasks
-* Be able to add **logo**, **loading text**
+* Be able to add **logo** and **loading text**
 * Be able to change position of spinners, logo and loading text
 * Be able to change color and size of logo, spinners and progress bar
 * Be able to change the direction of progress bar
@@ -37,10 +37,6 @@ Live demo [here](https://ngx-ui-loader.stackblitz.io).
 
 Multiple loaders demo [here](https://ngx-ui-loader.stackblitz.io/multiloader).
 
-Minimal setup [here](https://stackblitz.com/edit/ngx-ui-loader-minimal-setup) on Stackblitz.
-
-Simple setup for multiple loaders [here](https://stackblitz.com/edit/ngx-ui-loader-multiloader-simple-setup) on Stackblitz.
-
 Live demo source code [here](https://stackblitz.com/edit/ngx-ui-loader) on Stackblitz.
 
 ## Installation
@@ -59,6 +55,8 @@ $ npm install --save ngx-ui-loader
 $ yarn add ngx-ui-loader
 ```
 
+*Please read [wiki page](https://github.com/t-ho/ngx-ui-loader/wiki) for more instructions*
+
 ### * For Angular 4 and 5, please use ngx-ui-loader version 1.2.x
 
 ```shell

projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.spec.ts

@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core
 
 import { NgxUiLoaderComponent } from './ngx-ui-loader.component';
 import { NgxUiLoaderService } from './ngx-ui-loader.service';
-import { SimpleChange } from '@angular/core';
+import { SimpleChange, ChangeDetectionStrategy } from '@angular/core';
 import { SPINNER, POSITION, PB_DIRECTION } from './ngx-ui-loader.enums';
 import { SPINNER_CONFIG } from './ngx-ui-loader.contants';
 import { PositionType } from './ngx-ui-loader.types';
@@ -43,6 +43,9 @@ describe('NgxUiLoaderComponent', () => {
         NgxUiLoaderService
       ]
     })
+      .overrideComponent(NgxUiLoaderComponent, {
+        set: { changeDetection: ChangeDetectionStrategy.Default }
+      })
       .compileComponents();
   }));
 
@@ -335,7 +338,7 @@ describe('NgxUiLoaderComponent', () => {
     });
     fixture.detectChanges();
     expect(console.error).toHaveBeenCalledWith(`[ngx-ui-loader] - bgsPosition ("invalid-position") is invalid. `
-    + `Default value "${component.defaultConfig.bgsPosition}" is used.`);
+      + `Default value "${component.defaultConfig.bgsPosition}" is used.`);
     expect(component.bgsPosition).toBe(component.defaultConfig.bgsPosition);
   });
 

projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, OnInit, OnChanges, SimpleChanges, SimpleChange, OnDestroy } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, SimpleChanges, SimpleChange,
+  OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl, SafeStyle } from '@angular/platform-browser';
 import { NgxUiLoaderService } from './ngx-ui-loader.service';
 import { Subscription } from 'rxjs';
@@ -14,7 +15,8 @@ import { coerceNumber } from './coercion';
 @Component({
   selector: 'ngx-ui-loader',
   templateUrl: './ngx-ui-loader.component.html',
-  styleUrls: ['./ngx-ui-loader.component.scss']
+  styleUrls: ['./ngx-ui-loader.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
 
@@ -71,6 +73,7 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
    */
   constructor(
     private domSanitizer: DomSanitizer,
+    private changeDetectorRef: ChangeDetectorRef,
     private ngxService: NgxUiLoaderService) {
 
     this.initialized = false;
@@ -119,24 +122,28 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
       .pipe(filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId))
       .subscribe(data => {
         this.showForeground = data.isShow;
+        this.changeDetectorRef.markForCheck();
       });
 
     this.showBackgroundWatcher = this.ngxService.showBackground$
       .pipe(filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId))
       .subscribe(data => {
         this.showBackground = data.isShow;
+        this.changeDetectorRef.markForCheck();
       });
 
     this.foregroundClosingWatcher = this.ngxService.foregroundClosing$
       .pipe(filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId))
       .subscribe(data => {
         this.foregroundClosing = data.isShow;
+        this.changeDetectorRef.markForCheck();
       });
 
     this.backgroundClosingWatcher = this.ngxService.backgroundClosing$
       .pipe(filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId))
       .subscribe(data => {
         this.backgroundClosing = data.isShow;
+        this.changeDetectorRef.markForCheck();
       });
     this.initialized = true;
   }