Что позволяет делать метод runInInjectionContext()?
Anonymous Quiz
7%
Создавать новые Angular-компоненты.
84%
Выполнять функции в контексте инъекции зависимостей.
10%
Управлять жизненным циклом сервисов.
0%
Компилировать Angular-приложения.
👍3
Рендеринг длинных списков без потерь производительности в Angular
В Angular рендеринг длинных списков может перегружать DOM, снижая производительность.
Пример:
Этот компонент создает виртуальный список, динамически заменяя элементы при прокрутке. В памяти остается только небольшое количество элементов, необходимое для отображения.
Дополнительно можно задать динамическую высоту элементов:
Это позволяет адаптировать высоту элементов к ширине экрана, улучшая UX.
👉 @sWebDev
В Angular рендеринг длинных списков может перегружать DOM, снижая производительность.
CdkVirtualScrollViewport
из Angular CDK решает эту проблему, рендеря только видимые элементы. Пример:
<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
<div *cdkVirtualFor="let item of items" class="item">
{{ item }}
</div>
</cdk-virtual-scroll-viewport>
Этот компонент создает виртуальный список, динамически заменяя элементы при прокрутке. В памяти остается только небольшое количество элементов, необходимое для отображения.
Дополнительно можно задать динамическую высоту элементов:
<cdk-virtual-scroll-viewport [itemSize]="getItemSize()" class="viewport">
<div *cdkVirtualFor="let item of items" class="item">
{{ item }}
</div>
</cdk-virtual-scroll-viewport>
getItemSize() {
return window.innerWidth > 768 ? 50 : 100;
}
Это позволяет адаптировать высоту элементов к ширине экрана, улучшая UX.
👉 @sWebDev
🔥4👍1
Booking.js
Booking.js — это библиотека для создания пользовательских интерфейсов бронирования с интуитивно понятным выбором дат. Она ориентирована на веб-приложения, требующие функционала бронирования, например, аренду жилья или услуги.
👉 @sWebDev
Booking.js — это библиотека для создания пользовательских интерфейсов бронирования с интуитивно понятным выбором дат. Она ориентирована на веб-приложения, требующие функционала бронирования, например, аренду жилья или услуги.
👉 @sWebDev
👍4
Тестирование React-хуков с помощью Vitest
В статье обсуждается, как эффективно тестировать пользовательские хуки в React, используя библиотеку Vitest. Рассматриваются методы настройки среды тестирования с помощью JSDOM, применения React Testing Library для рендеринга хуков и использования функций
👉 @sWebDev
В статье обсуждается, как эффективно тестировать пользовательские хуки в React, используя библиотеку Vitest. Рассматриваются методы настройки среды тестирования с помощью JSDOM, применения React Testing Library для рендеринга хуков и использования функций
spyOn
и waitFor
для тестирования асинхронной логики и внешних API-вызовов. 👉 @sWebDev
❤3
Midnight.js
Midnight.js — это небольшая библиотека JavaScript, которая позволяет динамически изменять цвет навигационной панели в зависимости от фона, над которым она находится. Работает путем определения родительского элемента и применения соответствующих CSS-классов при прокрутке страницы.
👉 @sWebDev
Midnight.js — это небольшая библиотека JavaScript, которая позволяет динамически изменять цвет навигационной панели в зависимости от фона, над которым она находится. Работает путем определения родительского элемента и применения соответствующих CSS-классов при прокрутке страницы.
👉 @sWebDev
❤4
Работа с ChangeDetectorRef.detach()
Для чего используется метод
Если забыли, то вернитесь к посту от10.02.2025 .
👉 @sWebDev
Для чего используется метод
ChangeDetectorRef.detach()
?Если забыли, то вернитесь к посту от
👉 @sWebDev
👍3
Для чего используется метод ChangeDetectorRef.detach()?
Anonymous Quiz
9%
Удаляет компонент из DOM.
17%
Сбрасывает все изменения в компоненте.
18%
Запускает систему обнаружения изменений.
55%
Отключает компонент от системы обнаружения изменений.
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Часто отвлекаетесь на что-то в компе?
👍 - Постоянно.
❤️ - Нет, только если в перерывах.
🤔 - Скорее отвлекаюсь на код.
👉 @sWebDev | #юмор
👍 - Постоянно.
❤️ - Нет, только если в перерывах.
🤔 - Скорее отвлекаюсь на код.
👉 @sWebDev | #юмор
👍21❤4🤔1
Создание реактивных форм без FormBuilder
В Angular для работы с реактивными формами часто используют
При создании формы каждый элемент добавляется в
Пример:
👉 @sWebDev
В Angular для работы с реактивными формами часто используют
FormBuilder
, но создать форму можно и вручную с помощью new FormGroup()
и new FormControl()
. При создании формы каждый элемент добавляется в
FormGroup
через new FormControl()
, где первый аргумент — это начальное значение поля. Также можно динамически добавлять или удалять контролы с помощью методов addControl()
и removeControl()
.Пример:
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-login',
template: `
<form [formGroup]="loginForm">
<input formControlName="email" placeholder="Email">
<input formControlName="password" type="password" placeholder="Пароль">
</form>
`
})
export class LoginComponent {
loginForm = new FormGroup({
email: new FormControl(''),
password: new FormControl('')
});
}
👉 @sWebDev
👍4
Mustache.js
Mustache.js – это легковесный шаблонизатор для JavaScript, использующий синтаксис двойных фигурных скобок (
👉 @sWebDev
Mustache.js – это легковесный шаблонизатор для JavaScript, использующий синтаксис двойных фигурных скобок (
{{}}
). Он позволяет динамически генерировать HTML, заменяя плейсхолдеры в шаблоне переданными данными. Mustache.js не имеет логики (условий, циклов), что делает его простым и универсальным.👉 @sWebDev
👍3👎1🤔1
Микрофронтенды с Angular и Native Federation
Микрофронтенды позволяют разбить большое приложение на независимые модули, ускоряя разработку и упрощая поддержку. Статья объясняет, как внедрить этот подход в Angular с помощью Native Federation — встроенного механизма для динамической загрузки модулей. Разбираются преимущества, сложности и реальные сценарии использования, полезные для масштабных проектов.
👉 @sWebDev
Микрофронтенды позволяют разбить большое приложение на независимые модули, ускоряя разработку и упрощая поддержку. Статья объясняет, как внедрить этот подход в Angular с помощью Native Federation — встроенного механизма для динамической загрузки модулей. Разбираются преимущества, сложности и реальные сценарии использования, полезные для масштабных проектов.
👉 @sWebDev
👍3
Media is too big
VIEW IN TELEGRAM
Shader-Driven Parametric Glow Shape
Анимация параметрической светящейся формы с шейдерами на Three.js.
👉 @sWebDev
Анимация параметрической светящейся формы с шейдерами на Three.js.
👉 @sWebDev
👍3