How to take width of html element in angular2?

Question

I want to take the width of my table and then to use that width for the condition to applying styles dynamically based on width.
Example:

div class="nano-table-grid"
    [ngStyle]="{ tableCurrentWidth < 1200px ? 'flex: none; max-width: 75px;'}>

I have the problem to take that current width of the table.

Possible duplicate of How to get width of (DOM) Element in Angular2 — Ans Bilal
– Ans Bilal, Commented Jul 26, 2018 at 13:13
with this it is really hard to tell how you are computing/getting the width of that element. If you could post the other code that would help. — Jai
– Jai, Commented Jul 26, 2018 at 13:17

Sachila Ranawaka · Accepted Answer · 2018-07-26 13:13:19Z

2

use the ngClass by creating a separate style class.

.sample{
  flex: none; 
  max-width: 75px;
}

div class="nano-table-grid"  [ngClass]="{'sample':  tableCurrentWidth < 1200px }>

answered Jul 26, 2018 at 13:13

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user4676340 · Accepted Answer · 2018-07-26 13:21:33Z

1

<div #table class="nano-table-grid"
  [ngStyle]="tableStyle(table.offsetWidth)"></div>

tableStyle(tableWidth: number) {
  return tableWidth > 1200 ? {
    display: 'block'
  } : {
    display: 'flex',
    maxWidth: '75px'
  }
}

You can instead use ngClass as @SachilaRanawaka suggested, both work.

answered Jul 26, 2018 at 13:21

user4676340