<p dir="auto"><strong>I'm submitting a ...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">Using NgClass on an svg element throws an error in Internet Explorer 11.</p>
<blockquote>
<p dir="auto">Unable to get property 'add' of undefined.</p>
</blockquote>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1056684/17893594/e90784f6-690b-11e6-850c-290b587fb481.png"><img src="https://cloud.githubusercontent.com/assets/1056684/17893594/e90784f6-690b-11e6-850c-290b587fb481.png" alt="ie10-error-ngclass" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">Using NgClass on svg should not throw an error in Internet Explorer 11.</p>
<p dir="auto"><strong>Reproduction of the problem</strong></p>
<p dir="auto"><strong>Example:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import {Component, NgModule, NgClass} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    &lt;svg height=&quot;100&quot; width=&quot;100&quot; [ngClass]=&quot;svgClass&quot;&gt;
      &lt;circle cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;40&quot; stroke=&quot;black&quot; stroke-width=&quot;3&quot; fill=&quot;red&quot; /&gt;
    &lt;/svg&gt;
  `
})
export class App {
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }

  get svgClass()
  {
    return 'test';
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}"><pre class="notranslate"><code class="notranslate">import {Component, NgModule, NgClass} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    &lt;svg height="100" width="100" [ngClass]="svgClass"&gt;
      &lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt;
    &lt;/svg&gt;
  `
})
export class App {
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }

  get svgClass()
  {
    return 'test';
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}
</code></pre></div>
<p dir="auto"><strong>DEMO:</strong></p>
<p dir="auto"><a href="https://plnkr.co/edit/7sE32rIrE4aiWdWe2D8d?p=preview" rel="nofollow">https://plnkr.co/edit/7sE32rIrE4aiWdWe2D8d?p=preview</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">The expected behavior is to have a css class applied to the svg element.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">N/A</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.4 or 2.0.0-rc.5</li>
<li><strong>Browser:</strong>  IE 11</li>
<li><strong>Language:</strong>  TypeScript 1.8.10 or 2.0.0 | ES6/7 | ES5</li>
</ul>
<p dir="auto">That means <code class="notranslate">NgClass</code> is broken.</p>
<p dir="auto">The reason is annoyingly that IE 11 <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements" rel="nofollow">doesn't support <code class="notranslate">classList</code> on SVG elements</a>, so <code class="notranslate">add</code>ing to <code class="notranslate">undefined</code> in the BrowserDomAdapter throws.</p>