<p dir="auto">The code example for using NgClass with an Object as expression is not working on the Beta version. I'm referring to this section: <a href="https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngClass" rel="nofollow">https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngClass</a>.</p>
<p dir="auto">It seems that creating a component method which returns an object:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="setClasses() {
  let classes =  {
    saveable: this.canSave,      // true
    modified: !this.isUnchanged, // false
    special: this.isSpecial,     // true
  }
  return classes;
}"><pre class="notranslate"><span class="pl-en">setClasses</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
  <span class="pl-k">let</span> <span class="pl-s1">classes</span> <span class="pl-c1">=</span>  <span class="pl-kos">{</span>
    <span class="pl-c1">saveable</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">canSave</span><span class="pl-kos">,</span>      <span class="pl-c">// true</span>
    <span class="pl-c1">modified</span>: <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">isUnchanged</span><span class="pl-kos">,</span> <span class="pl-c">// false</span>
    <span class="pl-c1">special</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">isSpecial</span><span class="pl-kos">,</span>     <span class="pl-c">// true</span>
  <span class="pl-kos">}</span>
  <span class="pl-k">return</span> <span class="pl-s1">classes</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">and then using it this way:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div [ngClass]=&quot;setClasses()&quot;&gt;This div is saveable and special&lt;/div&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-s1">div</span> <span class="pl-kos">[</span><span class="pl-s1">ngClass</span><span class="pl-kos">]</span><span class="pl-c1">=</span><span class="pl-s">"setClasses()"</span><span class="pl-c1">&gt;</span><span class="pl-v">This</span> <span class="pl-s1">div</span> <span class="pl-s1">is</span> <span class="pl-s1">saveable</span> <span class="pl-s1">and</span> <span class="pl-s1">special</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span>div&gt;</pre></div>
<p dir="auto">Generates this error:<br>
<code class="notranslate">Error: Expression 'setClasses() in Component@line:col' has changed after it was checked. Previous value: '[object Object]'. Current value: '[object Object]'</code></p>
<p dir="auto">I'm using chrome 47.0.2526.111 m</p>
<p dir="auto">I don't know whether this should work or the documentation should be changed, but it works with either constant objects, writing the object directly in the html template, etc.</p>
<p dir="auto">One more suggestion is to add quotes to class names in ngClass examples since they are needed for keys with special characters (e.g. 'visible-md'):</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  let classes =  {
    'saveable-thing': this.canSave,      // true
    'modified-input': !this.isUnchanged, // false
    'special': this.isSpecial,     // true
  }"><pre class="notranslate">  <span class="pl-k">let</span> <span class="pl-s1">classes</span> <span class="pl-c1">=</span>  <span class="pl-kos">{</span>
    <span class="pl-s">'saveable-thing'</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">canSave</span><span class="pl-kos">,</span>      <span class="pl-c">// true</span>
    <span class="pl-s">'modified-input'</span>: <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">isUnchanged</span><span class="pl-kos">,</span> <span class="pl-c">// false</span>
    <span class="pl-s">'special'</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">isSpecial</span><span class="pl-kos">,</span>     <span class="pl-c">// true</span>
  <span class="pl-kos">}</span></pre></div>
<p dir="auto">This is easy to notice when returned from the component but a little more troublesome to debug when the object is used in the html template, as shown here (classes don't have quotes in this section) <a href="https://angular.io/docs/ts/latest/api/common/NgClass-directive.html" rel="nofollow">https://angular.io/docs/ts/latest/api/common/NgClass-directive.html</a></p>
<p dir="auto">Not sure if this is something auto-generated or not, but Typescript 1.8 doesn't allow things like:</p>
<p dir="auto">export { Promise }</p>
<p dir="auto">and I get this error on using tsc against an Angular 2 application using TypeScript 1.8.0</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="node_modules/angular2/src/facade/promise.d.ts(1,10): error TS2661: 
   Cannot re-export name that is not defined in the module."><pre class="notranslate">node_modules/angular2/src/facade/promise.d.ts(1,10): error TS2661: 
   Cannot re-export name that is not defined <span class="pl-k">in</span> the module.</pre></div>
<p dir="auto">Per <a href="https://github.com/Microsoft/TypeScript/wiki/Breaking-Changes#typescript-18">https://github.com/Microsoft/TypeScript/wiki/Breaking-Changes#typescript-18</a></p>
<p dir="auto">I would love to get TypeScript 1.8 support as it seems to have the ability to package up ES5 files alongside of TypeScript files, and could eliminate the need for WebPack in certain situations.</p>