fxFlex is not work well with NgStyle.lt-md and layout change

[Teamop]

Bug, feature request, or proposal:

Set fxFlex="5 1 auto" with [ngStyle.lt-md]="{'width.px': 90}", but in the final html, got style: flex: 1 1 0%

What is the expected behavior?

the flex should be the same in the html

What is the current behavior?

got style: flex: 1 1 0%

What are the steps to reproduce?

Providing a StackBlitz (or similar) is the best way to get the team to see your issue.
https://stackblitz.com/edit/angular-material-flex-layout-seed-76pec8, check the checkbox, then inspect the displayed span item next to it(items selected)

• StackBlitz starter using latest npm nightly release:

What is the use-case or motivation for changing an existing behavior?

the unexpected style change

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5.2.9
Angular material 5.2.4
Typescript 2.6.2

Is there anything else we should know?

After some research, checking the checkbox triggers the layout change, so _onLayoutChange() is invoked in flex , then set ngStyle to flex: 1 1 0%, then for NgStyle.lt-md, the code styles = extendObject({}, this._base.inputMap['ngStyle'], styles); (https://github.com/angular/flex-layout/blob/master/src/lib/extended/style/style.ts#L179) merges this style to override the original style

[CaerusKaru]

This is definitely an issue, and a puzzling one. As you pointed out, this is caused by how our wrapper for the NgStyle directive is merging styles. At some point, the default fxFlex value is inserted, and the ngStyle value is completely ignored. My suggested workaround in the meantime while we track this down is to have a wrapper div with the fxFlex and then an inner div with the ngStyle, if that works.

[Teamop]

@CaerusKaru Currently, I just use CSS flex to replace fxFlex as a workaround

[angular-automatic-lock-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.}