Загрузка страницы

HostDirectives полезная фича angular? Миксуем директивы с компоненом. Практика

HostDirectives новая фича доступная для standalone directive позволяет решить ряд задач которые раньше было сложно решить путем композиции

Первая задача - добавление директивы на компонент, даже если это PageComponent или DynamicComponent
Вторая задача - устранение конфликтов инпутов директивы

Дополнения по этому видео следует ждать после выхода плейлиста по сервисам в angular

==============================
Код готового урока:
https://github.com/MaksymGrom/angular-example/tree/host_directives
==============================
Инструкция по установке angular проекта:
Вариант 1:
Пройдите плейлист: https://www.youtube.com/watch?v=IrelRVjIttA&list=PL4rYLeYunVf07_wC6VR6F_YlajK-Q8vxV&index=1
Вариант 2:
https://github.com/MaksymGrom/angular-example/tree/start_v16
Загрузите зависимости (npm install)
Можно запускать проект (ng serve)
==============================

Выбор редактора код это дело каждого, но в этом плейлисте я использую webstorm. Как настроить один из популярнейших редакторов ниже:
VS Code: https://youtu.be/taTGYy-kgcE
WebStorm: https://youtu.be/0kTzqdi5tpk

Архитектурные елементы Angular https://youtu.be/7ATmJwL8NrA
Основы RxJS https://www.youtube.com/watch?v=5iIlWkWzsAE&list=PL4rYLeYunVf0aGMDMtL2a6Qe9_haMv6t7
Подробнее об OnPush https://youtu.be/kkX-7XCvXPI
Немного старого видео об иммутабельности https://youtu.be/8f-NMqKvmYw
Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов.
Курс по SQL можно найти по ссылке: https://www.youtube.com/watch?v=Bp_OHCzp7KM&list=PL4rYLeYunVf3DCrXe4XHdKAg8UJj0yzxG

Спасибо что продолжаете смотреть меня и радовать комментариями.

---- Соц сети
Телеграм, где можно узнать о новых видео и получать доп контент
https://t.me/webDevGromMaxChannel
P.S. В youtube я отвечаю быстрее чем в telegram, буду рад комментам в youtube

----
Чтобы поддержать канал
1) Можно поставить лайк (или дизлайк, если не понравилось видео)
2) Оставить комментарий более 5 слов
3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать
5) Можно стать участником моего канала на платной основе https://www.youtube.com/channel/UClDDVLu0Cj_o9Y5D2ilCtdQ/join

#directives #angular #grommax

Материально поддержать канал можно следующим способом
1) Перевод на карту https://send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
https://forms.gle/ZbFCKJSpDNYp4AMC6

Оглавление
00:00 - Введение
00:44 - HostDirectives AppComponent
02:27 - Чей жизненный цикл быстрее отработает
04:25 - Подсветка хоста через HostDirectives
07:19 - Передача инпут параметра в HostDirective
08:58 - Подсветка border хоста через HostDirectives, конфликт инпутов
11:15 - HostDirectives на директиве
13:23 - Краткий гайд

Видео HostDirectives полезная фича angular? Миксуем директивы с компоненом. Практика канала Максим Гром
Показать
Комментарии отсутствуют
Введите заголовок:

Введите адрес ссылки:

Введите адрес видео с YouTube:

Зарегистрируйтесь или войдите с
Информация о видео
7 октября 2023 г. 9:53:36
00:15:59
Другие видео канала
#12 Джедай веб разработки. Admin auth через NGRX. Авторизация на сайте через хранилище#12 Джедай веб разработки. Admin auth через NGRX. Авторизация на сайте через хранилищеAngular async pipe своими руками (DIY). Глубокий разбор реализации async pipeAngular async pipe своими руками (DIY). Глубокий разбор реализации async pipeAngular. Где хранить специфичные константы?Angular. Где хранить специфичные константы?Абстрактная Фабрика порождающие шаблоны проектирования. Patterns Abstract FactoryАбстрактная Фабрика порождающие шаблоны проектирования. Patterns Abstract Factory#18 Джедай веб разработки. Синхронизация вкладок браузера через localStorage#18 Джедай веб разработки. Синхронизация вкладок браузера через localStorageAngular. Аттрибуты, классы и стили в шаблоне. NgStyle, NgClass, Attr.Angular. Аттрибуты, классы и стили в шаблоне. NgStyle, NgClass, Attr.JavaScript практика. Дерево из таблицы. Древовидное меню. Array.reduce, Array.mapJavaScript практика. Дерево из таблицы. Древовидное меню. Array.reduce, Array.map#34 TDD подход при разработке сервиса меню NestJS разработка кода | Джедай веб разработки#34 TDD подход при разработке сервиса меню NestJS разработка кода | Джедай веб разработки#15 Джедай веб разработки. Angular HTTP Interceptor на RXJS#15 Джедай веб разработки. Angular HTTP Interceptor на RXJS#25 Джедай веб разработки. Grid & Form pages для тестирования навигации#25 Джедай веб разработки. Grid & Form pages для тестирования навигацииПрактика. Angular dependency injection framework. React API Context через Angular DIПрактика. Angular dependency injection framework. React API Context через Angular DISQL ORDER BY, DISTINCT, UNION ALL, LIMITSQL ORDER BY, DISTINCT, UNION ALL, LIMITRXJS Canvas рисуем на холсте. Этот пример показывает всю глубину технологииRXJS Canvas рисуем на холсте. Этот пример показывает всю глубину технологииЧто такое SQL? Как работать с WebSQL? Основы SQL | SQL для начинающихЧто такое SQL? Как работать с WebSQL? Основы SQL | SQL для начинающихJavaScript практика. classTreeCollection. Глубокое дерево из таблицы. Array.reduce, Array.mapJavaScript практика. classTreeCollection. Глубокое дерево из таблицы. Array.reduce, Array.mapAngular подключение стилей в компонент. Encapsulation. ViewEncapsulationAngular подключение стилей в компонент. Encapsulation. ViewEncapsulationAngular Directives. Передача ng-template через структурную директиву в Table Component часть 2Angular Directives. Передача ng-template через структурную директиву в Table Component часть 2Синхронизация NGRX с LocalStorage | todo app angular ngrxСинхронизация NGRX с LocalStorage | todo app angular ngrx#13 Джедай веб разработки. JWT Decode. Извлекаем payload из JWT на Angular#13 Джедай веб разработки. JWT Decode. Извлекаем payload из JWT на Angular#19 Джедай веб разработки. Angular Guards + Observable. Защита авторизованных ссылок#19 Джедай веб разработки. Angular Guards + Observable. Защита авторизованных ссылок#9 Джедай веб разработки. Архитектура VIEW слоя. Обзор слоев приложения#9 Джедай веб разработки. Архитектура VIEW слоя. Обзор слоев приложения
Яндекс.Метрика