How to get style from click event target?

Question

In angular material table, there is 24px padding-left on first cell:

td.mat-cell:first-of-type, td.mat-footer-cell:first-of-type, th.mat-header-cell:first-of-type {
    padding-left: 24px;
}

How can i get it? ev.target.style.paddingLeft is empty.

stackblitz

Answer 1

You can achieve what you want by passing the DOM element as a template parameter:

<th mat-header-cell *matHeaderCellDef #parameter (click)="cellClick($event, parameter)" > No. </th>

cellClick(ev: MouseEvent, element: HTMLElement) {
 console.log(element.offsetWidth);
}

Answer 2

The window.getComputedStyle() method is used to retrieve the current, actual, properties of an element. window.getComputedStyle(myElement).paddingLeft will give you the actual left padding of your element (with 'px' attached at the end). In order to compute the element's width + left padding, use the following:

+window.getComputedStyle(myElement).paddingLeft.slice(0, -2) + 
+window.getComputedStyle(myElement).width.slice(0, -2);

If the width is fixed and never changes , just use myElement.width instead of getComputerStyle() ;