This div is initially saveable, unchanged, and special
-
- After setClasses(), the classes are "{{classDiv.className}}"
-
+
+ |
+ |
+
+
+
+
+ This div should be {{ canSave ? "": "not"}} saveable,
+ {{ isUnchanged ? "unchanged" : "modified" }} and,
+ {{ isSpecial ? "": "not"}} special after clicking "refresh".
+
This div is special
@@ -429,38 +437,32 @@ bindon-ngModel
NgStyle Binding
-
-
-
Change style of this text!
-
- |
- |
-
-
-
Style set to: '{{styleP.style.cssText}}'
-
-
-
This div is x-large.
-
Use setStyles() - CSS property names
-
setStyles returns {{setStyles() | json}}
+
[ngStyle] binding to `currentStyles` - CSS property names
+
currentStyles returns {{currentStyles | json}}
-
- This div is italic, normal weight, and extra large (24px).
+
+ This div is initially italic, normal weight, and extra large (24px).
-
After setStyles(), the DOM confirms that the styles are
-
- {{getStyles(styleDiv)}}
- .
-
+
+ |
+ |
+
+
+
+
+ This div should be {{ canSave ? "italic": "plain"}},
+ {{ isUnchanged ? "normal weight" : "bold" }} and,
+ {{ isSpecial ? "extra large": "normal size"}} after clicking "refresh".
+ top
diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.ts b/public/docs/_examples/template-syntax/ts/app/app.component.ts
index 45ab0fc695..eb9b27ca52 100644
--- a/public/docs/_examples/template-syntax/ts/app/app.component.ts
+++ b/public/docs/_examples/template-syntax/ts/app/app.component.ts
@@ -25,6 +25,8 @@ export class AppComponent implements AfterViewInit, OnInit {
ngOnInit() {
this.refreshHeroes();
+ this.setCurrentClasses();
+ this.setCurrentStyles();
}
ngAfterViewInit() {
@@ -56,14 +58,10 @@ export class AppComponent implements AfterViewInit, OnInit {
title = 'Template Syntax';
- // DevMode memoization fields
- private priorClasses: {};
- private _priorStyles: {};
-
getStyles(el: Element) {
let styles = window.getComputedStyle(el);
let showStyles = {};
- for (let p in this.setStyles()) {
+ for (let p in this.currentStyles) { // only interested in these styles
showStyles[p] = styles[p];
}
return JSON.stringify(showStyles);
@@ -141,58 +139,29 @@ export class AppComponent implements AfterViewInit, OnInit {
}
// #docregion setClasses
- setClasses() {
- let classes = {
- saveable: this.canSave, // true
- modified: !this.isUnchanged, // false
- special: this.isSpecial, // true
+ currentClasses: {};
+ setCurrentClasses() {
+ // CSS classes: added/removed per current state of component properties
+ this.currentClasses = {
+ saveable: this.canSave,
+ modified: !this.isUnchanged,
+ special: this.isSpecial
};
- // #enddocregion setClasses
- // compensate for DevMode (sigh)
- if (JSON.stringify(classes) === JSON.stringify(this.priorClasses)) {
- return this.priorClasses;
- }
- this.priorClasses = classes;
- // #docregion setClasses
- return classes;
}
// #enddocregion setClasses
-
// #docregion setStyles
- setStyles() {
- let styles = {
- // CSS property names
- 'font-style': this.canSave ? 'italic' : 'normal', // italic
- 'font-weight': !this.isUnchanged ? 'bold' : 'normal', // normal
- 'font-size': this.isSpecial ? '24px' : '8px', // 24px
+ currentStyles: {};
+ setCurrentStyles() {
+ this.currentStyles = {
+ // CSS styles: set per current state of component properties
+ 'font-style': this.canSave ? 'italic' : 'normal',
+ 'font-weight': !this.isUnchanged ? 'bold' : 'normal',
+ 'font-size': this.isSpecial ? '24px' : '12px'
};
- // #enddocregion setStyles
- // compensate for DevMode (sigh)
- if (JSON.stringify(styles) === JSON.stringify(this._priorStyles)) {
- return this._priorStyles;
- }
- this._priorStyles = styles;
- // #docregion setStyles
- return styles;
}
// #enddocregion setStyles
- // #docregion NgStyle
- isItalic = false;
- isBold = false;
- fontSize: string = 'large';
- fontSizePx: number | string = 14;
-
- setStyle() {
- return {
- 'font-style': this.isItalic ? 'italic' : 'normal',
- 'font-weight': this.isBold ? 'bold' : 'normal',
- 'font-size': this.fontSize
- };
- }
- // #enddocregion NgStyle
-
toeChoice = '';
toeChooser(picker: HTMLFieldSetElement) {
let choices = picker.children;
@@ -202,7 +171,6 @@ export class AppComponent implements AfterViewInit, OnInit {
}
}
-
// #docregion trackByHeroes
trackByHeroes(index: number, hero: Hero) { return hero.id; }
// #enddocregion trackByHeroes
diff --git a/public/docs/_examples/template-syntax/ts/template-syntax.css b/public/docs/_examples/template-syntax/ts/template-syntax.css
index c8c0925830..6ae25b396c 100644
--- a/public/docs/_examples/template-syntax/ts/template-syntax.css
+++ b/public/docs/_examples/template-syntax/ts/template-syntax.css
@@ -6,7 +6,8 @@ img {height: 100px;}
.parent-div {margin-top: 1em; font-weight: bold}
.special {font-weight:bold; font-size: x-large}
.bad {color: red;}
-.curly {font-family: "Brush Script MT"}
+.saveable {color: limegreen;}
+.curly, .modified {font-family: "Brush Script MT"}
.toe {margin-left: 1em; font-style: italic;}
little-hero {color:blue; font-size: smaller; background-color: Turquoise }
-.to-toc {margin-top: 10px; display: block}
\ No newline at end of file
+.to-toc {margin-top: 10px; display: block}
diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade
index 08118f96c6..fa3fd5dc0c 100644
--- a/public/docs/ts/latest/guide/template-syntax.jade
+++ b/public/docs/ts/latest/guide/template-syntax.jade
@@ -997,15 +997,22 @@ figure.image-display
The `NgClass` directive may be the better choice
when we want to add or remove *many* CSS classes at the same time.
- A good way to apply `NgClass` is by binding it to a key:value control !{__objectAsMap}. Each key of the object is a CSS class name; its value is `true` if the class should be added, `false` if it should be removed.
+ A good way to apply `NgClass` is by binding it to a key:value control !{__objectAsMap}.
+ Each key of the object is a CSS class name; its value is `true` if the class should be added,
+ `false` if it should be removed.
:marked
- Consider a component method such as `setClasses` that manages the state of three CSS classes:
+ Consider a
+ `setCurrentClasses` component method that sets a component property, `currentClasses`
+ with an object that adds or removes three classes based on the
+ `true`/`false` state of three other component propertes:
+makeExample('template-syntax/ts/app/app.component.ts', 'setClasses')(format=".")
:marked
- Now we can add an `NgClass` property binding that calls `setClasses`
- and sets the element's classes accordingly:
+ Adding an `NgClass` property binding to `currentClasses` sets the element's classes accordingly:
+makeExample('template-syntax/ts/app/app.component.html', 'NgClass-1')(format=".")
+.l-sub-section
+ :marked
+ It's up to you to call `setCurrentClassess()`, both initially and when the dependent properties change.
.l-main-section
@@ -1023,12 +1030,15 @@ figure.image-display
We apply `NgStyle` by binding it to a key:value control !{__objectAsMap}.
Each key of the object is a style name; its value is whatever is appropriate for that style.
- Consider a component method such as `setStyles` that returns an object defining three styles:
+ Consider a `setCurrentStyles` component method that sets a component property, `currentStyles`
+ with an object that defines three styles, based on the state of three other component propertes:
+makeExample('template-syntax/ts/app/app.component.ts', 'setStyles')(format=".")
:marked
- Now we just add an `NgStyle` property binding that calls `setStyles`
- and sets the element's styles accordingly:
+ Adding an `NgStyle` property binding to `currentStyles` sets the element's styles accordingly:
+makeExample('template-syntax/ts/app/app.component.html', 'NgStyle-2')(format=".")
+.l-sub-section
+ :marked
+ It's up to you to call `setCurrentStyles()`, both initially and when the dependent properties change.
.l-main-section