How can I avoid using angular directive link function, to use angular 1.5 component

Question

I'm trying to migrate from Angular 1.4 to angular 1.5 components, then to typescript:

I want to use Angular 1.5 component, like that her is my code it's incomplet, but this the idea, behind

angular.
module('cool.core').
component('hasAnyRole', {
    template: 'Hello, {{$ctrl.user}}!',
    controller: function GreetUserController() {
        this.user = 'world';
    }
})

instead of Angular-directive-link:

angular.module('cool.core')
    .directive('hasAnyRole', ['Principal', function (Principal) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var roles = attrs.hasAnyRole.replace(/\s+/g, '').split(',');

                var setVisible = function () {
                    element.removeClass('hidden');
                };
                var setHidden = function () {
                    element.addClass('hidden');
                };

                var defineVisibility = function (reset) {
                    var result;
                    if (reset) {
                        setVisible();
                    }

                    result = Principal.isInAnyRole(roles);
                    if (result) {
                        setVisible();
                    } else {
                        setHidden();
                    }
                };

                if (roles.length > 0) {
                    defineVisibility(true);
                }
            }
        };
    }])

However I don't find enough examples Thanks in advance for your suggestions.