<p dir="auto">This will set the <code class="notranslate">dashCase</code> class on the button to true or false depending upon the value of <code class="notranslate">binding</code>.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;button [class.dash-case]=&quot;binding&quot;&gt;&lt;/button&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-s1">button</span> <span class="pl-kos">[</span><span class="pl-k">class</span><span class="pl-kos">.</span><span class="pl-s1">dash</span><span class="pl-c1">-</span><span class="pl-k">case</span><span class="pl-kos">]</span><span class="pl-c1">=</span>"<span class="pl-c1">binding</span>"<span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">button</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">I know dash-case to camelCase conversion is actually a "feature" built into the attribute parser, but it should have exceptions in cases like this.</p>
<p dir="auto">The last thing I would expect is for angular to camel my classNames.</p>
<p dir="auto">If I have a binding:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div [class.md-radio-checked]=&quot;isChecked&quot;&gt;...&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">[class.md-radio-checked]</span>="<span class="pl-s">isChecked</span>"<span class="pl-kos">&gt;</span>...<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Then the class name added to the element should be <code class="notranslate">md-radio-checked</code>. Currently, it is <code class="notranslate">mdRadioChecked</code>.</p>