What is the method for retrieving the width of an HTML element in Angular 2?

Question

My objective is to extract the width of the table and use it as a reference point for applying styles dynamically. Here's an example:

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

However, I'm currently facing difficulties in obtaining the precise width of the table.

Answer 1

Answer №1

To implement dynamic styling in Angular, leverage the ngClass directive and define a separate style class.

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

div class="table-grid"  [ngClass]="{'custom-style':  currentWidth < 1200 }>

Answer 2

To implement dynamic styling in Angular, leverage the ngClass directive and define a separate style class.

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

div class="table-grid"  [ngClass]="{'custom-style':  currentWidth < 1200 }>

Answer 3

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

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

You have the option to utilize ngClass as suggested by @SachilaRanawaka, both are functional.

Answer 4

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

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

You have the option to utilize ngClass as suggested by @SachilaRanawaka, both are functional.