-
Notifications
You must be signed in to change notification settings - Fork 772
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ngStyle conflict with ngStyle.alias #273
Comments
An even simply example:
|
@alexfung888 - While the ngStyle Wiki says styles will be merged. Let me confirm again Angular core expectations. |
@ThomasBurleson Any progress on this one ? |
@ThomasBurleson will this be fixed in the upcoming release? |
@mackelito This fix will be available in Beta.10 (or new RC1 if we can overwrite the existing invalid one). |
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed * only ngStyle and ngClass selectors support responsive suffices * now use of raw `style` attribute will NOT instantiate a StyleDirective * now use of raw `class` attribute will NOT instantiate a ClassDirective * The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive * The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive * Added missing [ngStyle.md] selector * Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries Fixes #410, #408, #273. Closes #418. BREAKING CHANGES * **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices. ```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> ```
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed * only ngStyle and ngClass selectors support responsive suffices * now use of raw `style` attribute will NOT instantiate a StyleDirective * now use of raw `class` attribute will NOT instantiate a ClassDirective * The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive * The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive * Added missing [ngStyle.md] selector * Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries Fixes #410, #408, #273. Closes #418. BREAKING CHANGES * **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices. ```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> ```
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed * only ngStyle and ngClass selectors support responsive suffices * now use of raw `style` attribute will NOT instantiate a StyleDirective * now use of raw `class` attribute will NOT instantiate a ClassDirective * The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive * The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive * Added missing [ngStyle.md] selector * Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries Fixes #410, #408, #273. Closes #418. BREAKING CHANGES * **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices. ```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> ```
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed * only ngStyle and ngClass selectors support responsive suffices * now use of raw `style` attribute will NOT instantiate a StyleDirective * now use of raw `class` attribute will NOT instantiate a ClassDirective * The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive * The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive * Added missing [ngStyle.md] selector * Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries Fixes #410, #408, #273. Closes #418. BREAKING CHANGES * **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices. ```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> ```
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed * only ngStyle and ngClass selectors support responsive suffices * now use of raw `style` attribute will NOT instantiate a StyleDirective * now use of raw `class` attribute will NOT instantiate a ClassDirective * The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive * The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive * Added missing [ngStyle.md] selector * Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries Fixes #410, #408, #273. Closes #418. BREAKING CHANGES * **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices. ```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> ```
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed * only ngStyle and ngClass selectors support responsive suffices * now use of raw `style` attribute will NOT instantiate a StyleDirective * now use of raw `class` attribute will NOT instantiate a ClassDirective * The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive * The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive * Added missing [ngStyle.md] selector * Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries Fixes #410, #408, #273. Closes #418. BREAKING CHANGES * **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices. ```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> ```
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed * only ngStyle and ngClass selectors support responsive suffices * now use of raw `style` attribute will NOT instantiate a StyleDirective * now use of raw `class` attribute will NOT instantiate a ClassDirective * The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive * The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive * Added missing [ngStyle.md] selector * Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries Fixes #410, #408, #273. Closes #418. BREAKING CHANGES * **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices. ```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> ```
The latest nightly build provides fixes for ngStyle.
<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 Note that the
Using
|
This is now working similar in functionality to [ngStyle] in core.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Supposedly they are independent
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.
The text was updated successfully, but these errors were encountered: