Разработка Menu UI компонента. HostBinding, HostListener. Как подписаться на window в Angular?

Представьте себе компонент который соответствует SOLID принципам. В этом видео мы сделаем именно такой компонент, а именно компонент контекстного меню.
Благоларя ng-content мы передадим содержимое в компонент.
Благодаря template переменным будем открывать меню.
Благодаря HostBinding будем показывать и скрывать меню, смотря на внутреннее состояние компонента.
Благодаря HostListener будем слушать клики с window и с host елемента.
И благодаря :host / :host-context будем стилить хост.
И все это в одном видео, а в конце видео есть гайд и всего за несколько минут можно освежить информацию из урока.
==============================
Код готового урока:
github.com/MaksymGrom/angular...
==============================
Инструкция по установке angular проекта:
Вариант 1:
Пройдите плейлист: • Как работает WEB. Мест...
Вариант 2:
Склонируйте github.com/MaksymGrom/angular...
Загрузите зависимости (npm install)
Можно запускать проект (ng serve)
==============================
Выбор редактора код это дело каждого, но в этом плейлисте я использую webstorm. Как настроить один из популярнейших редакторов ниже:
VS Code: • VS Code extensions для...
WebStorm: • WebStorm работа с angu...
Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов.
Курс по SQL можно найти по ссылке: • Что такое SQL? Как раб...
Спасибо что продолжаете смотреть меня и радовать комментариями.
---- Соц сети
Телеграм, где можно узнать о новых видео и получать доп контент
t.me/webDevGromMaxChannel
P.S. В youtube я отвечаю быстрее чем в telegram, буду рад комментам в youtube
----
Чтобы поддержать канал
1) Можно поставить лайк (или дизлайк, если не понравилось видео)
2) Оставить комментарий более 5 слов
3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать
#grommax #angular #host
Материально поддержать канал можно следующим способом
1) Перевод на карту send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
forms.gle/ZbFCKJSpDNYp4AMC6
Оглавление
00:00 - Введение
00:26 - Подготовка к уроку
00:55 - HostBinding
02:02 - :host-context() стили хоста
02:41 - Открытие меню по кнопке
03:37 - :host стили контекстного меню
04:52 - HostListener события хоста
06:17 - window HostListener события документа
07:15 - Закрытие меню по клику снаружи меню
09:34 - Запрет всплытия событий click из меню
10:16 - ng-content динамический контент меню
12:43 - Краткий гайд

[@grommaks]

Привет всем :) Если вы случайно попали на это видео, то можно начать проходить плейлист с начала Со знакомства с Angular kzbin.info/www/bejne/f6PInYWMn66nqqM Или с компонентов Angular kzbin.info/www/bejne/i2bHkHmqhMRmhKM А если не случайно, то приятного просмотра и спасибо за активность под этим и остальными видео у меня на канале

[@bukanaka]

Оооо, взрослый контент)

[@vovamaestre1136]

После просмотра 2-х последних видео, могу с уверенностью утверждать что здесь заявка на лучший контент по ангуляру в СНГ сегменте! Спасибо за контент

[@grommaks]

Спасибо за такую крутую оценку) скоро больше контента

[@vovamaestre1136]

@@grommaks Пишу это не просто так, поскольку у меня есть опыт продакшин разработки > 1 года, но правда на angularjs, но сейчас перешли на гибрид

[@serdotsenko]

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

[@grommaks]

Да, по мере роста базы, так и планировал разбавлять примерами которые будут собирать концепции нескольких уроков :) Это видео маленький пример того, что я хочу ^_^

[@nexgenua]

По первому вопросу с "несколько асинхронных запросов" то тут ангуляр не при чем, это же rxjs, всякие zip, zipAll, там ничего военного. Обмен данными между компонентами тоже все просто, обычные сервисы с обсерваблами subject или behaviourSubject, в зависимости от задачи, нужно ли текущее значение, ну или ngrx, но там в доке и так все понятно. Вот и весь бестпрактис.

[@davidbuloyan1036]

👋👋👋

[@awesomeuser789]

Как всегда лайк и коммент до начала просмотра) Летим!!!

[@njsaab9722]

cупер, супер, супер- спасбо большое

[@alex330k47]

О да, Сиси Кеэпвелл. Я не видел его 25 лет но оказалось что до сих пор помню как его зовут. Респект Макс!

[@grommaks]

Ну фамилию его я не знал даже 😺

[@vitaliybendik6916]

Очень классное решение этой задачи, прям гениально)

[@ayub2003]

Ма шаа Аллах1 брат, хорошие видео

[@KvN-UA]

Інформативний урок, дякую! Давненько не було нічого нового на каналі, сподіваюсь в тебе все добре.

[@user-wq4jl9io4s]

Cool

[@KolkhozDnepr]

Лайк и вечная подписка)))

[@grommaks]

😎

[@roman_cooper]

спасибо)

[@mykolastrashok9986]

Как всегда полезно и четко! Хотелось бы узнать будут ли видео про тесты в angular? И спасибо за труд!

[@grommaks]

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

[@alexshubin1]

Максим, благодарю за конент. Совсем недавно делал меню и остановился на том, как клик снаружи отработать. Надо проверить, мне кажется что host-context(.hidden) тоже самое что :host { .hidden { ... }} По ссылке на гитхабе кода урока нет, там просто пустой ангуляр проект.

[@grommaks]

Странно, проверил ссылку готового урока и код там есть, там две ссылки, первая с кодом и вторая с начальным состоянием для самостоятельной работы

[@nexgenua]

👍 классные видео! Вдарить еще по ранимой реактовской психике 😊 (не хейчу библиотеку если что) Resolve гвардами, Reuse stratage и сборкой апки для плеймаркета с деплоем, а то народ вроде знает, что угловатый это фреймворк, а вот в чем его фреймворкость и сила до конца не понимают

[@grommaks]

Со мной в фирме работают 600 человек на angular и из них деплоями и разбиением занимаются пару человек, я не в их числе))) я больше по ООП и модульной архитектуре…вот когда ковырну описанные практики, то обязательно запишу)

[@diatm1506]

Долго ждал. Интересно конечно будет узнать приемущества кастомных деректив. Хочу узнать например в слайдере есть 2 кнопки next и prev в 1 дерективе есть возможность вешать по клику например 2 метода на prev и next handleNext, handlePrev или обработать сразу 2 события? Например клик и если курсор мыши не в поле зрения компонента если не ошибся mouseout то слидер будет листать слайды через 3 секи сам или взависимости от настроек в компаненте. Или нужно много деректив? Например audio player там столько событий... и там в какой-то книге шаблон применялся для плеера

[@grommaks]

Нужно делать так, чтобы пользоваться было легко клиентам такого кода, и чтобы когда нужно будет добавить новый функционал в ядро никому ничего не сломать Все остальное вкусовщина…и специфика конкретного решения

[@rockyshwilly]

Очень круто, понятно как все связано, но не понятно почему оно так работает)) Может одна я такая зануда)) Спасибо за видео и объяснения! Максим, а есть ли у Вас видео как работать с запросами на backend и как о том, что может быть альтернативой redux в react? А то я пока не понимаю как работать со "стейтом", если его надо передать глубже, чем на одну вложенность, не передавать же дальше через Output - Input?

[@grommaks]

Если плейлист с начала смотрели, то должно быть понятно) иногда нужно несколько раз посмотреть и повторить примеры для закрепления)

[@user-pu1ro1kw4u]

Спасибо за познавательно инфу. Автор, а не мог бы ты сделать видео про анимацию при скроле? То есть появление элементов дом-дерева при их появлении в видимой части экрана. Сейчас использую для этого библиотеку AOS animate. Работает отлично, но как ни крути это сторонняя библиотека со всеми вытекающими.

[@grommaks]

Пока такое на работе не приходилось делать Но задумка интересная, спасибо за предложение

[@user-san-chous]

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

[@grommaks]

ngIf убивает DOM елементы и убивает компонент...а при появлении будет все это снова создавать и создавать компонент. Это существенно нагружает чем HostBinding А как с директивами работаете тогда?

[@user-san-chous]

