Mark change detector for check after a resource string is loaded asynchronously (#243)

* Mark change detector for check after a resource string is loaded asynchronously

blackbaud/skyux2#933

* Removed temporary code used during local testing

Author: Blackbaud-PaulCrowder

runtime/i18n/resources.pipe.spec.ts

@@ -5,8 +5,13 @@ import { SkyAppResourcesPipe } from '@blackbaud/skyux-builder/runtime/i18n/resou
 
 describe('Resources pipe', () => {
   let resources: SkyAppResourcesService;
+  let changeDetector: any;
 
   beforeEach(() => {
+    changeDetector = {
+      markForCheck: jasmine.createSpy('markForCheck')
+    };
+
     resources = {
       getString: (name: string, ...args) => {
         let value: string;
@@ -23,19 +28,19 @@ describe('Resources pipe', () => {
   });
 
   it('should return the expected string', () => {
-    let pipe = new SkyAppResourcesPipe(resources);
+    let pipe = new SkyAppResourcesPipe(changeDetector, resources);
 
     expect(pipe.transform('hi')).toBe('hello');
   });
 
   it('should return the expected string formatted with the specified parameters', () => {
-    let pipe = new SkyAppResourcesPipe(resources);
+    let pipe = new SkyAppResourcesPipe(changeDetector, resources);
 
     expect(pipe.transform('hi', 'abc')).toBe('format me abc');
   });
 
   it('should cache strings that have been retrieved via the resource service', () => {
-    let pipe = new SkyAppResourcesPipe(resources);
+    let pipe = new SkyAppResourcesPipe(changeDetector, resources);
 
     const getStringSpy = spyOn(resources, 'getString').and.callThrough();
 
@@ -47,7 +52,7 @@ describe('Resources pipe', () => {
   });
 
   it('should consider format args as part of the cache key', () => {
-    let pipe = new SkyAppResourcesPipe(resources);
+    let pipe = new SkyAppResourcesPipe(changeDetector, resources);
 
     const getStringSpy = spyOn(resources, 'getString').and.callThrough();
 
@@ -61,4 +66,14 @@ describe('Resources pipe', () => {
     expect(getStringSpy).toHaveBeenCalledTimes(2);
   });
 
+  it('should mark the change detector for check when the string is loaded asynchronously', () => {
+    let pipe = new SkyAppResourcesPipe(changeDetector, resources);
+
+    pipe.transform('hi');
+    pipe.transform('hi');
+    pipe.transform('hi');
+
+    expect(changeDetector.markForCheck).toHaveBeenCalledTimes(1);
+  });
+
 });

runtime/i18n/resources.pipe.ts

@@ -1,5 +1,10 @@
+import {
+  ChangeDetectorRef,
+  Pipe,
+  PipeTransform
+} from '@angular/core';
+
 import { SkyAppResourcesService } from './resources.service';
-import { Pipe, PipeTransform } from '@angular/core';
 
 /**
  * An Angular pipe for displaying a resource string.
@@ -12,6 +17,7 @@ export class SkyAppResourcesPipe implements PipeTransform {
   private resourceCache: {[key: string]: any} = {};
 
   constructor(
+    private changeDetector: ChangeDetectorRef,
     private resourcesSvc: SkyAppResourcesService
   ) { }
 
@@ -25,7 +31,10 @@ export class SkyAppResourcesPipe implements PipeTransform {
     if (!(cacheKey in this.resourceCache)) {
       this.resourcesSvc
         .getString(name, ...args)
-        .subscribe(result => this.resourceCache[cacheKey] = result);
+        .subscribe((result) => {
+          this.resourceCache[cacheKey] = result;
+          this.changeDetector.markForCheck();
+        });
     }
 
     return this.resourceCache[cacheKey];