title: How to use angular 1 directives in angular 2
body: <p>I am trying to migrate my Angular 1 directive to Angular 2. This is  my simple Angular 1 directive</p>
  
  <p><strong>extCheckbox.html</strong></p>
  
  <pre><code>           &lt;input type=checkbox
              name ="{{checkboxName}}"
              id="{{checkboxId}}"
              data-ng-readonly="isReadonly"
               data-ng-checked="isChecked"/&gt;
  </code></pre>
  
  <p>This is my directive <strong>extCheckbox.js</strong></p>
  
  <pre><code>var app = angular.module('Demo');
  
  app.directive('extCheckbox', [function () {
      return {
          restrict: 'E',
          scope: {
  
              label: '@',
              name: '@',
              id: '@',
              isDisabled: '=?',
              isReadonly: '=?',
              isChecked: '=?',
          },
          templateUrl: './extCheckbox.html',
          replace: true,
          transclude: false,
          link: function (scope, element, attrs) {
              if (attrs.isChecked === undefined) {
                  scope.isChecked =true;
              }
          }
      };
  }]);
  </code></pre>
  
  <p>I Migrated this to Angular 2 as follows,</p>
  
  <p><strong>extCheckbox.Component.ts</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  import {UpgradeAdapter} from '@angular/upgrade';
  const upgradeAdapter = new UpgradeAdapter();
  
  let ExtCheckbox = upgradeAdapter.upgradeNg1Component('ext-Checkbox');
  
  @Component({
      selector: 'ext-mycheckbox',
      template: '&lt;ext-checkbox&gt;&lt;/ext-checkbox&gt;',
      directives: [ExtCheckbox]
  })
  
  
  export class checkboxComponent{
  
  }
  </code></pre>
  
  <p><strong>app.components.ts</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  import {checkboxComponent} from './extCheckbox.Component';
  
  @Component({
    selector: 'my-app',
    template: '&lt;h1&gt;checkboxComponent&lt;/h1&gt;&lt;ext-mycheckbox&gt;&lt;/ext-mycheckbox&gt;',
    directives:[checkboxComponent]
   })
  
  export class AppComponent { 
  
  }
  </code></pre>
  
  <p>The selector <strong>my-app</strong> element has been given in my <strong>index.html</strong> but the checkbox is not rendered in my page.</p>