@@grommaks ну вместо ngIf можно и hidden. А вот по поводу HostBinding и HostListener, то нигде не нашел никаких подтверждений их проблемности(( и в группе по Ангуляру админ говорит, что такого не слышал. Возможно наш тимлид говорил только о HostBinding, а HostListener я уже сам приплел. Может ему просто статья какая-то на медиуме попалась субъективная... Не, на проекте то есть конечно единичные случаи использования. Например, директива для отлавливания кликов за пределами блока использует только HostListener и еще одна использует вижу HostBinding, хотя сама нигде не применяется) Ну в целом ото и все... А кейсы в видео понравились, то только через пол года от начала проекта задумался, действительно ли то плох HostBinding...

[@grommaks]

@@user-san-chous hidden это visibility hidden который не удаляет елемент из потока html, а лишь его скрывает. Посмотрите разницу между ними)

[@user-san-chous]

@@grommaks атрибут [hidden]="true" - это не свойство visibility: hiden. Запутали меня) специально ходил проверял. Этот атрибут добавляет display: none, что аналогично примеру в видео будет. и надо еще раз будет пересмотреть видео, но если там хостилистенеры в дочерных компонентах, то лучше ngIf применять, имхо.

[@grommaks]

@@user-san-chous тогда я пойду ещё почитаю)

[@murakami374]

Привет Максим, досмотрел ролик до момента с тем, где ты в :host положил класс (.menu) , судя по тому, что я нагуглил, вложенность это фишка SCSS , а я делал все на CSS, то есть дальше нет смысла продолжать, мне нужно пересоздать проект?

[@grommaks]

Привет, можно просто переименовать файл на Scss и должно работать без доп настроек Можно ещё самостоятельно прописывать css код, превращать мои записи в чистый css, я там только вложенностями пользуюсь, это не сложно переписать на обычный css

[@murakami374]

@@grommaks если честно, не знаю как это переписать) попробую просто поменять расширение на scss

[@grommaks]

@@murakami374 желательно почитать что такое scss) Все вложенности через пробел пишутся, если есть символ & то без пробела (это склейка с прошлым селектором)

[@yevhen3934]

Привет, Макс! Хорошее видео :) Спасибо, что быстро и понятно представляешь материалы! Мне вот интересный такой вопрос - какое преимущество того, чтобы использовать HostBinding для установки классов нашего хоста, перед самым обычным wrapper'ом/контейнером в темплейте, которому мы будем устанавливать данный класс? Ну, например, используя то же самый [ngClass] или [class] для div'а. Также интересно твое мнение о ситуации, когда у нас есть компоненты и часто приходиться добавлять какой-то div в качестве контейнера с какими-то стилями. И я вот видел, что этот контейнер убирают вообще с этими классами, и помещают эти классы в TS-файл, используя HostBinding. С одной стороны это идея, которая может существовать - у нас нету постоянных этих wrapper'ов в компонентах, придерживаясь данного стиля. Но как я думаю об этом - это лишнее. Зачем использовать мощь Ангуляра ради таких вещей (именно лишь для устранения контейнеров в верстке), превращать это в JS-код в bundle'ах, когда можно взять нативщину HTML + class атрибут :) Будет просто и понятно + не надо будет при просмотре темплейтов открывать каждый раз TS-файл, думая "а вдруг там что-то есть". Что скажешь об этом, стоит ли оно того?

[@grommaks]

Привет) спасибо за отзыв. В компонентах HostBinding используют редко, чаще обертки делают, тут все верно Но hostBinding это способ повлиять на общий между родителем контейнер, и как понимаешь что родитель уже не будет заморачиваться, а логика будет спрятана в ребёнке, не всегда UI либу делает тот же человек что и пользуется ею… Почему нужно бороться с лишними дивами? А не нужно, до тех пор пока это не интернет магазин или блог, где Гугл будет срезать поисковые баллы за грязную верстку…если сайт приватный, то тут и заморачиваться не нужно HostBinding часто используется в директивах, о чем мы будем говорить, и ещё часто используется в svg компонентах, когда мы не можем раскидываться лишним враппером… А так всегда нужно ходить в ts файл и смотреть какие инпуты туда передаются и на что можно подписаться )

[@yevhen3934]

@@grommaks , а, вот оно как) Я думал, что это какие-то лишние действия, а оказывается полезная штука в этой ситуации) Спасибо за ответ! Также есть ситуация, когда у нас есть враппер для какой-то директивы, например scrollToBottom, то здесь HostBinding не поможет, как я понял. Нужно тогда будет или её динамически сетить с ТС кода, ну или же просто на сам хост повесить в родительском компоненте.

