Отключение шаблона от change detection через ViewRef.detach()

В Angular метод detach() у ViewRef позволяет временно исключить представление из механизма обнаружения изменений. Это значит, что Angular перестаёт отслеживать изменения данных внутри отключённого представления, что полезно при работе с тяжёлыми компонентами или при необходимости заморозить часть UI.

ViewRef можно получить, например, при создании представления через ViewContainerRef.createEmbeddedView() или createComponent(). После вызова detach() Angular перестаёт проверять это представление при каждом цикле изменений. Чтобы снова активировать его, вызывается viewRef.reattach().

const viewRef = viewContainer.createEmbeddedView(templateRef);
viewRef.detectChanges();
viewRef.detach();

// ...позже
viewRef.reattach();

Такой подход позволяет вручную управлять производительностью, особенно при наличии большого количества вложенных представлений, не требующих постоянного обновления.

👉 @sWebDev

Global Technology Index

Интерактивная анимация дешборда на Three.js.

👉 @sWebDev

Сколько файлов нужно Angular для счастья?

👍 — Тысяч 50 минимум, иначе не солидно.

❤️ — Главное, чтобы проект запускался.

👉 @sWebDev | #юмор

Animatelo

Animatelo — JavaScript-версия анимаций из Animate.css, работающая без зависимостей. Поддерживает все основные эффекты (вход, выход, внимание и др.) и управляется через классы. Подойдёт для проектов, где нужны CSS-анимации без подключения сторонних стилей.

👉 @sWebDev

Carnival Spinner

Интерактивная сцена с колесом на Three.js.

👉 @sWebDev

Аутентификация Firebase в Angular 19

В Angular 19 интеграция с Firebase позволяет реализовать аутентификацию с помощью email/пароля, социальных сетей и других методов. Статья показывает, как настроить Firebase в проекте, использовать AngularFire для подключения и создать сервис для управления сессиями и входом пользователей. Полезно для тех, кто хочет добавить надёжную аутентификацию без лишнего кода.

👉 @sWebDev

Preloader and Layout Experiment

Анимация загрузки страницы на GSAP.

👉 @sWebDev

NanoJS

NanoJS — сверхмаленькая JavaScript-библиотека для базовых операций с DOM. Предоставляет минимальный набор функций для селекторов, событий и анимации. Подойдёт для проектов, где нужен ручной контроль без jQuery и тяжёлых фреймворков.

👉 @sWebDev

Структура аргументов useOptimistic()

Что принимает useOptimistic() в качестве начальных данных?

Забыли? Вернитесь к посту от 05.05.2025.

👉 @sWebDev

Сталкивались с такими крайностями в комментариях к патчам в реальной жизни?

👍 – Да, с минимализмом на больших патчах постоянно.

❤️ – С графоманией на маленьких — редко, но метко.

🤔 – Я сам иногда грешу то в одну, то в другую сторону.

👉 @sWebDev | #юмор

Очистка ресурсов через DestroyRef.onDestroy()

DestroyRef предоставляет метод onDestroy(), с помощью которого можно зарегистрировать функцию, выполняемую при уничтожении экземпляра. Данный способ подходит для отписки от Observable, остановки таймера или удаления обработчика событий без реализации интерфейса OnDestroy.

import { Component, inject, DestroyRef } from '@angular/core';
import { interval, Subscription } from 'rxjs';

@Component({
  selector: 'demo-ticker',
  template: `<p>{{ tick }}</p>`,
})
export class TickerComponent {
  tick = 0;
  private sub: Subscription;

  constructor() {
    const destroyRef = inject(DestroyRef);

    this.sub = interval(1000).subscribe(v => (this.tick = v));

    destroyRef.onDestroy(() => {
      this.sub.unsubscribe();
      console.log('Подписка завершена');
    });
  }
}

Зарегистрированная функция выполняется при уничтожении компонента. Такой подход помогает избежать утечек памяти и использовать лаконичную форму очистки.

👉 @sWebDev

Draggable SVG Logo

Логотип с эффектом перетаскивания на GSAP и Draggable.js.

👉 @sWebDev

Откуда реально пришли ваши ключевые знания по программированию?

👍 – Из курсов.

❤️ – Из бессонных ночей с гуглом и форумами.

🤔 – Разбор чужого кода и практика.

👉 @sWebDev | #юмор

Yall.js

Yall.js — легковесная библиотека для ленивой загрузки изображений и видео с использованием Intersection Observer. Работает без зависимостей и подходит для оптимизации скорости загрузки страниц в проектах с большим количеством медиа.

👉 @sWebDev

Dot Controls

Стилизованные интерактивные слайдеры на Draggable.js.

👉 @sWebDev

Гексагональная архитектура с NgRx Signal Store в Angular

Статья объясняет, как использовать гексагональную архитектуру при работе с NgRx Signal Store и Angular Signals. Данный подход позволяет изолировать бизнес-логику от инфраструктурных деталей, повысить модульность и упростить тестирование.

👉 @sWebDev

Interactive 3D Birthday Cake Celebration

Интерактивная анимация открытки с тортом на Three.js.

👉 @sWebDev

AutoComplete.js

AutoComplete.js — JavaScript-библиотека для создания быстрого и адаптивного автозаполнения. Поддерживает динамические и статические источники данных, кастомизацию шаблонов и событий. Подойдёт для форм, поисковых строк и интерфейсов с предсказанием ввода.

👉 @sWebDev

Работа с хуком unstable_useCacheRefresh

Что позволяет сделать хук unstable_useCacheRefresh()?

Забыли? Вернитесь к посту от 12.05.2025.

👉 @sWebDev