CODEWITHSUNDEEP
htmlangulartypescriptangular5
user8116198
user8116198

Reputation:

Angular 5 | Get height on element click

I am currently trying to get a height of an element which I click on in a sidebar I am working on in order to show sub menus. I have currently got this code...

<li (click)="newsExpanded = !newsExpanded; getMargin($event)" style="margin-bottom: 50px;">
    <a>
        <i class="fa fa-newspaper"></i>
            <span>News</span>
            <i class="fa fa-angle-left sidebar__sub_menu_icon"></i>
            <ul class="sidebar__sub_menu" [class.expanded]="newsExpanded">
                 <li>
                     <a>Create New Post</a>
                 </li>
                 <li>
                     <a>View All Posts</a>
                </li>
           </ul>
     </a>
</li>

So when the news is expanded it adds the class of expanded which just displays block on the sub menu, that is working fine but I want to add a margin bottom to the inner ul on the click of the outer li. This would have to be the height of the inner ul. You can see that I've done a class of getMargin however, this doesn't do anything currently and it's what I'm trying to figure out.

Any help would be appreciated and if their is a better way to this then please tell me, I am new to Angular so any feedback I am grateful for.

Upvotes: 1

Views: 2284

Answers (1)

The.Bear
The.Bear

Reputation: 5855

To get the height of the clicked element using the $event you should do the following: 

onClick($event): void {
    let clientHeight = $event.target.clientHeight; //Height + padding without borders
    let offsetHeight = $event.target.offsetHeight; //Height + padding with borders

    //if you need the element plus margin-top/bottom
    let compStyle = window.getComputedStyle($event.target)
    clientHeight += parseInt(compStyle.getPropertyValue('margin-top'));
    clientHeight += parseInt(compStyle.getPropertyValue('margin-bottom'));
}

DEMO: https://stackblitz.com/edit/angular-1apnhb

Here you are MDN docs of clientHeight and offsetHeight. Also you can take a look of scrollHeight.

Upvotes: 2

Related Questions