[@grommaks]

@@yevhen3934 враппер это компонент?

[@yevhen3934]

@@grommaks не, просто div в дочернем компоненте

[@grommaks]

@@yevhen3934 если на враппере висит директива то поможет, иначе нужно байндить через привязки компонента

[@JlocbBTpaHcE]

Крутой плей лист конечно, я уже 2 года работаю с Ангуляром, но мы никогда на работе не использовали ,и ну и по этой причине никогда не вставляли ничего в верстку между тегов компонента, а делали ее внутри html файла самого компонента, насколько это правильный подход и как делать лучше, какие плюсы и минусы?

[@grommaks]

Ваш подход для маленьких проектов самое оно Мой подход на больших Мой подход сложнее в реализации и понимании но позволяет сильно переиспользовать код, что удешевляет тестирование и поддержку Если цель сдать и забыть, то можно не тратить на это время и силы

[@JlocbBTpaHcE]

@@grommaks Да вот именно что приложение просто огромное и включает в себя много маленьких приложений, в понедельник буду готовить 5-6 шаблонов экранов, пока сервисы пишутся. Попробую применить полученные знания на практике, главное что бы начальник не сильно ругался что я от концепции написания компонентов далеко ушел.

[@grommaks]

@@JlocbBTpaHcE сразу на проект тянуть новые знания это большой риск, лучше поковыряться в пет проекте вечерком, потом понять что подходит и взять в проект

[@JlocbBTpaHcE]

@@grommaks ну да в целом вы правы.

[@user-pz5uy2pv4d]

Спасибо за видео, не подскжите как позиционировать host элементы?

[@grommaks]

Есть видео по стилям в angular у меня на канале Вроде как в файле scss пишем селектор :host и дальше верстаем

[@user-san-chous]

Что-то запутался... Не правильнее ли там использовать :host(.hidden) вместо :host-context(:hidden). Клик же в примере вешает класс на хост, а не оборачивает его в этот селектор... host-context вроде же для второго предназначен... Как оно тогда отрабатывает... Ну это надо будет потестить...

[@grommaks]

Может я и напутал, хост работает только с хостом, хост контекст добавляет селектор спереди как глобальный, таким образом класс на боди будет влиять на стили

[@maksmaksim4803]

как увидеть 5 недоступных видео которые скрыто?

[@grommaks]

Дождаться их публикации, по старому графику, 2 раза в неделю, вт и птн в 10 утра А пока они публикуются, я работаю над следующим плейлистом 😃

[@maksmaksim4803]

так так так, с такими уроками, я начинаю понимать что в этот раз мне таки поддастся ангуляр)))) За что тебе огромадное спасибо))

[@belerafon9288]

А про порталы будет что то? Это же меню через портал было бы интересно посмотреть.

[@grommaks]

Это cdk модуль, пока по нему не будет ничего

[@belerafon9288]

@@grommaks не именно материаловикий, а вообще такой патерн, для правильного проэцирования выподашек в дереве.

[@grommaks]

@@belerafon9288 материал использует angular/cdk, причём по исходникам я смотрел что материал добавляет очень мало в оригинальный cdk, считай ui составляющую. Как это сделать без cdk хочу понять, но уже после базовых плейлистов (когда будет понятно о директивах и сервисах) P.s. Посмотрел на entry components, они уже deprecated :(

[@belerafon9288]

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

[@grommaks]

@@belerafon9288 спасибо за наводку) попробую ковырнуть

[@AndrewYurchenko]

По существу в Ангуляр использовать display:none конечно можно, но все же.... Предпочтительнее думаю было бы *ngIf. Все же это ангуляр а не просто HTML & CSS в голом виде. Также, вот это слово "биндим" ... А русский и английский не ферштейн похоже. Сказать "привязываем" похоже автор не понимает. Все же, если видео заточено на обучение - то и должно нести языковую нагрузку и смыл передавать на том языке, на котором транслируется. По поводу "HostBinding" и "HostListener" в общем нормальное объяснение, за исключением вышеописанного.