Hello!

directive to component

# Refactoring Directives to 1.5 Components
Below you will find guide on how to refactor your directives to components:

**Step 1 - Rename your files suffix:**  
Components should have the suffix `.component.ts` while directives have the  `.dir.ts suffix`.  
`<file_name>.drv.ts` ==> `<file_name>.component.ts`  
Note: all related files should be renamed as well (jade, less, spec etc.).

**Step 2 - Change the module initialization:**  
In the relevant module change the initialization from directive to component.
`angular.module('app').directive(“dirName”, Directive)` ==> `angular.module('app').component(“componentName”, Component)`

**Step 3 - Change directive declaration to component declaration:**  
In the directive file change the declaration from directive to component. Here is an example of a directive which was refactored to component:


--Directive:

    export default function SchedulingDrv(TemplateBasePath) {
      return {
        restrict: 'E',
        controller: SchedulingController,
        controllerAs: 'scg',
        bindToController: true,
        scope: {
          getIsEditMode: '&editMode',
          getStartDate: '&startDate',
          getEndDate: '&endDate',
          getDisabled: '&disabled',
          onChange: '&',
          getMaxDate: '&',
          disabledMsg$: '@disabledMsg',
          getHideContinuesPicker: '&hideContinuesPicker'
        },
        templateUrl: TemplateBasePath + 'modules/amplify/common/scheduling/ob-scheduling.html'
      }
    }

--Component:

    export default const SchedulingComponent = {
      templateUrl: [
        'TemplateBasePath', TemplateBasePath =>
          `${TemplateBasePath}modules/amplify/common/scheduling/ob-scheduling.html`
      ],
      controller: SchedulingController,
      controllerAs: 'scg',
      bindings: <{[binding: string]: string}>{
        isEditMode: '<editMode',
        startDate: '<',
        endDate: '<',
        isDisabled: '<disabled',
        onChange: '&',
        maxDate: '<',
        disabledMsg$: '@disabledMsg',
        hideContinuesPicker: '<'
      }
    };

Note: that the controller (which is a class) **must** be placed above the component declaration because it is not hoisted.

**Step 4 - Replace linking function with @onInit function:**  
If your component uses the linking function you should replace it with the `@onInirt` function, which should be created on the component controller.

--Directive:

    export default function SchedulingDrv(TemplateBasePath) {
          return {
            restrict: 'E',
            controller: SchedulingController,
            controllerAs: 'scg',
            ...
            link: function() {
	            ...
            }
          }
    }

--Component:

    class SchedulingController {
    	@onInit() {
        	...
    	}
    }

**Step 5 - Replace `$scope.watch` with @ngChanges:**  
If your directives watches for changes in it's attributes then you should replace the `$scope.$watch` with `@ngChanges` function.

--Directive:

    this.$scope.$watch(() => {
      return this.getStartDate();
    }, (newVal: Moment, oldVal: Moment) => {
      if (newVal && oldVal && !newVal.isSame(oldVal, 'd')) {
        this.init();
      }
    });

--Component

      $onChanges(changesObj) {
        if(changesObj.startDate) {
          let {previousValue, currentValue} = changesObj.startDate;
          if (currentValue && previousValue && !currentValue.isSame(previousValue, 'd')) {
            this.init();
          }
        }
      }


**Step 5 - Replace `$scope.$on('destroy')` with @onDestroy:**  
If you have a some logic that should be executed on the destruction event you then should use the `@onDestroy` function instead of using the `$scope.$on('destroy')` .