Flex-layout: 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).

[ThomasBurleson]

The latest nightly build provides fixes for ngStyle.

See Plunkr Demo

<div
        [ngStyle]="{'fontSize': sizeString}"
        [ngStyle.xs]="{'color': 'green', 'fontSize': sizeString}"
        [ngStyle.sm]="{'color': 'red', 'fontSize': '12pt'}"
        [ngStyle.md]="{'color': 'blue'}"
        [ngStyle.lg]="{'color': 'purple'}"
        [ngStyle.xl]="{'color': 'pink'}" >
</div>

The responsive key can override a default property in ngStyle object and merge the responsive key/values with the initial default key values.

Note that the ngStyle.xs is the only breakpoint that will use dynamically changed font-sizes AND preserve the color. Otherwise the font-size will trigger the ngStyle to update and render WITHOUT color.

Per the ngStyle Directive in core, the ngStyle directive will replace anything in style; after first merging the initial style key-values into the any ngStyle key-values.

Using style + ngStyle

[ThomasBurleson]

This is now working similar in functionality to [ngStyle] in core.

This functionality is available in the nightly build and will be released to npm with the [upcoming] Beta.10 release.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}