How to set height of md dailog element without using jquery or javascript?

Question

i want to set a height of a element just once in angular but i dont want to use a jquery inside it.I cant use ng-style as it fires multiple times.

here is my html for that

 <md-card>
            <md-table-container flex>
                <md-virtual-repeat-container id="vrContainerProcessFlow" ng-init="$ctrl.getMdTableContainerWidth()">
                    <table md-table class="md-table-striped" md-row-select="true" multiple="true" ng-model="$ctrl.selected" md-progress="$ctrl.promise">
                        <thead md-head fix-head md-order="modifyTs">
                            <tr md-row>
                                <th md-column md-order-by="processFlowNbr">Number</th>
                                <th md-column md-order-by="processFlowDesc">Name</th>
                                <th md-column md-order-by="ownerUserId">Created By</th>
                                <th md-column md-order-by="modifyUserId">Modified By</th>
                                <th md-column md-order-by="createTs">Created Date</th>
                                <th md-column md-order-by="modifyTs">Last Modified Date</th>
                            </tr>
                        </thead>
                        <tbody md-body>
                            <tr md-row md-select="processFlow" md-on-select="$ctrl.updateSelection" md-on-deselect="$ctrl.updateSelection" md-virtual-repeat="processFlow in $ctrl.processFlows | orderBy: modifyTs">
                                <td md-cell
                                    ng-click="$ctrl.OnProcessFlowClick($event, processFlow)">
                                    {{processFlow.processFlowNbr}}
                                    <md-tooltip>Click to modify</md-tooltip>
                                </td>
                                <td md-cell>{{processFlow.processFlowNbr}}</td>
                                <td md-cell>{{processFlow.processFlowDesc}}</td>
                                <td md-cell>{{processFlow.ownerUserId}}</td>
                                <td md-cell>{{processFlow.modifyUserId}}</td>
                                <td md-cell>{{processFlow.createTs | date:'MM/dd/yyyy'}}</td>
                                <td md-cell>{{processFlow.modifyTs | date:'MM/dd/yyyy'}}</td>
                            </tr>
                            <tr md-row ng-if="$ctrl.processFlows.length === 0">
                                <td md-cell>No Records Found !</td>
                            </tr>
                        </tbody>
                    </table>
                </md-virtual-repeat-container>
            </md-table-container>
            <process-flows-confirm-delete></process-flows-confirm-delete>
        </md-card>

in this im setting height for md-virtual repeat container and this mark up is wrapped up in a div with id "mdDialogProcessFlows".

This is the function for calculating the height in typescript

 getMdTableContainerWidth(): void {
        let style = "height: ";
        let mdDialog = document.getElementById("mdDialogProcessFlows").scrollHeight;
        style += mdDialog - 80 + 'px';

        let mdVRContainer = angular.element(document.getElementById("vrContainerProcessFlow"));
        mdVRContainer.attr("style", style);
    }

does any body has any solution without using ng-style, directives and ofcourse no javascript or jquery?

Answer 1

You can still use ng-style with a one-time bind. This will only set the value once and doesn't call the function a second time. Use this syntax:

ng-style="::{width: getMdTableContainerWidth()}"

The :: will make the expression a one-time bind