Responsive Style directive overwrites inline styles #197

ThomasBurleson · 2017-02-23T20:45:55Z

The StyleDirective provides features to set inline styles when specific breakpoints activate.

<div  fxLayout
      [style]="{'font-size': '10px', 'margin-left' : '10px'}"
      [style.xs]="{'font-size': '16px'}"
      [style.md]="{'font-size': '12px'}">
</div>

These inline styles do not, however, preserve existing inline styles... they do not merge. This creates a conflict with other inline style injectors within the flex-layout API (e.g. fxLayout).

… all existing * Deprecated use of `style` selectors to favor `ngStyle` selectors since the functionality extends NgStyle directive. * Restore default (non-activated) inline styles when breakpoint deactivates * Merge default inline styles with activated styles * `ngStyle` selectors support Object notations or raw strings (ala html inline styles) * e.g. Object notation = `[ngStyle="{'font-size.px': 10, color: 'rgb(0,0,0)', 'text-align':'left'}"` * e.g. Raw-string notation = `style="font-size:10px; color:black; text-align:left;"` BREAKING CHANGE: * [style.<alias>] selectors are deprecated in favor of [ngStyle.<alias>] selectors * default styles are merged with activated styles ```html <div fxLayout [style]="{'font-size': '10px', 'margin-left' : '13px'}" [style.xs]="{'font-size': '16px'}" [style.md]="{'font-size': '12px'}"> </div> ``` ```html <div fxLayout [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}" [ngStyle.xs]="{'font-size': '16px'}" [ngStyle.md]="{'font-size': '12px'}"> </div> ``` Fixes #197.

… all existing * Deprecated use of `style` selectors to favor `ngStyle` selectors since the functionality extends NgStyle directive. * Restore default (non-activated) inline styles when breakpoint deactivates * Merge default inline styles with activated styles * `ngStyle` selectors support Object notations or raw strings (ala html inline styles) * e.g. Object notation = `[ngStyle="{'font-size.px': 10, color: 'rgb(0,0,0)', 'text-align':'left'}"` * e.g. Raw-string notation = `style="font-size:10px; color:black; text-align:left;"` BREAKING CHANGE: * [style.<alias>] selectors are deprecated in favor of [ngStyle.<alias>] selectors * [class.<alias>] selectors are deprecated in favor of [ngClass.<alias>] selectors * default styles are merged with activated styles ```html <div fxLayout [class.xs]="['xs-1', 'xs-2']" [style]="{'font-size': '10px', 'margin-left' : '13px'}" [style.xs]="{'font-size': '16px'}" [style.md]="{'font-size': '12px'}"> </div> ``` ```html <div fxLayout [ngClass.xs]="['xs-1', 'xs-2']" [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}" [ngStyle.xs]="{'font-size': '16px'}" [ngStyle.md]="{'font-size': '12px'}"> </div> ``` Fixes #197.

…overwriting all existing * Deprecated use of `style` selectors to favor `ngStyle` selectors since the functionality extends NgStyle directive. * Restore default (non-activated) inline styles when breakpoint deactivates * Merge default inline styles with activated styles * `ngStyle` selectors support Object notations or raw strings (ala html inline styles) * e.g. Object notation = `[ngStyle="{'font-size.px': 10, color: 'rgb(0,0,0)', 'text-align':'left'}"` * e.g. Raw-string notation = `style="font-size:10px; color:black; text-align:left;"` BREAKING CHANGE: * `[style.<alias>]` selectors are deprecated in favor of `[ngStyle.<alias>]` selectors * `[class.<alias>]` selectors are deprecated in favor of `[ngClass.<alias>]` selectors * default styles are merged with activated styles ```html <div fxLayout [class.xs]="['xs-1', 'xs-2']" [style]="{'font-size': '10px', 'margin-left' : '13px'}" [style.xs]="{'font-size': '16px'}" [style.md]="{'font-size': '12px'}"> </div> ``` ```html <div fxLayout [ngClass.xs]="['xs-1', 'xs-2']" [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}" [ngStyle.xs]="{'font-size': '16px'}" [ngStyle.md]="{'font-size': '12px'}"> </div> ``` Fixes #197.

…overwriting all existing * Deprecated use of `style` selectors to favor `ngStyle` selectors since the functionality extends NgStyle directive. * Deprecated use of `class` selectors to favor `ngClass` selectors since the functionality extends NgClass directive. * ngStyle restores default (non-activated) inline styles when breakpoint deactivates * ngStyle merges default inline styles with activated styles * `ngStyle` selectors support Object notations or raw strings (ala html inline styles) * e.g. Object notation = `[ngStyle="{'font-size.px': 10, color: 'rgb(0,0,0)', 'text-align':'left'}"` * e.g. Raw-string notation = `style="font-size:10px; color:black; text-align:left;"` BREAKING CHANGE: * `[style.<alias>]` selectors are deprecated in favor of `[ngStyle.<alias>]` selectors * `[class.<alias>]` selectors are deprecated in favor of `[ngClass.<alias>]` selectors * default styles are merged with activated styles ```html <div fxLayout [class.xs]="['xs-1', 'xs-2']" [style]="{'font-size': '10px', 'margin-left' : '13px'}" [style.xs]="{'font-size': '16px'}" [style.md]="{'font-size': '12px'}"> </div> ``` ```html <div fxLayout [ngClass.xs]="['xs-1', 'xs-2']" [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}" [ngStyle.xs]="{'font-size': '16px'}" [ngStyle.md]="{'font-size': '12px'}"> </div> ``` Fixes #197.

