docs(aio): Update NgStyle and NgClass to use quoted keys

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>

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>

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>
 

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

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>
 

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>