Delving into the world of Angular 4, I have encountered a slight hurdle in my understanding of directives. My goal is to create a directive that can resize an element based on its width. Back in the days of AngularJs, this task was accomplished with code resembling the following:
angular.module('buzzard.directives')
.directive('bzAnswers', directive)
.controller('BzAnswersController', controller);
function directive($window, $timeout) {
return {
restrict: 'A',
link: lnkFn,
controller: 'BzAnswersController',
controllerAs: 'controller'
};
function lnkFn(scope, element, attrs, controller) {
var window = angular.element($window);
controller.resize(element);
window.bind('resize', function () {
$timeout(function () {
controller.resize(element);
});
});
};
};
function controller() {
var self = this;
// Method binding
self.resize = resize;
//////////////////////////////////////////////////
function resize(parent) {
var children = parent.children();
angular.forEach(children, function (child) {
var anchor = child.getElementsByTagName('a');
if (anchor.length === 1) {
var element = anchor[0];
var dimensions = element.getBoundingClientRect();
angular.element(element).css('height', dimensions.width * .5 + 'px');
}
});
};
};
Now, the burning question: How would one achieve this in Angular 4? And yes, I am coding in TypeScript :)