From 04613feaa44e80faba416bdef8c3abb455c68d69 Mon Sep 17 00:00:00 2001
From: Yuvraj Chauhan <Yuvraj.Chauhan@rishabhsoft.com>
Date: Thu, 5 Mar 2020 23:58:54 +0530
Subject: [PATCH] DEMO: Minor improvements.

---
 .../ngx-tester/src/app/app.component.html     | 21 ++++---------------
 projects/ngx-tester/src/app/app.component.ts  |  3 ++-
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/projects/ngx-tester/src/app/app.component.html b/projects/ngx-tester/src/app/app.component.html
index 424dd31..fbbb19a 100644
--- a/projects/ngx-tester/src/app/app.component.html
+++ b/projects/ngx-tester/src/app/app.component.html
@@ -2,8 +2,8 @@
 </app-header>
 <app-banner></app-banner>
 <div *ngIf="spinnerConfig['fullScreen']">
-  <ngx-spinner name='sample' [bdOpacity]="spinnerConfig['bdOpacity']" [bdColor]="spinnerConfig['bdColor']"
-    [size]="spinnerConfig['size']" [color]="spinnerConfig['color']" [type]="spinnerConfig['type']">
+  <ngx-spinner name='sample' [bdColor]="spinnerConfig['bdColor']" [size]="spinnerConfig['size']"
+    [color]="spinnerConfig['color']" [type]="spinnerConfig['type']" [template]="spinnerConfig['template']">
     <p style="color: white">{{loadingText}}</p>
   </ngx-spinner>
 </div>
@@ -31,10 +31,6 @@ <h3>Configuration</h3>
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field>
-        <input matInput placeholder="Backdrop Opacity" type="number" min="0" max="1.0" step="0.1"
-          [(ngModel)]="spinnerConfig['bdOpacity']">
-      </mat-form-field>
       <mat-form-field>
         <input matInput placeholder="Loading Text" type="text" [(ngModel)]="loadingText">
       </mat-form-field>
@@ -46,9 +42,8 @@ <h3>Configuration</h3>
     </div>
   </mat-grid-tile>
   <mat-grid-tile *ngIf="!spinnerConfig['fullScreen']">
-    <ngx-spinner name='sample' [bdOpacity]="spinnerConfig['bdOpacity']" [bdColor]="spinnerConfig['bdColor']"
-      [size]="spinnerConfig['size']" [color]="spinnerConfig['color']" [type]="spinnerConfig['type']"
-      [fullScreen]="false">
+    <ngx-spinner name='sample' [bdColor]="spinnerConfig['bdColor']" [size]="spinnerConfig['size']"
+      [color]="spinnerConfig['color']" [type]="spinnerConfig['type']" [fullScreen]="false">
       <p style="color: white">{{loadingText}}</p>
     </ngx-spinner>
   </mat-grid-tile>
@@ -58,14 +53,6 @@ <h3>Configuration</h3>
         <div class="code">
           <i class="tag-name">&lt;ngx-spinner</i>
 
-          <span class="input-wrapper">
-            <span class="input-name">bdOpacity</span>
-            =
-            <i class="input">
-              <span>{{spinnerConfig['bdOpacity']}}</span>
-            </i>
-          </span>
-
           <span class="input-wrapper">
             <span class="input-name">bdColor</span>
             =
diff --git a/projects/ngx-tester/src/app/app.component.ts b/projects/ngx-tester/src/app/app.component.ts
index d76482a..0956abd 100644
--- a/projects/ngx-tester/src/app/app.component.ts
+++ b/projects/ngx-tester/src/app/app.component.ts
@@ -41,7 +41,8 @@ export class AppComponent {
     size: 'medium',
     color: '#fff',
     type: 'ball-8bits',
-    fullScreen: true
+    fullScreen: true,
+    template: '<img src="http://pa1.narvii.com/5722/2c617cd9674417d272084884b61e4bb7dd5f0b15_hq.gif" />',
   };
 
   /**