…overwriting all existing * Deprecated use of `style` selectors to favor `ngStyle` selectors since the functionality extends NgStyle directive. * Deprecated use of `class` selectors to favor `ngClass` selectors since the functionality extends NgClass directive. * ngStyle restores default (non-activated) inline styles when breakpoint deactivates * ngStyle merges default inline styles with activated styles * `ngStyle` selectors support Object notations or raw strings (ala html inline styles) * e.g. Object notation = `[ngStyle="{'font-size.px': 10, color: 'rgb(0,0,0)', 'text-align':'left'}"` * e.g. Raw-string notation = `style="font-size:10px; color:black; text-align:left;"` * Add support to ngStyle for all **NgStyleType** type variations * Added `style-transforms.ts` utilities and tests * Refactored `_buildStyleMap()` method * Add use of DomSanitizer + SecurityContext.STYLE to safeguard all style values BREAKING CHANGE: * `[style.<alias>]` selectors are deprecated in favor of `[ngStyle.<alias>]` selectors * `[class.<alias>]` selectors are deprecated in favor of `[ngClass.<alias>]` selectors * default styles are merged with activated styles ```html <div fxLayout [class.xs]="['xs-1', 'xs-2']" [style]="{'font-size': '10px', 'margin-left' : '13px'}" [style.xs]="{'font-size': '16px'}" [style.md]="{'font-size': '12px'}"> </div> ``` ```html <div fxLayout [ngClass.xs]="['xs-1', 'xs-2']" [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}" [ngStyle.xs]="{'font-size': '16px'}" [ngStyle.md]="{'font-size': '12px'}"> </div> ``` Fixes #197.

…overwriting all existing * Deprecated use of `style` selectors to favor `ngStyle` selectors since the functionality extends **NgStyle** directive. * Deprecated use of `class` selectors to favor `ngClass` selectors since the functionality extends **NgClass** directive. * `ngStyle` restores default (non-activated) inline styles when breakpoint deactivates * `ngStyle` merges default inline styles with activated styles * `ngStyle` selectors support Object notations or raw strings (ala html inline styles) * e.g. Object notation = `[ngStyle="{'font-size.px': 10, color: 'rgb(0,0,0)', 'text-align':'left'}"` * e.g. Raw-string notation = `style="font-size:10px; color:black; text-align:left;"` * NOTE: delimiters for raw-strings must be `;`. * Add support to ngStyle for all **NgStyleType** type variations * Added `style-transforms.ts` utilities and tests * Refactored `_buildStyleMap()` method * Add use of **DomSanitizer** + **SecurityContext.STYLE** to safeguard all style values BREAKING CHANGE: * `[style.<alias>]` selectors are deprecated in favor of `[ngStyle.<alias>]` selectors * `[class.<alias>]` selectors are deprecated in favor of `[ngClass.<alias>]` selectors * default styles are merged with activated styles ```html <div fxLayout [class.xs]="['xs-1', 'xs-2']" [style]="{'font-size': '10px', 'margin-left' : '13px'}" [style.xs]="{'font-size': '16px'}" [style.md]="{'font-size': '12px'}"> </div> ``` ```html <div fxLayout [ngClass.xs]="['xs-1', 'xs-2']" [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}" [ngStyle.xs]="{'font-size': '16px'}" [ngStyle.md]="{'font-size': '12px'}"> </div> ``` Fixes #197.

…d styles * Add use of **DomSanitizer** + **SecurityContext.STYLE** to safeguard all style values * Deprecated use of `style` selectors to favor `ngStyle` selectors since the functionality extends **NgStyle** directive. * Deprecated use of `class` selectors to favor `ngClass` selectors since the functionality extends **NgClass** directive. * `ngStyle` restores default (non-activated) inline styles when breakpoint deactivates * `ngStyle` merges default inline styles with activated styles * `ngStyle` selectors support Object notations or raw strings (ala html inline styles) * e.g. Object notation = `[ngStyle="{'font-size.px': 10, color: 'rgb(0,0,0)', 'text-align':'left'}"` * e.g. Raw-string notation = `style="font-size:10px; color:black; text-align:left;"` * NOTE: delimiters for raw-strings must be `;`. * Add support to ngStyle for all **NgStyleType** type variations * Added `style-transforms.ts` utilities and tests * Refactored `_buildStyleMap()` method BREAKING CHANGE: * `[style.<alias>]` selectors are deprecated in favor of `[ngStyle.<alias>]` selectors * `[class.<alias>]` selectors are deprecated in favor of `[ngClass.<alias>]` selectors * default styles are merged with activated styles ```html <div fxLayout [class.xs]="['xs-1', 'xs-2']" [style]="{'font-size': '10px', 'margin-left' : '13px'}" [style.xs]="{'font-size': '16px'}" [style.md]="{'font-size': '12px'}"> </div> ``` ```html <div fxLayout [ngClass.xs]="['xs-1', 'xs-2']" [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}" [ngStyle.xs]="{'font-size': '16px'}" [ngStyle.md]="{'font-size': '12px'}"> </div> ``` Fixes #197.

