DreyLiky Dev. 🇺🇦
DreyLiky Dev. 🇺🇦
  • Видео 25
  • Просмотров 41 643
РЕАКТИВНІ ФОРМИ - РЕКОМЕНДАЦІЇ [ANGULAR]
Розповідаю про те, як покращити свої реактивні форми. Показую напрацювання зі свого досвіду, які допоможуть вам краще описувати, типізувати та генерувати свої реактивні форми.
Stackblitz прикладу:
stackblitz.com/edit/stackblitz-starters-pzqbe3?file=src%2Fform%2Fuser-form.class.ts
Формуємо україномовну Angular спільноту:
t.me/angular_community_ua
Донат на підтримку каналу:
patreon.com/dreyliky
www.buymeacoffee.com/dreyliky
00:00 - Опис реактивних форм;
01:32 - Типізація реактивних форм через FormGroupDef;
04:30 - Поля та методи в реактивній формі;
05:24 - Взаємодія контролів один з одним всередині реактивної форми;
05:52 - setControlEnabledState утиліта для встановлення enabled/disabled на базі boolea...
Просмотров: 1 125

Видео

ОПТИМІСТИЧНИЙ UI [ANGULAR]
Просмотров 888Год назад
Розповідаю про концепцію "Оптимістичний UI" та в чому його відмінність від "Песимістичного UI" на приклад Angular проєкту. Optimistic UI & Pessimistic UI: uxplanet.org/faster-user-experience-optimistic-ui-41b151feaa28 Формуємо україномовну Angular спільноту в телеграмі: t.me/angular_community_ua Код Angular проєкту з відео: github.com/dreyliky/optimistic-and-pessimistic-ui-example Код NestJS пр...
ОБРОБКА СТАТУСІВ OBSERVABLE [ANGULAR]
Просмотров 826Год назад
Потік із даними або бізнес-логікою має кілька статусів, як нам часто потрібно візуально відображати: Loading, Error and Success. Директива ngxAsync допомагає візуально представити ц статуси простим способом. Просто додайте структурну директиву ngxAsync до свого елемента. Стаття на Medium: medium.com/@dreyliky/c406ca91549c Github: github.com/dreyliky/ngx-async Приклади з відеоролику (StackBlitz)...
ТИПІЗОВАНІ NG-TEMPLATE [ANGULAR] - GUIDE
Просмотров 746Год назад
Розповідаю про те, як налаштувати типізацію для роботи з даними контексту ng-template. ng-template & ngTemplateOutlet type checking setup. Формуємо україномовну Angular спільноту: t.me/angular_community_ua Проєкт з відео на Github: github.com/dreyliky/ng-template-type-safe-example Стаття з описом найбільш схожої реалізації цієї задачі: medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5...
NG-TEMPLATE [ANGULAR]
Просмотров 784Год назад
Розповідаю про роботу з ng-template. Для чого потрібн шаблони як ними користуватись? Оговорюємо як даними в формат "контексту" в шаблонах. Розглядаємо роботу з шаблонами на приклад створення тупого компоненту з можливістю кастомізації його контенту. Формуємо україномовну Angular спільноту в телеграмі: t.me/angular_community_ua Код проєкту: github.com/dreyliky/ng-template-usage-example Запропон...
КОМПОНЕНТИ-АГНОСТИКИ [ANGULAR]
Просмотров 871Год назад
Розповідаю про концепцію "Data Agnostic Components". Концепція дозволяє робити гнучк туп компоненти без прив'язки до конкретного формату даних. Формуємо україномовну Angular спільноту в телеграмі: t.me/angular_community_ua Data Agnostic Components InDepth: indepth.dev/posts/1314/agnostic-components-in-angular Код проєкту з відео: github.com/dreyliky/data-agnostic-components-example Запропонуват...
КОД РЕВЬЮ ДЛЯ ПІДПИСНИКА #1 [ANGULAR]
Просмотров 1,3 тыс.Год назад
Дивлюсь на проєкт підписника даю свої коментар щодо того що бачу перед собою. Код ревью Angular проєкта для підписника. Формуємо україномовну Angular спільноту в телеграм: t.me/angular_community_ua Мій Github: github.com/dreyliky Запропонувати ідею каналу: t.me/ Wgg1OUUP46k0NmUy Донат на підтримку каналу: patreon.com/dreyliky www.buymeacoffee.com/dreyliky
NO REDUX СТЕЙТ МЕНЕДЖЕР - ОГЛЯД [ANGULAR]
Просмотров 6542 года назад
Огляд NO REDUX стейт менеджеру - ngx-base-state. Дивимось як працювати з цією бібліотекою. Бібліотека ngx-base-state містить набір базових класів як полегшують операції (екшени) з даними як зберігаються всередині. Створюємо свої класи, наслідуємось від базових в нас є стейт. Викликаємо методи стейтів через прошарок сервісів. ngx-base-state має DevTools для відслідковування змін в стейтах. На в...
СТЕЙТ МЕНЕДЖМЕНТ [ANGULAR]
Просмотров 1,1 тыс.2 года назад
Розповідаю про те, як працювати з NO REDUX стейтами в Angular. Вс приклади розглядаються на баз бібліотеки ngx-base-state. Бібліотека ngx-base-state містить набір базових класів як полегшують операції (екшени) з даними як зберігаються всередині. Створюємо свої класи, наслідуємось від базових в нас є стейт. Викликаємо методи стейтів через прошарок сервісів. ngx-base-state має DevTools для відсл...
ДИНАМІЧНЕ СТВОРЕННЯ КОМПОНЕНТІВ [ANGULAR]
Просмотров 1,1 тыс.2 года назад
Розповідаю, на прикладі, про те як динамічно створювати компоненти. Що таке ViewContainerRef, ComponentRef, ComponentFactoryResolver..? Як є нюанси при динамічному створенн компонентів? Сподобалось? Підпишись на канал став лайк цьому відео. Дякую! Github посилання на проєкт з відеоролику: github.com/dreyliky/dynamic-component-creation-example Моя бібліотека: ngx-os.io github.com/dreyliky/ngx-o...
ChangeDetection ADVANCED [ANGULAR]
Просмотров 1,2 тыс.2 года назад
Розповідаю про детал роботи з ChangeDetection. Обговорюємо ApplicationRef.tick & ChangeDetectorRef (detectChanges, markForCheck, detach, reattach). Що таке хвиля ChangeDetection? Що таке ExpressionChangedAfterItHasBeenCheckedError як з нею боротися? Сподобалось? Підпишись на канал став лайк цьому відео. Дякую! Перша частина: ruclips.net/video/PQRSR1YVlgc/видео.html Моя бібліотека: ngx-os.io g...
ChangeDetection [ANGULAR]
Просмотров 2 тыс.2 года назад
Розповідаю про ChangeDetection розбираємось як він працює. Порівнюємо стратегії Default & OnPush. Розбираємо роботу методів detectChanges & markForCheck. Оговорюю нюанси даю поради щодо роботи з OnPush. Сподобалось? Підпишись на канал став лайк цьому відео. Дякую! Моя бібліотека: ngx-os.io github.com/dreyliky/ngx-os Запропонувати ідею каналу: t.me/ Wgg1OUUP46k0NmUy Донат на підтримку каналу:...
ВІЙНА. ЩО ДАЛІ?
Просмотров 7932 года назад
Виїхав з окупації. Що далі?
ЧИСТЫЙ КОД - КЛАССЫ [ANGULAR] #2 - GUIDE
Просмотров 1,8 тыс.2 года назад
ЧИСТЫЙ КОД - КЛАССЫ [ANGULAR] #2 - GUIDE
PATH ALIASES & INDEX.TS [ANGULAR]
Просмотров 2,9 тыс.2 года назад
PATH ALIASES & INDEX.TS [ANGULAR]
ControlValueAccessor - КАК РАБОТАЕТ [ANGULAR] - GUIDE
Просмотров 6 тыс.2 года назад
ControlValueAccessor - КАК РАБОТАЕТ [ANGULAR] - GUIDE
КАК СДЕЛАТЬ ПОДДЕРЖКУ ТЕМ [ANGULAR] - GUIDE
Просмотров 1,5 тыс.2 года назад
КАК СДЕЛАТЬ ПОДДЕРЖКУ ТЕМ [ANGULAR] - GUIDE
ОПТИМИЗАЦИЯ ОБРАБОТЧИКОВ СОБЫТИЙ [ANGULAR] - GUIDE
Просмотров 2,2 тыс.2 года назад
ОПТИМИЗАЦИЯ ОБРАБОТЧИКОВ СОБЫТИЙ [ANGULAR] - GUIDE
УМНЫЕ И ГЛУПЫЕ КОМПОНЕНТЫ [ANGULAR] - GUIDE
Просмотров 3,7 тыс.2 года назад
УМНЫЕ И ГЛУПЫЕ КОМПОНЕНТЫ [ANGULAR] - GUIDE
ОТРЕФАКТОРИМ! [ANGULAR] #2 - GUIDE
Просмотров 7882 года назад
ОТРЕФАКТОРИМ! [ANGULAR] #2 - GUIDE
ЧИСТЫЙ КОД - МЕТОДЫ [ANGULAR] #1 - GUIDE
Просмотров 3,5 тыс.2 года назад
ЧИСТЫЙ КОД - МЕТОДЫ [ANGULAR] #1 - GUIDE
СОЗДАЛ БИБЛИОТЕКУ ДЛЯ ANGULAR. ЗАЧЕМ?
Просмотров 1,1 тыс.2 года назад
СОЗДАЛ БИБЛИОТЕКУ ДЛЯ ANGULAR. ЗАЧЕМ?
ОТРЕФАКТОРИМ! [ANGULAR] #1 - GUIDE
Просмотров 9293 года назад
ОТРЕФАКТОРИМ! [ANGULAR] #1 - GUIDE
НЕ ПИШИ ЛОГИКУ В ШАБЛОНЕ [ANGULAR] - GUIDE
Просмотров 2,9 тыс.3 года назад
НЕ ПИШИ ЛОГИКУ В ШАБЛОНЕ [ANGULAR] - GUIDE

