Работа с ViewContainerRef в Angular

Какой декоратор используется для доступа к ViewContainerRef в компоненте?

Если забыли, то вернитесь к посту от 26.08.2024.

👉 @sWebDev

Как вы думаете, можно ли стать хорошим разработчиком, пропуская основы?

❤️- ChatGPT решит все мои проблемы.

👍 - Может быть, но лучше знать основы.

🤔 - Нет.

👉 @sWebDev | #юмор

Использование useFieldArray в React

useFieldArray — это хук из библиотеки React Hook Form, помогающий управлять массивами полей в динамических формах.

Пример:

import React from 'react';
import { useForm, useFieldArray, Controller } from 'react-hook-form';

function DynamicForm() {
  const { control, handleSubmit } = useForm({ defaultValues: { items: [''] } });
  const { fields, append, remove } = useFieldArray({ control, name: 'items' });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <Controller
            name={`items[${index}]`}
            control={control}
            render={({ field }) => <input {...field} />}
          />
          <button type="button" onClick={() => remove(index)}>Удалить</button>
        </div>
      ))}
      <button type="button" onClick={() => append('')}>Добавить элемент</button>
      <input type="submit" />
    </form>
  );
}

export default DynamicForm;

👉 @sWebDev

Imbue loader v0.4

Анимированный загрузчик с колбой на Anime.js.

👉 @sWebDev

У вас уже наступил год "Х"?

👍 - Да.

❤️ - Пусть учатся понимать.

👉 @sWebDev | #юмор

RoughNotation

RoughNotation — это JavaScript-библиотека для аннотирования текста и элементов веб-страниц с использованием «грубых» или рисованных стилей, похожих на ручные зарисовки.

👉 @sWebDev

Textures

3Д анимация фигуры на GSAP.

👉 @sWebDev

Использование изолированных модулей в Angular

Статья описывает поддержку опции isolatedModules в Angular 18.2, которая ускоряет сборку приложения на 10% за счёт использования транспиляции TypeScript через бандлер (например, esbuild) вместо обычного TypeScript. Эта опция позволяет оптимизировать код, инлайнить const и обычные enum, и убрать необходимость в оптимизациях на основе Babel для TypeScript-кода. Для включения этой функции нужно добавить "isolatedModules": true в tsconfig.json.

👉 @sWebDev

Eye

Анимация глаза на GSAP.

👉 @sWebDev

Superfine

Superfine — это минималистичная JavaScript-библиотека для работы с виртуальным DOM, которая позволяет создавать и обновлять пользовательские интерфейсы с минимальными затратами на производительность.

👉 @sWebDev

Использование ValidatorFn

Что принимает функция-валидатор, созданная с использованием ValidatorFn?

Если забыли, то вернитесь к посту от 02.09.2024.

👉 @sWebDev

Разница налицо.

👉 @sWebDev | #юмор

Динамическая загрузка компонентов с использованием возможностей Angular Ivy

Одним из нововведений в Angular с появлением Ivy является возможность динамической загрузки компонентов. Ранее этот процесс требовал использования ComponentFactoryResolver. С Ivy же, динамическая загрузка компонентов стала проще и интуитивно понятнее.

Пример:

Для динамической загрузки компонентов мы можем использовать метод ViewContainerRef.createComponent. Он позволяет загружать компоненты по мере необходимости, не загружая их в основной бандл приложения.

import { Component, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-dynamic-loader',
  template: `<ng-template #container></ng-template>`
})
export class DynamicLoaderComponent {
  @ViewChild('container', { read: ViewContainerRef, static: true }) container: ViewContainerRef;

  constructor() {}

  loadComponent(component: any) {
    this.container.clear();
    this.container.createComponent(component);
  }
}

👉 @sWebDev

Torus Vortex

Анимация тороидального вихря на Three.js.

👉 @sWebDev

Когда выглядит не очень, но, в принципе, работает.

👉 @sWebDev | #юмор

NoSleep.js

NoSleep.js — это библиотека JavaScript, которая предотвращает переход мобильных устройств в спящий режим, когда веб-страница активна. Это особенно полезно для приложений, где важно поддерживать активность экрана, таких как видеоплееры или приложения для работы с картами.

👉 @sWebDev

Pixies at rockpoint palladium 1991

Интерактивный постер на Anime.js.

👉 @sWebDev

Интеграция аутентификации с отпечатком пальца и Face ID в ваше Angular-приложение с использованием WebAuthn: пошаговое руководство

Статья описывает процесс добавления биометрической аутентификации (отпечаток пальца и Face ID) в Angular-приложение с помощью WebAuthn.

👉 @sWebDev