title: Converting an Angular 1.x directive to Angular 2
body: <p>I have a wrap-bootstrap template with a few widgets that I'm trying to convert to Angular 2. This one has me stumped:</p>
  
  <pre><code>.directive('changeLayout', function(){
  
      return {
          restrict: 'A',
          scope: {
              changeLayout: '='
          },
  
          link: function(scope, element, attr) {
  
              //Default State
              if(scope.changeLayout === '1') {
                  element.prop('checked', true);
              }
  
              //Change State
              element.on('change', function(){
                  if(element.is(':checked')) {
                      localStorage.setItem('ma-layout-status', 1);
                      scope.$apply(function(){
                          scope.changeLayout = '1';
                      })
                  }
                  else {
                      localStorage.setItem('ma-layout-status', 0);
                      scope.$apply(function(){
                          scope.changeLayout = '0';
                      })
                  }
              })
          }
      }
  })
  </code></pre>
  
  <p>I have a new directive started (below), but the <code>is</code> and <code>prop</code> properties of the HtmlElement object don't actually exist. How can I get/set the <code>checked</code> property of the input element on which I drop this attribute? I'm also thinking that this directive exposes the layout status through the Output attribute so the parent component can respond accordingly.</p>
  
  <p>Can anyone guide me a bit? Am I on the right track? Thanks!</p>
  
  <p>New directive:</p>
  
  <pre><code>import { Directive, ElementRef, Output, EventEmitter, OnInit } from '@angular/core';
  
  import { LocalStorage } from "../common";
  
  @Directive({
      selector: '[change-layout]',
      host: {
          '(change)': 'onChange()'
      }
  })
  
  export class ChangeLayoutDirective implements OnInit {
  
      private el: HTMLElement;
      @LocalStorage() public layoutStatus: Number = 0;
  
      @Output() layoutStatusChange = new EventEmitter();
  
      constructor(el: ElementRef) {
          this.el = el.nativeElement;
      }
  
      ngOnInit() {
          this.el.prop('checked', false);
          if(this.layoutStatus === 1) {
              this.el.prop('checked', true);
          }
      }
  
      onChange() { this.toggleLayout(); }
  
      private toggleLayout() {
          if(this.el.is(':checked')) {
              this.layoutStatus = 1;
          }
          else {
              this.layoutStatus = 0;
          }
          this.layoutStatusChange.emit({
              value: this.layoutStatus
          });
      }
  }
  </code></pre>