added lazy script loading service

nj-coder · nj-coder · commit 2c1b10d401fc · 2019-10-27T13:40:27.000+11:00
diff --git a/src/app/pages/home/timeline/timeline.component.scss b/src/app/pages/home/timeline/timeline.component.scss
@@ -9,7 +9,7 @@
     left: 50%;
     width: 1px;
     height: 100%;
-    background: red;
+    background: var(--app-grey);
   }
 
   .timeline-item-wrapper {
@@ -44,6 +44,10 @@
         }
       }
 
+      &.position {
+        border-top: 2px solid red;
+      }
+
       .item-head {
         border-bottom: 1px solid var(--app-grey);
         padding-bottom: 2px;
diff --git a/src/app/pages/home/timeline/timeline.component.ts b/src/app/pages/home/timeline/timeline.component.ts
@@ -6,7 +6,9 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./timeline.component.scss']
 })
 export class TimelineComponent implements OnInit {
+  timelineItems = [{
 
+  }];
   constructor() { }
 
   ngOnInit() {
diff --git a/src/app/pages/nj-timepicker/nj-timepicker.component.ts b/src/app/pages/nj-timepicker/nj-timepicker.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { LazyLoadingServiceService } from 'src/app/services/LazyLoadingService/lazy-loading-service.service';
 
 @Component({
   selector: 'app-nj-timepicker',
@@ -7,9 +8,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class NjTimepickerComponent implements OnInit {
 
-  constructor() { }
+  constructor(private lazyLoadService: LazyLoadingServiceService) { }
 
   ngOnInit() {
+    /* Usage */
+    this.lazyLoadService.loadScript('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js').subscribe(() => {
+      // code
+    });
   }
 
 }
diff --git a/src/app/services/LazyLoadingService/lazy-loading-service.service.ts b/src/app/services/LazyLoadingService/lazy-loading-service.service.ts
@@ -0,0 +1,53 @@
+import { Injectable, Inject } from '@angular/core';
+import { ReplaySubject, Observable } from 'rxjs';
+import { DOCUMENT } from '@angular/common';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LazyLoadingServiceService {
+
+  _loadedLibraries: { [url: string]: ReplaySubject<any> } = {};
+
+  constructor(@Inject(DOCUMENT) private readonly document: any) { }
+
+  loadScript(url: string): Observable<any> {
+    if (this._loadedLibraries[url]) {
+      return this._loadedLibraries[url].asObservable();
+    }
+
+    this._loadedLibraries[url] = new ReplaySubject();
+
+    const script = this.document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = url;
+    script.onload = () => {
+      this._loadedLibraries[url].next();
+      this._loadedLibraries[url].complete();
+    };
+
+    this.document.body.appendChild(script);
+
+    return this._loadedLibraries[url].asObservable();
+  }
+
+  loadStyle(url: string): Observable<any> {
+    if (this._loadedLibraries[url]) {
+      return this._loadedLibraries[url].asObservable();
+    }
+
+    this._loadedLibraries[url] = new ReplaySubject();
+
+    const script = this.document.createElement('link');
+    script.rel = 'stylesheet';
+    script.href = url;
+    script.onload = () => {
+      this._loadedLibraries[url].next();
+      this._loadedLibraries[url].complete();
+    };
+
+    this.document.body.appendChild(script);
+
+    return this._loadedLibraries[url].asObservable();
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`left: 50%;`
`10`	`10`	`width: 1px;`
`11`	`11`	`height: 100%;`
`12`		`- background: red;`
	`12`	`+ background: var(--app-grey);`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`.timeline-item-wrapper {`
`@@ -44,6 +44,10 @@`
`44`	`44`	`}`
`45`	`45`	`}`
`46`	`46`
	`47`	`+ &.position {`
	`48`	`+ border-top: 2px solid red;`
	`49`	`+ }`
	`50`	`+`
`47`	`51`	`.item-head {`
`48`	`52`	`border-bottom: 1px solid var(--app-grey);`
`49`	`53`	`padding-bottom: 2px;`