Angular Simple Sort Column Component

Component.ts

module adp.hosted.crm.directives {

    interface ISortState {
        readonly showUpward: boolean;
        readonly showDownward: boolean;
        
        readonly value: string;
        
        next(): ISortState;
    }
    
    class NullSorting implements ISortState {
        showUpward: boolean = false;
        showDownward: boolean = false;
        
        value = null;
        
        next(): ISortState {
            return new SortAscending();
        }
    }
    
    class SortAscending implements ISortState {
        showUpward: boolean = true;
        showDownward: boolean = false;
        
        value = 'ASC';

        next(): ISortState {
            return new SortDescending();
        }
    }
    
    class SortDescending implements ISortState {
        showUpward: boolean = false;
        showDownward: boolean = true;

        value = 'DESC';
        
        next(): ISortState {
            return new NullSorting();
        }
    }
    
    class SortableColumnComponent {

        bindings = {
            key: '<',
            order: '<',
            onUpdate: '&'
        };
        
        transclude = true;

        controller = 'SortableColumnComponentController';

        template = `<a href="javascript:void(0)" ng-click="$ctrl.toggleSorting()">
                        <span ng-transclude></span>
                        <i class="material-icons" ng-if="$ctrl.sortState.showUpward">arrow_upward</i>
                        <i class="material-icons" ng-if="$ctrl.sortState.showDownward">arrow_downward</i>
                    </a>`;
    }
    
    class SortableColumnComponentController {
        
        private key: string;
        private order: string;
        
        private sortState = new NullSorting();
        private onUpdate: (value) => void;
        
        $onInit(){
            this.sortState = new SortStateFactory().getInstance(this.order);
            
            console.log('init', this.order, this.sortState);
        }

        $onChanges(changesObj){
            const currentOrder = changesObj.order.currentValue;
            
            this.sortState = new SortStateFactory().getInstance(currentOrder);
        }
        
        toggleSorting(){
            this.sortState = this.sortState.next();
            
            const value = {key: this.key, order: this.sortState.value};
            
            this.onUpdate({value});
        }
    }
    
    class SortStateFactory {
        getInstance(sortValue){
            switch (sortValue){
                case 'ASC':
                    return new SortAscending();
                case 'DESC': 
                    return new SortDescending();
                default:
                    return new NullSorting();
            }
        }
    }

    angular.module('adp.hosted.crm.directives')
        .controller('SortableColumnComponentController', SortableColumnComponentController)
        .component('crmSortableColumn', new SortableColumnComponent());
}

Controller.ts

module adp.hosted.crm.controllers {
    import IUserService = adp.hosted.crm.factories.IUserService;
    import ActionHandlerService = adp.hosted.crm.factories.actionhandler.IActionHandlerService;

    class LabController {

        static $inject = [
        ];

        columns: {[key: string]: string} = {
            'date': 'ASC',
            'name': null
        };
        
        constructor(
            
        ) {
            console.log('im a lab state');
        }

        handleSortColumnChanged(value){

            for (let key in this.columns) this.columns[key] = null; //resets all
            
            this.columns[value.key] = value.order;
        }
    }

    angular
        .module('adp.hosted.crm.controllers')
        .controller('LabController', LabController);
}

ControllerTemplate.html

<div>
    
    <crm-sortable-column order="ctrl.columns['date']" key="'date'" on-update="ctrl.handleSortColumnChanged(value)">Date</crm-sortable-column>
    <crm-sortable-column order="ctrl.columns['name']" key="'name'" on-update="ctrl.handleSortColumnChanged(value)">Name</crm-sortable-column>

    <pre>{{ctrl.columns|json}}</pre>
    
</div>