title: How to toggle a class on the component-DOM-node
body: <p>I'm currently rewriting some older directives to the new component-syntax. One of my directives needs to toggle a class on the DOMnode. </p>
  
  <pre><code>&lt;my-directive ng-class="$ctrl.getClassList()"&gt;
      &lt;!-- DIRECTIVE CONTENT --&gt;
  &lt;/my-directive&gt;
  </code></pre>
  
  <p>Now when I converted it into a component, this functionality no longer works. Is there some new functionality that I did not find? Or is this simply no longer possible?</p>
  
  <pre><code>&lt;my-component ng-class="$ctrl.getClassList()"&gt;
      &lt;!-- COMPONENT CONTENT --&gt;
  &lt;/my-component&gt;
  </code></pre>
  
  <p>Thanks for taking the time!</p>
  
  <hr>
  
  <p>To see a fully working (or better, <strong>not</strong> working) example you could check this snippet, or head to <a href="https://plnkr.co/edit/h46ZOZv6c1UI0hzDN61C?p=preview" rel="nofollow">Plunkr</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function(angular) {
    angular.module('plunker', []);
  })(angular);
  
  // DIRECTIVE
  (function(angular) {
    angular
      .module('plunker')
      .controller('MyDirectiveController', [function() {
        this.cssClass = '';
        this.toggle = function() {
          this.cssClass = (this.cssClass === '') ? 'active' : '';
        }
      }])
      .directive('myDirective', [function() {
        return {
          scope: true,
          restrict: 'E',
          controller: 'MyDirectiveController',
          controllerAs: '$ctrl',
          template: '&lt;button ng-class="$ctrl.cssClass" ng-click="$ctrl.toggle()"&gt;hit me baby one more time&lt;/button&gt;'
        };
      }]);
  })(angular);
  
  // COMPONENT
  (function(angular) {
    angular
      .module('plunker')
      .controller('MyComponentController', [function() {
        this.cssClass = '';
        this.toggle = function() {
          this.cssClass = (this.cssClass === '') ? 'active' : '';
        }
      }])
      .component('myComponent', {
          controller: 'MyComponentController',
          template: '&lt;button ng-class="$ctrl.cssClass" ng-click="$ctrl.toggle()"&gt;Do it again&lt;/button&gt;'
      });
  })(angular);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>my-directive, 
  my-component {
    display: block;  
    padding: 1em;
    border: 1px solid transparent;
    
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0;  
  }
  
  my-directive.active,
  my-component.active {
      padding: 1em;
      font-size: 2em;
      background: red;
      color: white;
      border-color: darkred;
      
      border-width: 2px;
  }
  my-directive.active button,
  my-component.active button {
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0;
    border: 1px solid;
  
    font-size: inherit;
    color: inherit;
    border-color: inherit;
    background: inherit;
  }
  
  button.active {
    text-decoration: underline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="plunker"&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;AngularJS Plunker&lt;/title&gt;
      &lt;script&gt;document.write('&lt;base href="' + document.location + '" /&gt;');&lt;/script&gt;
      &lt;script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.7/angular.js" data-semver="1.5.7"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;my-directive ng-class="$ctrl.cssClass"&gt;&lt;/my-directive&gt;
      &lt;my-component ng-class="$ctrl.cssClass"&gt;&lt;/my-component&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>