ngStyle conflict with ngStyle.alias

[alexfung888]

Supposedly they are independent

<div
  [ngStyle]="{'transform': slideStyleString, 'transition': 'transform 0.75s ease-in-out'}"
  [ngStyle.xs]="{'color': 'green'}"
>TESTING</div>

However, if you can the value of slideStyleString above, the color will be lost.

Problem exists in 2.0.0-beta.7 and 2.0.0-beta.8.
Problem not present in 2.0.0-rc.1

See plunker. HTML is in src/app/test-app.ts
The first DIV stays in color. Click the slide out button and the second DIV loses color and turns black.

[alexfung888]

An even simply example:

<div
  [ngStyle]="{'fontSize': sizeString}"
  [ngStyle.xs]="{'color': 'green'}"
  [ngStyle.sm]="{'color': 'red'}"
  [ngStyle.md]="{'color': 'blue'}"
  [ngStyle.lg]="{'color': 'purple'}"
  [ngStyle.xl]="{'color': 'pink'}"
>TESTING</div>
<button (click)='sizeString="20pt"'>Size 20</button>
<button (click)='sizeString="10pt"'>Size 10</button>   

[ThomasBurleson]

@alexfung888 - While the ngStyle Wiki says styles will be merged. Let me confirm again Angular core expectations.

[M-Adoo]

@ThomasBurleson Any progress on this one ?

[mackelito]

@ThomasBurleson will this be fixed in the upcoming release?

[ThomasBurleson]

@mackelito This fix will be available in Beta.10 (or new RC1 if we can overwrite the existing invalid one).