Converting directive to a component in typescript

Question

Im trying to convert this directive into a component in typescript. I saw a couple of videos and articles on how to do so, but most of them are in javascript so it is a bit unclear.

Here is the code:

  export class TableRowBSGroupDirective implements ng.IDirective {
    restrict: string = 'A';
    scope: any = {
        dirvm: '=',
        grouplvl: '=',
        classlvl: '@'
    };

    templateUrl: any = balanceSheetFSPolicy.dirvmConstant.TableRowGroupTmpl;

    controller: any = ($scope: any) => {
        balanceSheetFSPolicy.balanceSheetFSViewModel = $scope.dirvm;
        $scope.balanceSheetFSPolicy = balanceSheetFSPolicy;
    };

    static factory(): ng.IDirectiveFactory {
        const directive = function () {
            return new TableRowBSGroupDirective();
        };
        return directive;
    }
}

angular
    .module('app.recon.statements')
    .directive('tableRowBsGroup', TableRowBSGroupDirective.factory());

Dilushika Weerawardhana · Accepted Answer · 2018-05-31 09:38:33Z

3

export class TableRowBSGroupCtrl {

    // Dependency Injection
    static $inject: [string] = [
        '$scope'
        // Apply all the dependancies for the component here 
        // $scope as an example
    ];

    // Access Bindings
    protected dirvm: any;
    protected grouplvl: any;
    protected classlvl: any;

    constructor(private $scope: ng.IScope) {
       // Place the Logics here which are in the controller function in your directive

    }

    public static factory() {
       // Here goes your static function body
    }

}

const options = {
  templateUrl: //the path for the template,
  bindings: {
    dirvm: '=',
    grouplvl: '=',
    classlvl: '@'
  },
  controller: TableRowBSGroupCtrl
};

export default (ngModule: any) => {
  ngModule.component('TableRowBSGroupCmp', options);
};

edited May 31, 2018 at 9:38

answered May 31, 2018 at 8:11

Dilushika Weerawardhana

1,6211 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Estus Flask Over a year ago

There's too much any, and there's no need for options variable. But otherwise yes, that's how it's done.

Markus ofcrypto Over a year ago

Thanks! Dont I have to use IComponentOptions in any way?

Collectives™ on Stack Overflow

Converting directive to a component in typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related