Skip to main content

prefer-no-layout-sensitive-apis

What it flags​

Access to layout-sensitive DOM APIs (offsetLeft, scrollTop, clientWidth, getBoundingClientRect(), scrollIntoView(), and similar) that force a synchronous style/layout recalculation.

Options​

This rule has no options.

// eslint.config.js (flat config)
import rxAngular from '@rx-angular/eslint-plugin';

export default [
  {
    plugins: { '@rx-angular': rxAngular },
    rules: {
      '@rx-angular/prefer-no-layout-sensitive-apis': 'error',
    },
  },
];
// .eslintrc (legacy)
"rules": {
  "@rx-angular/prefer-no-layout-sensitive-apis": "error"
}

❌ Incorrect​

el.offsetLeft += 10;
el.scrollTop = 0;
const { innerWidth: elemWidth } = elem;
const { x, y, width, height } = el.getBoundingClientRect();
el.scrollIntoView();
const orientation = el.clientHeight > el.clientWidth ? 'portrait' : 'landscape';

✅ Correct​

const el = document.getElementById('myEl');
el.addEventListener('click', () => {
  console.log('element clicked');
});

Why​

See Understanding change detection in Angular.