Auto Fit Text

auto-fit-text directive would continuously find the largest size text to fit in its container. It reacts to window, container size as well as content changes.

HTML

<div class="t-content g-autoFitExample" ng-controller="autoFitTextExampleController as controller">
    <div style="margin-bottom: 20px">
        <label>Choose Preset Text:</label>
        <select class="c-select" ng-model="controller.selectedValue"
                ng-options="option.value as option.name for option in controller.options"
                ng-change="controller.onChange()">
        </select>
    </div>
    <div>
        <button ng-click="controller.container_expandWidth(5)">+</button>
        <button ng-click="controller.container_expandWidth(-5)">-</button>

        <button ng-click="controller.visibilityToggler_click()">Show/Hide</button>

        <div auto-fit-text
             class="g-autoFitExample-content"
             ng-show="controller.show"
             ng-style="{ width: controller.containerSize.width + 'vw', height: controller.containerSize.height + 'vh' }">
            <span style="font-size:100%"></span>
        </div>
    </div>
    <div class="g-autoFitExample-text">
        <textarea class="g-autoFitExample-textarea"></textarea>
        <input type="button" class="g-autoFitExample-button" ng-click="controller.onTextChange()" value="Set Text"/>
    </div>

</div>