Resize окна эмитит десятки событий в секунду — каждый пиксель. Но UI интересует только смена категории: mobile / tablet / desktop. Превращаем поток пикселей в поток breakpoints.
Какую проблему решаем
Если каждый pixel-resize запускает Change Detection — UI лагает. Если хранить breakpoint в поле и обновлять в resize handler — легко получить устаревшее значение или забыть про подписку при destroy.
Операторы и зачем они нужны
startWith(window.innerWidth) — начальная ширина, чтобы UI знал состояние до первого resize.
auditTime(20) — раз в 20мс эмитим последнюю ширину. Сглаживаем шквал событий.
map(width => breakpoint(width)) — классифицируем ширину в категорию.
distinctUntilChanged — пропускаем только смену категории, а не каждый width.
Подводные камни
debounceTime — UI обновится только после ОКОНЧАНИЯ resize. При плавном растягивании окна категория обновится с задержкой.
throttleTime без trailing config — финальная ширина может потеряться, и breakpoint застрянет.
Не эмитьте пиксели в template, если UI зависит только от категории. Это лишний noise для change detection.
Что в итоге получаем
UI реагирует только на осмысленную смену breakpoint, а не на каждый пиксель ресайза.