fix(backdrop): Disable backdrop's background-color if backdrop is disabled

Author: mpalourdio

src/lib/components/ng-http-loader.component.html

@@ -2,7 +2,7 @@
      *ngIf="isVisible$ | async"
      [class.backdrop]="backdrop"
      [style.opacity]="opacity"
-     [style.backgroundColor]="backdropBackgroundColor">
+     [ngStyle]="{'background-color': backdrop ? backdropBackgroundColor : 'transparent'}">
 
     <ng-container *ngComponentOutlet="entryComponent"></ng-container>
 

src/test/components/ng-http-loader.component.spec.ts

@@ -799,7 +799,7 @@ describe('NgHttpLoaderComponent', () => {
         expect(element.style.opacity).toBe(`0${component.opacity}`);
     });
 
-    it('should have a default backdrop background color', () => {
+    it('should have a default backdrop background color if backdrop is true', () => {
         component.isVisible$ = of(true);
         fixture.detectChanges();
 
@@ -811,7 +811,7 @@ describe('NgHttpLoaderComponent', () => {
         expect(element.style.backgroundColor).toBe('rgb(241, 241, 241)');
     });
 
-    it('should be possible to override backdrop background color', () => {
+    it('should be possible to override backdrop background color when backdrop is true', () => {
         component.isVisible$ = of(true);
         component.backdropBackgroundColor = '#777777';
         fixture.detectChanges();
@@ -823,4 +823,17 @@ describe('NgHttpLoaderComponent', () => {
 
         expect(element.style.backgroundColor).toBe('rgb(119, 119, 119)');
     });
+
+    it('should not have a transparent backdrop background color if backdrop is false', () => {
+        component.isVisible$ = of(true);
+        component.backdrop = false;
+        fixture.detectChanges();
+
+        const element: HTMLElement = fixture
+            .debugElement
+            .query(By.css('#spinner'))
+            .nativeElement;
+
+        expect(element.style.backgroundColor).toBe('transparent');
+    });
 });