From 4be5cef18a46d543d451d5a49fb9809da8e37f73 Mon Sep 17 00:00:00 2001
From: CaerusKaru <caerus.karu@gmail.com>
Date: Tue, 18 Dec 2018 12:32:37 -0600
Subject: [PATCH] fix(ngStyle): should work with preexisting styles (#939)

---
 src/lib/extended/style/style.spec.ts | 13 +++++++++++++
 src/lib/extended/style/style.ts      |  8 ++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/lib/extended/style/style.spec.ts b/src/lib/extended/style/style.spec.ts
index f25aed40e..a313a5d90 100644
--- a/src/lib/extended/style/style.spec.ts
+++ b/src/lib/extended/style/style.spec.ts
@@ -144,6 +144,18 @@ describe('style directive', () => {
     matchMedia.activate('xs');
     expectNativeEl(fixture, {fontSize: 19}).toHaveStyle({'font-size': '19px'}, styler);
   });
+
+  it('should work with just ngStyle and preexisting styles', () => {
+    createTestComponent(`
+      <div style="background-color: red; height: 100px; width: 100px;" [ngStyle]="divStyle">
+        First div
+      </div>
+    `);
+    expectNativeEl(fixture).toHaveStyle({'background-color': 'red'}, styler);
+    expectNativeEl(fixture).toHaveStyle({'height': '100px'}, styler);
+    expectNativeEl(fixture).toHaveStyle({'width': '100px'}, styler);
+    expectNativeEl(fixture).toHaveStyle({'border': '2px solid green'}, styler);
+  });
 });
 
 // *****************************************************************
@@ -156,6 +168,7 @@ describe('style directive', () => {
 })
 class TestStyleComponent {
   fontSize: number = 0;
+  divStyle = {'border': '2px solid green'};
 }
 
 
diff --git a/src/lib/extended/style/style.ts b/src/lib/extended/style/style.ts
index 5c9180264..ecb3ea05d 100644
--- a/src/lib/extended/style/style.ts
+++ b/src/lib/extended/style/style.ts
@@ -35,6 +35,7 @@ import {
 export class StyleDirective extends BaseDirective2 implements DoCheck {
 
   protected DIRECTIVE_KEY = 'ngStyle';
+  protected fallbackStyles: NgStyleMap = {};
 
   constructor(protected elementRef: ElementRef,
               protected styler: StyleUtils,
@@ -50,14 +51,13 @@ export class StyleDirective extends BaseDirective2 implements DoCheck {
       this.ngStyleInstance = new NgStyle(this.keyValueDiffers, this.elementRef, this.renderer);
     }
     this.init();
-    this.setValue(this.nativeElement.getAttribute('style') || '', '');
+    const styles = this.nativeElement.getAttribute('style') || '';
+    this.fallbackStyles = this.buildStyleMap(styles);
   }
 
   protected updateWithValue(value: any) {
     const styles = this.buildStyleMap(value);
-    const defaultStyles = this.marshal.getValue(this.nativeElement, this.DIRECTIVE_KEY, '');
-    const fallback = this.buildStyleMap(defaultStyles);
-    this.ngStyleInstance.ngStyle = {...fallback, ...styles};
+    this.ngStyleInstance.ngStyle = {...this.fallbackStyles, ...styles};
     this.ngStyleInstance.ngDoCheck();
   }