Basic

Basic ResizeSensor implementation

HTML

<div ng-controller="ResizeSensorExampleController as controller">

    <div style="padding: 20px;"
         ng-style="{ width: controller.absoluteContainerSize.width + 'px', height: controller.absoluteContainerSize.height + 'px' }">
        <div>
            <button ng-click="controller.absoluteContainer_expandWidth(10)">+</button>
            <button ng-click="controller.absoluteContainer_expandWidth(-10)">-</button>
        </div>
        <div resize-sensor="controller.absoluteSensorOptions"
             class="g-resizeSensorHolder"
             style="height: 150px;">
            <div class="g-resizeSensorHolder-label">Absolute Size</div>
            <div class="g-resizeSensorHolder-sizeValue">
                {{controller.absolute.width}} x {{controller.absolute.height}}
            </div>
        </div>
    </div>


    <div resize-sensor="controller.relativeSensorOptions"
         class="g-resizeSensorHolder"
         style="width: 50vw; height: 25vh;">
        <div class="g-resizeSensorHolder-label">Relative Size</div>
        <div class="g-resizeSensorHolder-sizeValue">
            {{controller.relative.width}} x {{controller.relative.height}}
        </div>
    </div>
</div>