Комментарии

  • @ЮліяКоцегуб
    @ЮліяКоцегуб 2 месяца назад

    Українською 😍 Підписуюсь ✅

  • @studyingturtle2726
    @studyingturtle2726 2 месяца назад

    И хотелось бы спросить про paths, когда работаем с nx. Меня вот очень раздражает увеличенное количество '../../' в каждом проекте (импорты внутри самого проекта), т.к. абсолютные пути настраиваются только для импорта из других проектов. И настройка удалась только при указании абсолютного импорта в tsconfig.base, но eslint от nx не рекоммендует использовать абсолютные пути вот таким образом. в видео тоже упомянуто (прим 9 минута), что не оч круто между фичами использовать абсолютные пути. но у меня кейс с nx, что думаете об этом? Можно ли настроить абсолютные пути, глушить eslint от nx или смириться с паровозом ../../ во внутренном импорте каждого проекта?

  • @studyingturtle2726
    @studyingturtle2726 2 месяца назад

    Влияет ли импорт из index.ts, когда мы работаем с lazy loading modules? может ли в lazy module импортироваться так же ненужные нам файлы, тем самым увеличивая размер бандла?

  • @ИванЕрмоленко-ъ8ч
    @ИванЕрмоленко-ъ8ч 5 месяцев назад

    Усього лише прочитав декілька статей, двічі подивився цей відос і вауля, я розумію як це працює 🥹 Дякую автору 🥹

  • @anatoliizlobin9161
    @anatoliizlobin9161 6 месяцев назад

    Дякую за відео )

  • @anatoliizlobin9161
    @anatoliizlobin9161 6 месяцев назад

    Дякую за відео :)

  • @ИванЕрмоленко-ъ8ч
    @ИванЕрмоленко-ъ8ч 6 месяцев назад

    Це дивитися було чистою насолодою 🔥

  • @АлексейСурков-ю3н
    @АлексейСурков-ю3н 6 месяцев назад

    Круто. Прикольна ідея

  • @jetsweb
    @jetsweb 7 месяцев назад

    Может быть можешь подсказать как решить проблему когда добавила алиасы, такую как core.mjs:6531 ERROR TypeError: Cannot read properties of undefined (reading 'ɵcmp') at getComponentDef (core.mjs:2529:12) at extractDirectiveDef (core.mjs:2418:12) at core.mjs:2592:21 at Array.map (<anonymous>) at core.mjs:2592:10 at createTView (core.mjs:11394:63) at getOrCreateComponentTView (core.mjs:11343:28) at createRootComponentView (core.mjs:15966:49) at ComponentFactory.create (core.mjs:15845:39) at ViewContainerRef2.createComponent (core.mjs:16265:47)

    • @kostik706
      @kostik706 6 месяцев назад

      Если у тебя тот компонент который = undefined становиться,то скорее всего ты находишься в состоянии циклической зависимости компонентов

    • @jetsweb
      @jetsweb 6 месяцев назад

      @@kostik706 можно проверить по команде, циклических зависимостей нет

  • @Niachan666
    @Niachan666 7 месяцев назад

    Как же здорово, что снимаешь на выдуманном языке, ограничиваешь людей от гавнокода.

  • @Niachan666
    @Niachan666 7 месяцев назад

    Залупа контент, бред сумашедшего, гавнокод высшего сорта.

  • @user-san-chous
    @user-san-chous 7 месяцев назад

    Але якщо бити все на велику кількість серввсів (класів), то це норм - тримати їх в одному загальному файлі, типу users.service.ts? Чи то лише для зразка, і кожен з них має бути винесений в окремий файл?

  • @djufM
    @djufM 8 месяцев назад

    подивився до кінця, але для мене як для початківця трішки складнувато. Думаю це відео для більш досвідчених..

  • @djufM
    @djufM 8 месяцев назад

    дякую вам за україномовний контент!!! ще не переглядав відео. тільки почав, але вам лайк і підписка!)

  • @ReginaScer
    @ReginaScer 9 месяцев назад

    На украинском тяжело смотреть. Делайте контент более доступным для соседей

    • @advance5189
      @advance5189 3 месяца назад

      вчи українську мову😊

    • @ReginaScer
      @ReginaScer 3 месяца назад

      Ну как-то ради этих видосиков язык учить - такое себе 😂

  • @ТарасШевчик-я1л
    @ТарасШевчик-я1л 9 месяцев назад

    де ти пропав?

  • @SergeyKalinin-v7x
    @SergeyKalinin-v7x 11 месяцев назад

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

  • @DzhavidR
    @DzhavidR 11 месяцев назад

    Привет. Записывайте пожалуйста на русском тоже, я понимаю это из за войны, но не записывая на русском вы сразу обрубаете целый пласт русскоязычных стран СНГ, а это потенциальные подписчики и благодарные зрители

    • @ReginaScer
      @ReginaScer 9 месяцев назад

      Вот вот

    • @maximbarishov4120
      @maximbarishov4120 7 месяцев назад

      пора вчити українську мову

    • @ReginaScer
      @ReginaScer 7 месяцев назад

      @@maximbarishov4120 varbūt Tu labāk latviešu valodu iemācīsies, ko? Es tevi vismaz saprotu 😅

  • @oleksii_letscode
    @oleksii_letscode Год назад

    Дуже класно пояснюєш різницю між цими двома підходами. Я, мабуть, песімист чи реаліст і я більше за песимістичний UI. Але підходи можна спробувати і заміксувати для різних елементів UI, як на мене ;)

  • @vasilemoraru89
    @vasilemoraru89 Год назад

    Hello and a big thanks for video. I like a lot how you explain. Could you please touch how CD work in lazy loaded modules.

  • @IvanMalinovskyi-q4z
    @IvanMalinovskyi-q4z Год назад

    Привіт) Дякую за контент! Дуже хочу вирости як розробник до мідл рівня,можливо в тебе є якісь курси чи менторінг? Чи можливо ще якось можеш допомогти з цим? Дякую.

  • @mishahrokhola1289
    @mishahrokhola1289 Год назад

    Чудове відео! Ми у нашій компанії робим дуже схоже, правда описуємо форму завжди, більше коду, але якось наглядніше. Цікаво ще попробувати утиліту для типізації форм групи, ми також пробували таку додати, але були проблеми з внутршніми форм групами

  • @TheEasyflap
    @TheEasyflap Год назад

    Да на самом деле, норм, что одно и тоже много раз повторяешь, для обучалки так и нужно, чтоб точно дошло, так объяснить, потом еще раз другими словами. Крутой урок, после него начинаешь куда больше понимать логику построения любого приложения ангуляр в принципе. Еще было бы интересно послушать про принцип деления приложения на модули)

  • @fuhrmanndothings
    @fuhrmanndothings Год назад

    Просто супер - дуже корисне відео! З нетерпінням чекаю на нові)

  • @НикитаШевченко-ы8я

    дуже корисно, дякую!

  • @dmitryaronov8197
    @dmitryaronov8197 Год назад

    Як нам не вистачає такого контенту українською! Так тримати)

  • @dmitrysuhotskylessonjs3981
    @dmitrysuhotskylessonjs3981 Год назад

    можно добавить [style.width.px]='size' и textSize(){ return this.textSizeInPx}

  • @ИванЕрмоленко-ъ8ч

    Яка насолода слухати таки приємну українську про Ангуляр 🤤

  • @MrPong-kb5kt
    @MrPong-kb5kt Год назад

    Дзякуй вялікі! Вельмі карысны фільмік!

  • @gbo-user
    @gbo-user Год назад

    Дякую, класний контент

  • @yakovlimanskiy5238
    @yakovlimanskiy5238 Год назад

    красавчик!

  • @scherschak
    @scherschak Год назад

    Прикольна штука хоча і занадто складна щоб на проект звати джунів.

  • @user-san-chous
    @user-san-chous Год назад

    Повернувся! І Макс Гром повернувся. Ви прям майже одночасно. Тепер я щасливий)

  • @alpha_17x
    @alpha_17x Год назад

    Може планується відео, про динамічне створення форми? Мені зараз треба)

  • @igor_fames8709
    @igor_fames8709 Год назад

    лучше скажи що з роботами стало ) рік досвіду є не можу найти вже чуть не пів року знаю rxJs є трохи розуміння ngrx )

    • @user-san-chous
      @user-san-chous Год назад

      якщо з синтаксисом справи, як і з інтонацією та орфографією, то тоді складно буде

  • @lMarser
    @lMarser Год назад

    Дуже цікаво. Так тримати)

  • @PavloBozhok
    @PavloBozhok Год назад

    Є вже такий метод як new FormGroup().markAllAsTouched(), краще використовувати його. Мені здається краще вже додати до класу @Injectable() декоратор, чим передавати туди Injector, або загорнути в абстракцію щоб його не бачили джуни. А так мені теж все сподобалось боюсь що тільки це можна використовувати на дуже примітивному функціоналі, зазвичай все набагато і набагато складніше, хоча може я і помиляюсь.

  • @mukhamed5405
    @mukhamed5405 Год назад

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

  • @1654045
    @1654045 Год назад

    випускай частіше відоси! Ти кльовий

  • @yurapekach7550
    @yurapekach7550 Год назад

    Дякую за корисний контент)

  • @roman-vavrynkevych
    @roman-vavrynkevych Год назад

    Мені знається це трохи оверкіл якщо в твоєму проєкті не потрібно буде робити якихось великих і складних форм і достатньо стандартного найбільш розповсюдженого методу створення форм, а то що тобі це підхід не подоється не значить що такий спосіб гірший. Але взагальному круте та цікаве відео)))

  • @AntonFedorchenko-o7x
    @AntonFedorchenko-o7x Год назад

    Цінна інформація та корисні утиліти, дякую!

  • @aleksandrm3466
    @aleksandrm3466 Год назад

    Чудове відео, лаконічне і все по суті. Дякуємо і чекаємо продовження 🤘

  • @mmospanenko
    @mmospanenko Год назад

    Круті відео, але було б добре переписати українською 😊 на фоні останніх записів, ці вже аж слух ріжуть))

  • @WebGarmony
    @WebGarmony Год назад

    Вітаю, друже! Слава Україні!

  • @m9tezhnik
    @m9tezhnik Год назад

    Спасибо за подробный разбор темы.

  • @Володимир-д1щ6з
    @Володимир-д1щ6з Год назад

    Дякую за позицію. Моя повага