diff --git a/aio/content/examples/ajs-quick-reference/src/app/app.component.html b/aio/content/examples/ajs-quick-reference/src/app/app.component.html
index 72fd3de86f..82eaf9339b 100644
--- a/aio/content/examples/ajs-quick-reference/src/app/app.component.html
+++ b/aio/content/examples/ajs-quick-reference/src/app/app.component.html
@@ -14,13 +14,13 @@
 <h1>Example Snippets</h1>
 
 <!-- #docregion ngClass -->
-<div [ngClass]="{active: isActive}">
+<div [ngClass]="{'active': isActive}">
 <!-- #enddocregion ngClass -->
   [ngClass] active
 </div>
 <!-- #docregion ngClass -->
-<div [ngClass]="{active: isActive,
-                 shazam: isImportant}">
+<div [ngClass]="{'active': isActive,
+                 'shazam': isImportant}">
 <!-- #enddocregion ngClass -->
   [ngClass] active and boldly important
 </div>
@@ -57,7 +57,7 @@
 
 <p></p>
 <!-- #docregion ngStyle -->
-<div [ngStyle]="{color: colorPreference}">
+<div [ngStyle]="{'color': colorPreference}">
 <!-- #enddocregion ngStyle -->
   color preference #1
 </div>
diff --git a/aio/content/examples/structural-directives/src/app/app.component.html b/aio/content/examples/structural-directives/src/app/app.component.html
index 49c4928aad..9f5de0b8f4 100644
--- a/aio/content/examples/structural-directives/src/app/app.component.html
+++ b/aio/content/examples/structural-directives/src/app/app.component.html
@@ -213,10 +213,10 @@
 <h2 id="myUnless">UnlessDirective</h2>
 <p>
   The condition is currently
-  <span [ngClass]="{ a: !condition, b: condition, unless: true }">{{condition}}</span>.
+  <span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true }">{{condition}}</span>.
   <button
     (click)="condition = !condition"
-    [ngClass] = "{ a: condition, b: !condition }" >
+    [ngClass] = "{ 'a': condition, 'b': !condition }" >
     Toggle condition to {{condition ? 'false' : 'true'}}
   </button>
 </p>
diff --git a/aio/content/examples/template-syntax/src/app/app.component.html b/aio/content/examples/template-syntax/src/app/app.component.html
index 860f9436ac..73f1186035 100644
--- a/aio/content/examples/template-syntax/src/app/app.component.html
+++ b/aio/content/examples/template-syntax/src/app/app.component.html
@@ -161,7 +161,7 @@
   <!-- #docregion property-binding-syntax-1 -->
   <img [src]="heroImageUrl">
   <hero-detail [hero]="currentHero"></hero-detail>
-  <div [ngClass]="{special: isSpecial}"></div>
+  <div [ngClass]="{'special': isSpecial}"></div>
   <!-- #enddocregion property-binding-syntax-1 -->
 </div>
 <br><br>
@@ -496,7 +496,7 @@ bindon-ngModel
 <div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
 
 <div class="bad curly special">Bad curly special</div>
-<div [ngClass]="{bad:false, curly:true, special:true}">Curly special</div>
+<div [ngClass]="{'bad':false, 'curly':true, 'special':true}">Curly special</div>
 
 <a class="to-toc" href="#toc">top</a>
 
diff --git a/aio/content/examples/template-syntax/src/app/app.component.ts b/aio/content/examples/template-syntax/src/app/app.component.ts
index 2c65ef1c20..2e474dd04a 100644
--- a/aio/content/examples/template-syntax/src/app/app.component.ts
+++ b/aio/content/examples/template-syntax/src/app/app.component.ts
@@ -140,9 +140,9 @@ export class AppComponent implements AfterViewInit, OnInit {
   setCurrentClasses() {
     // CSS classes: added/removed per current state of component properties
     this.currentClasses =  {
-      saveable: this.canSave,
-      modified: !this.isUnchanged,
-      special:  this.isSpecial
+      'saveable': this.canSave,
+      'modified': !this.isUnchanged,
+      'special':  this.isSpecial
     };
   }
   // #enddocregion setClasses
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html
index 46a96d66c3..4068532de9 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html
@@ -2,7 +2,7 @@
 <div *ngIf="phone">
   <div class="phone-images">
     <img [src]="img" class="phone"
-        [ngClass]="{selected: img === mainImageUrl}"
+        [ngClass]="{'selected': img === mainImageUrl}"
         *ngFor="let img of phone.images" />
   </div>
 
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html
index 46a96d66c3..4068532de9 100644
--- a/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html
@@ -2,7 +2,7 @@
 <div *ngIf="phone">
   <div class="phone-images">
     <img [src]="img" class="phone"
-        [ngClass]="{selected: img === mainImageUrl}"
+        [ngClass]="{'selected': img === mainImageUrl}"
         *ngFor="let img of phone.images" />
   </div>
 
diff --git a/aio/content/guide/cheatsheet.md b/aio/content/guide/cheatsheet.md
index 38626c5a55..18981299d9 100644
--- a/aio/content/guide/cheatsheet.md
+++ b/aio/content/guide/cheatsheet.md
@@ -136,7 +136,7 @@ is available to <code>declarations</code> of this module.</p>
 <td><p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of <code>conditionExpression</code>.</p>
 </td>
 </tr><tr>
-<td><code>&lt;div&nbsp;<b>[ngClass]</b>="{active:&nbsp;isActive,&nbsp;disabled:&nbsp;isDisabled}"&gt;</code></td>
+<td><code>&lt;div&nbsp;<b>[ngClass]</b>="{'active':&nbsp;isActive,&nbsp;'disabled':&nbsp;isDisabled}"&gt;</code></td>
 <td><p>Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map.</p>
 </td>
 </tr>
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index a22fd58506..d05a594230 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -1371,7 +1371,7 @@ _This_ section is an introduction to the common structural directives:
 ### NgIf
 
 You can add or remove an element from the DOM by applying an `NgIf` directive to
-that element (called the _host elment_).
+that element (called the _host element_).
 Bind the directive to a condition expression like `isActive` in this example.
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgIf-1" title="src/app/app.component.html" linenums="false">