…d styles * Add use of **DomSanitizer** + **SecurityContext.STYLE** to safeguard all style values * Deprecated use of `style` selectors to favor `ngStyle` selectors since the functionality extends **NgStyle** directive. * Deprecated use of `class` selectors to favor `ngClass` selectors since the functionality extends **NgClass** directive. * `ngStyle` restores default (non-activated) inline styles when breakpoint deactivates * `ngStyle` merges default inline styles with activated styles * `ngStyle` selectors support Object notations or raw strings (ala html inline styles) * e.g. Object notation = `[ngStyle]="{'font-size.px': 10, color: 'rgb(0,0,0)', 'text-align':'left'}"` * e.g. Raw-string notation = `style="font-size:10px; color:black; text-align:left;"` * NOTE: delimiters for raw-strings must be `;`. * Add support to ngStyle for all **NgStyleType** type variations * Added `style-transforms.ts` utilities and tests * Refactored `_buildStyleMap()` method BREAKING CHANGE: * `[style.<alias>]` selectors are deprecated in favor of `[ngStyle.<alias>]` selectors * `[class.<alias>]` selectors are deprecated in favor of `[ngClass.<alias>]` selectors * default styles are merged with activated styles ```html <div fxLayout [class.xs]="['xs-1', 'xs-2']" [style]="{'font-size': '10px', 'margin-left' : '13px'}" [style.xs]="{'font-size': '16px'}" [style.md]="{'font-size': '12px'}"> </div> ``` ```html <div fxLayout [ngClass.xs]="['xs-1', 'xs-2']" [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}" [ngStyle.xs]="{'font-size': '16px'}" [ngStyle.md]="{'font-size': '12px'}"> </div> ``` Fixes #197.

…d styles (#198) BREAKING CHANGE: * `[style.<alias>]` selectors are deprecated in favor of `[ngStyle.<alias>]` selectors * `[class.<alias>]` selectors are deprecated in favor of `[ngClass.<alias>]` selectors * default styles are merged with activated styles ```html <div fxLayout [class.xs]="['xs-1', 'xs-2']" [style]="{'font-size': '10px', 'margin-left' : '13px'}" [style.xs]="{'font-size': '16px'}" [style.md]="{'font-size': '12px'}"> </div> ``` ```html <div fxLayout [ngClass.xs]="['xs-1', 'xs-2']" [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}" [ngStyle.xs]="{'font-size': '16px'}" [ngStyle.md]="{'font-size': '12px'}"> </div> ``` Fixes #197.

…d styles (angular#198) BREAKING CHANGE: * `[style.<alias>]` selectors are deprecated in favor of `[ngStyle.<alias>]` selectors * `[class.<alias>]` selectors are deprecated in favor of `[ngClass.<alias>]` selectors * default styles are merged with activated styles ```html <div fxLayout [class.xs]="['xs-1', 'xs-2']" [style]="{'font-size': '10px', 'margin-left' : '13px'}" [style.xs]="{'font-size': '16px'}" [style.md]="{'font-size': '12px'}"> </div> ``` ```html <div fxLayout [ngClass.xs]="['xs-1', 'xs-2']" [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}" [ngStyle.xs]="{'font-size': '16px'}" [ngStyle.md]="{'font-size': '12px'}"> </div> ``` Fixes angular#197.

angular-automatic-lock-bot · 2019-09-04T18:02:31Z

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.}

ThomasBurleson modified the milestones: v2.0.0-rc.1, v2.0.0-rc.2 Feb 23, 2017

ThomasBurleson added bug enhancement labels Feb 23, 2017

ThomasBurleson self-assigned this Feb 23, 2017

ThomasBurleson mentioned this issue Feb 25, 2017

fix(ngStyle, ngClass): StyleDirective security fixes & merge activated styles #198

Merged

ThomasBurleson added the has pr A PR has been created to address this issue label Feb 25, 2017

kara closed this as completed in #198 Feb 27, 2017

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 4, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Responsive Style directive overwrites inline styles #197

Responsive Style directive overwrites inline styles #197

ThomasBurleson commented Feb 23, 2017

angular-automatic-lock-bot bot commented Sep 4, 2019

Responsive Style directive overwrites inline styles #197

Responsive Style directive overwrites inline styles #197

Comments

ThomasBurleson commented Feb 23, 2017

angular-automatic-lock-bot bot commented Sep 4, 2019