Angular Directive for Window Resize Event

angular-resize.js

angular.module('your-module-name', [])
    .directive('onResize', ['$window', function ($window) {
        return {
            link: function (scope, el, attrs) {
                var initialWidth = $window.innerWidth,
                    smallClass   = attrs.resizeClass || 'yourDefault',
                    smallAttr    = attrs.resizeAttr  || 'yourDefault',
                    smallWidth   = attrs.resizeWidth || 1024;
    
                var setSmall = function () {
                    el.addClass(smallClass);
                    el.attr(smallAttr, smallAttr);
                };
    
                var setLarge = function () {
                    el.removeClass(smallClass);
                    el.removeAttr(smallAttr);
                };
    
                if (initialWidth < smallWidth) {
                    setSmall();
                } else {
                    setLarge();
                }
    
                angular.element($window).on('resize', function () {
                    if ($window.innerWidth <= smallWidth) {
                        setSmall();
                    } else {
                        setLarge();
                    }
                });
            }
        };
    }]);

---- angular 2.0 window resize directive.

import { Directive, ElementRef} from 'angular2/core';

@directive({
selector: '[resize]',
host: { '(window:resize)': 'onResize()' } // Window resize listener
})

export class AutoResize {

element: ElementRef; // Element that associated to attribute.
$window: any;

constructor(_element: ElementRef) {
    this.element = _element;
    // Get instance of DOM window.
    this.$window = angular.element(window);

    this.onResize();
}

// Adjust height of element.
onResize() {
    $(this.element.nativeElement).css('height', (this.$window.height() - 163) + 'px');
}

}