WrDensity

import { Component } from '@angular/core';
import { WrDensity, WrDensityDirective, wrDensityPrePaintScript } from 'ngwr/density';

@Component({ imports: [WrDensityDirective] })
export class MyComponent {}

private readonly density = inject(WrDensity);

this.density.set('touch');
this.density.cycle();
this.density.current(); // 'sm' | 'md' | 'lg' | 'touch'

[data-wr-density='sm'] {
  --wr-density-y: 0.5;
  --wr-density-x: 0.8;
}

import { provideWr } from 'ngwr';
import { withDensity } from 'ngwr/density';

providers: [provideWr(withDensity({ defaultDensity: 'sm' }))],

<script>(function(){try{var m=null,r=null;try{r=window.localStorage.getItem("wr-density");}catch(e){}if(r!==null){try{var p=JSON.parse(r);if(p!==null&&typeof p==="object"&&"v" in p){if(p.e===undefined||p.e>=Date.now())m=p.v;}else{m=p;}}catch(e){m=r;}}if(["sm","md","lg","touch"].indexOf(m)<0)m="md";document.documentElement.setAttribute("data-wr-density",m);}catch(e){}})();</script>

import { wrDensityPrePaintScript } from 'ngwr/density';

// Pass the values you gave withDensity() and withStorage():
wrDensityPrePaintScript({ defaultDensity: 'sm', storageKey: 'app-density', storagePrefix: 'myapp:' });