How to create Directive using templete

[bagojikop]

Hello Experts

I have already created a directive using template in angularjs. now are going to upgrade in angular 14. so please help me how to create the directive using template as below angular js Code

myapp.directive("helper", function () {
    return {
        restrict: 'EA',

        scope: {
            Items: "=list",
            SelectedRow: "=row",
            columnDefs: "=columns",
            sortBy: "@filter",

            SelectedValue: "@selectedvalue",
            datasource: "=datasource",
            ngModel: "=",
            hclick: "&"

        },

        controller: ['$scope', '$filter', function ($scope, $filter) {

            $scope.reverse = false;
            $scope.curPage = 1;
            $scope.itemsPerPage = 25;

            //  $scope.maxSize = 30;
            //  $scope.filteredItems=$scope.Items;

            // $scope.numOfPages = function () {
            //     return Math.ceil($scope.filteredItems.length / $scope.itemsPerPage);

            // };

            // $scope.$watch('curPage + numPerPage', function () {
            //     var begin = (($scope.curPage - 1) * $scope.itemsPerPage),
            //         end = begin + $scope.itemsPerPage;

            //     $scope.pageItems = $scope.filteredItems.slice(begin, end);
            // });

            // $scope.searchfilter=function(){

            //     $scope.filteredItems=filterFilter($scope.Items,$scope.searchtext , true);

            // }

            // // $scope.failedSubjects = $filter('filter')($scope.Items, {'grade':'C'}, true);

            $scope.field = function (item, value) {
                if (value) {
                    var l = value.split(".");

                    var itm = Object.assign({}, item);
                    var c = 0;

                    // for (var x of l) {
                    // 
                    //     if (itm[x])
                    //         itm = itm[x];
                    //     else
                    //         return ' '
                    // 
                    //     c += 1;
                    //     if (c === l.length)
                    //         return itm;
                    // 
                    // }

                    // angular.forEach(l, function (x) {

                    //     if (itm[x])
                    //         itm = itm[x];
                    //     else
                    //         return ' '

                    //     c += 1;
                    //     if (c === l.length)
                    //         return itm;

                    // });

                    for (var i = 0; i <= l.length; i++) {
                        var v = l[i];

                        if (itm[l[i]])
                            itm = itm[l[i]];
                        else
                            return ' '

                        if (i + 1 === l.length)
                            return itm;
                    }



                }
            }

        }],

        template: function (element, attrs) {


            var htmltext = "\<div id=\"" + attrs.helperid + "\" class=\"helpnav\">" +
                "<div  class=\"bg-primary p-1\" style=\"display: flex;justify-content:space-between;line-height:0px;\"><input style=\"padding:0px !important;line-height:0px;\" type=\"text\" ng-model=\"searchtext\" placeholder=\"Search\"/>" +
                "<a href=\"javascript:void(0)\" class=\"closebtn\"  ng-click=\"closeNav()\">&times;</a> </div>" +

                "<table class=\"table table-hover table-bordered mb-0 hidden-sm-down\" cellspacing=\"0\" style=\"color:black;z-index:1;\">" +
                "<thead class=\"thead-light\">" +
                "<tr class=\"bg-primary\">" +
                "<th ng-repeat=\"header in columnDefs\" ng-style=\"header.style\" class=\"text-center\">{{header.displayName}}</th>" +
                "</tr>" +
                "</thead>" +
                "<tbody  style=\"width:100%;height: calc(100vh - 232px);overflow-y:scroll;overflow-x:scroll;display:block;\">" +
                "<tr dir-paginate=\"item in Items| orderBy:sortBy|filter: searchtext| itemsPerPage: 50\" ng-click=\"closeNav(item)\">" +
                "<td style=\"max-width: 100px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;\" ng-repeat=\"row in columnDefs\" ng-style=\"row.style\">{{field(item,row.field)}}</td></tr>" +
                "</tbody></table>" +
                "<dir-pagination-controls  max-size=\"5\" direction-links=\"true\" boundary-links=\"true\"></dir-pagination-controls></div>" +
                "<span style=\"font-size:10px;cursor:pointer ;padding:10px\" ng-click=\"openNav()\">&#9776;</span>"

            return htmltext;
        },

        link: function (scope, element, attrs, ngModel) {
            scope.width = attrs.width;
            scope.helperid = attrs.helperid;


            scope.openNav = function () {

                try {

                    scope.hclick().then(function () {
                        document.getElementById(scope.helperid).style.width = scope.width;
                        scope.searchtext = "";
                    })
                }
                catch (ex) {
                    document.getElementById(scope.helperid).style.width = scope.width;
                    scope.searchtext = "";
                }

            }

            scope.closeNav = function (item) {
                document.getElementById(scope.helperid).style.width = "0";
                if (item) {

                    scope.SelectedRow = item;
                    scope.datasource = item[scope.SelectedValue];

                    //    ngModel.$setViewValue(item[scope.SelectedValue]);
                    //    ngModel.$commitViewValue();

                }
            }

        }
    };
});