CODEWITHSUNDEEP
javascriptcssangulartypescript
James Delaney
James Delaney

Reputation: 1776

How to take width of html element in angular2?

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.

Upvotes: 1

Views: 425

Answers (2)

user4676340
user4676340

Reputation: 

<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.

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41397

use the ngClass by creating a separate style class.

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

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

Upvotes: 2

Related Questions