ng-template, ng-content, ng-container, *ngTemplateOutlet, context лайфхаки. Angular

[@Leonidn1972]

Очень полезная информация. Я серверный программист, начал изучать ANGULAR. Очень профессионально. Акцент на том, что будут спрашивать на собеседовании.Thanks a lot.

[@grommaks]

Привет всем) Уровень уроков этого плейлиста плавно растет, я могу отнести информацию из этого видео к уровню мидл Если вам тяжело проходить этот урок, то попробуйте пройти его ради понимания возможностей и добавьте себе в закладки, ведь еще придется сюда вернуться 😜

[@bukanaka]

Хай, с радостью посмотрю. Отличный материал!

[@murakami374]

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

[@grommaks]

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

[@njsaab9722]

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

[@nexgenua]

Круть, в свое время нигде ни в одном гайде/курсах не было об этом ни слова, все это познавалось путем чтения официальной доки, которая ой как туго описана. Делаешь хорошую работу по продвижению фреймворка и обучению работы с ним, а то к нам приходят на собесы ангулярщики с 3 годами опыта и не знают что такое ng-content

[@grommaks]

Спасибо за отзыв) С ангуларщиками Жизненно)

[@user-san-chous]

Полностю поддерживаю. Тоже для познания этого, в частности работы с контекстом, я долго сидел тыкал интуитивно... Это видео тогда бы мне сэкономило минимум несколько часов))

[@dmitriy9152]

Супер! Отличное видео. Объяснение намного лучше, чем родной документации angular.

[@Seacrest.]

Понятные гайды среди прочего и редко кто так итоги подводит чтоб не запутаться

[@yabadababy3204]

Друзья, урок шикарный, но учитесь с умом. ПОсмотрите 1-2 раза, пока не поймете принцип работы, далее через 2-3 дня пересмотрите видео. Через неделю пересмотрите еще раз, и так вы навсегда запомните что это такое и как работает. Даже гуглить не придется ничего. Чем чаще возвращаетесь к информации тем связь нейронов крепче, и с каждым разом запоминаете больше информации.

[@artem_ka3863]

Спасибо, хорошо объяснил. Ждём видел об ngcomponentoutlet

[@JB-sv8oh]

большое спасибо! лучшее видео на эту тему

[@tobbi2000ify]

Спасибо, Максим, за классный гайд! Все четко и по делу.

[@AlexLavrik]

Все ясно и понятно! А это очень большая редкость...Спс за материал!

[@victormog]

Может, конечно, плохо искал, но это лучшее, что я нашёл по Angular на русском языке. А главное - очень полезный канал!

[@m9tezhnik]

Большое спасибо за подробное объяснение.

[@konstantinsurnin855]

самый доступный мануал для понимания, спасибо!!!

[@halfbelf5923]

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

[@user-glory-of-ukraine]

Надіюсь випуск буде тривалий по часу)) Дякую за відоси!!

[@grommaks]

Этот выпуск около 15-20 минут) содержательный, но будет ещё один выпуск вместе с жизненным циклом компонента на 20 минут по той же теме, но ещё интереснее 🤠

[@user-glory-of-ukraine]

@@grommaks Супер, з нетерпінням очікую!!

[@АнтонСевостьянов-х9б]

Блин, как же круто, и круто то что ты именно на пальцах всё объясняешь, всё понятно досконально, спасибо большое!!!

[@kro0sh843]

Спасибо! Отлично раскрыта тема как и с чем есть эти темплейты)

[@grommaks]

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

[@Fomenko1978]

Спасибо, хорошо объяснили работу сложных конструкций.

[@ЕгорРура]

Очень важное и понятно видео! Спасибо огромное.

[@KolkhozDnepr]

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

[@MrShevrin]

делаешь очень важную работу! большое тебе спасибо!

[@dmitriibochkarev8714]

Контент потрясающий! Спасибо за труд! Жду продолжения

[@anishchenko]

Очень полезно!! добавил в закладки)) ждем новых выдео

[@volodimiryemshyn715]

Отлично пояснил, качество подачи растет. Спасибо за тему очень классная штука с ref tempate жаль мало кейсов для применения :) Покрайне мере я так и не нашел места для ее реализации. Если будет возможно показать побольше примеров, было бы неплохо.

[@grommaks]

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

[@rey4eel]

Такая же мысль посетила. Очень крутая информация , но ни разу не применял ничего подобного кроме обычной передачи данных от parent -> child. А вот чего не знал так это то что есть директива select ) видимо документацию читал между строк )

[@rockyshwilly]

очень полезные видео, спасибо! Если бы еще сразу были задачки как отработать знания - вообще круто было бы)))

[@ЮлианаШилько]

Максим, спасибо огромное за уроки! Я не встречала пока ,чтобы так понятно и доступно было объяснено! Очень жду уроки по директивам!

[@awesomeuser789]

Странно что так мало просмотров... Контент просто офигенный! В который раз пишу уже в комментах-главное не забрасывай эту движуху, это супер-полезно!) Спасибо

[@RageBerry_]

Очень круто, спасибо за ролики

[@andriikulyk327]

Спасибо за гайды!!

[@KvN-UA]

Була необхідність, чимало гуглив та читав статті по темам: ng-template, ng-content, ngTemplateOutlet, однак, щоб все це в одному короткому уроці та ще й із прикладами, то це неабияка знахідка. Greate job! P. S. Окрема вдячність за короткі висновки в кінці відео, текстовий опис під уроком та таймкоди, дуже допомагає, при необхідності повернутись та окремо освіжити якусь інфо!

[@ilnurryazhapov]

Лайк

[@TheJabberwahh]

годный какой контент по Ангуляру :) подписочка прям

[@yuriiyurii6656]

Це шедеврально

[@IngvarLosev]

Спасибо !

[@antergonza6476]

Awesome topic - keep on!

[@ВеликийКамень-п9е]

Максим спасибо вы крутой чел

[@dimasobchenko6519]

сенкс) довго шукав щось гідне по Angular) відоси - АААгонь!)

[@tn6680]

Очень полезное видео! Респектище!

[@user-san-chous]

Очень полезное видео. Я для себя даже конспект сделал) хотя работаю с ангуляром уже пол года, но все равно с контекстом путаницы были, так как редко его применял... Хочу еще один кейс показать странный, которым я писал через месяц работы на проекте (будучи полным джуном, хотя как и нынче) и сейчас не совсем понимаю)). Будет плюсом для продвижения видео)) Прокидывал таким образом форму (ngForm) через контекст из дочерного компонента в родительский, а там эту форму прокидывал в сложные дочерные "инпут-компоненты", которые потом через ng-content снова прокидывал и выводил в первый дочерный компонент, из которого эта форма и пошла)) Звучит запутанно и думаю, что можно было сделать проще... Но зато интересный синтаксис. Мы можем с темплейта внутри дочерного компонента передать контекст в темплейт Дочерный шаблон: SAVE Дочерный клас: ... @ViewChild('f', { static: false }) public f!: NgForm; @ContentChild(TemplateRef) templateRef!: TemplateRef; ... Родительский шаблон (где 2 сложных инпут-компонента прокидываем в ng-content дочерного компонента с формой):

[@grommaks]

Прикольное решение) мне нравится) Достаточно гибкое, когда буду директивы показывать, там чуть чище можно сделать... И в видео о AfterContentInit Я покажу как можно было массивом шаблоны передавать...чтобы надежнее было :)

[@russianstan]

Супер! Спасибо большое!

[@alexshubin1]

Круто - с "select". Никогда так не юзал, всегда ng-templateOutlet делал. C select кода заметно меньше, но для потребителей компоненты это менее понятно. (В какие тэги что выводить)

[@cubuanic]

Очень досадно что (надеюсь - пока) не освещена тема тестов. Если кто так же скучает по тестам - "Frontend не для всех" kzbin.info/door/74THBccUmyFbkRtA0NBAog

[@leonidsimakov859]

Спасибо за видео!

[@developerabdulaev4768]

Отличное видео, спасибо в очередной раз. Скажите пожалуйста, вы занимаетесь менторингом?

[@grommaks]

На данный момент нет, и ближайшим временем не предвидится

[@kiroku043]

Лучший

[@lesnoy_leo]

Такой инфой я свою сраку еще не мучал

[@lantan_creater]

"Для этго отправимся в ребёнка".. 1:32 пояснения такие пояснения =))

[@biovawan]

Спасибо за урок! Подсветку делает не angular, а language server protocol, разработанный jetbrains. Implicit - не значение по умолчанию, а неявное значение

[@VasyaFF]

Максим, обнови уже WebStorm. Уже в который раз смотрю ролик, каждый раз удивляюсь что не обновлено 😁

[@grommaks]

Лень :)

[@whoopigoldberg8121]

Спасибо, хочется поддержать канал, да не знаю как. Можно было бы и донат оставить.

[@grommaks]

Коммент это самое вдохновляющее, ещё нравится обратная связь, я готовлю офлайн курс исходя из полученного опыта в этих плейлистах, так что любая критика и рекомендации помогут)

[@KvN-UA]

@@grommaks хочу навчатись у вас офлайн теж!

[@grommaks]

@@KvN-UA якби не війна, був би курс, а так поки планую повертатися у ютуб

[@diatm1506]

Как лучше разбивать по папкам? Хранить всё отдельно например папка components, pages, models, pipes, services и тд. Собирать потом например в pages posts module? Или хранить умные и глупые компаненты в одной папке с именем страницы и складывать всё туда и выносить в папку shared то что переиспользуется?

[@grommaks]

Вопрос не простой 1) Обязательно нужно делать консистентно - т.е. везде одинаково, все остальное опционально 2) shared модуль допустим если мы делаем маленькое приложение, например микросервисы, но и даже тут я бы не стал делать эту папку - Вместо shared лучше использовать common и туда скидывать общие модули, именно модули, один модуль одна общая фича - А при микросервисах лучше иметь проект libs где будут также общие модули, но тут они уже будут не обязательны к подключению во всех модулях проекта 3) Папки в модулях помогают легча понимать что и для чего используется, но много папок могут затруднить навигацию... Тут нужен баланс. То что нравится мне, но то что сложно реализуется без понимания модульной архитектуры - разбиение на папки по ответственности, guards в своей папке, страицы в своей, юи в своей... Глупые и умные компоненты имеют слишком широкое разделение. Тут глупые я считаю UI елементы, и умные могут быть страницами, могут быть layout (шаблонами страницы), модалки, виджеты (если у нас сложное отображение, не 1 страница = 1 фича)...но суть в том, что нужно четко понимать в какой папке какая логика должна быть, и можно ли чтобы верхний слой перескакивал и подключал другой слой к себе...например страница подключила UI без использования виджета... По разбиению компонентов - всего лишь вершина айсберга. Еще есть специальные компоненты или специальные сервисы и диррективы которые наследуются от ядра какой ни будь фичи...например платежные методы на странице оплаты... Я бы вынес их в отдельную папку payments по какой либо логике...но это уже сложный подход, я его применял в последних видео джедая веб разработки в nestjs проекте P.S. Разбивать на микро модули это правильно и удобно, но требует много конфигураций код становится сложнее на порядок... P.S.S Нужно освоить "не прекращающийся рефакторинг" - это когда часть функционала скрывается за приватными методами и контрактами, а по мере роста приложения переписываются на правильную архитектуру и публичные контракты расширяются... Т.е. можно сделать очень грязную архитектуру, но к которой можно будет получить доступ через один компонент и один сервис...а по мере работы декомпозировать, раскидывать по папкам и тратить деньги клиента на красоту...а пока ничего не понятно, сделать чтобы работало и никому не показывать то что еще сырое

[@diatm1506]

@@grommaks спасибо!

[@grommaks]

@@diatm1506 P.S. Если модульная архитектура, и есть компонент который не понятно куда положить, но он приватный для модуля, то можно его положить куда угодно, и не экспортить...перед экспортом подумать где он должен быть на самом деле) Если он должен быть публичный, но опять не понятно куда его положить, то можно в модуле добавить index.ts файл который будет импортить компонент и его же экспортить...цель чтобы никто не знал где он лежит в модуле, и потом его можно было перенести куда угодно... (Но index.ts файл я не люблю, он импортит слишком много без явного запроса, но решает описанную мною проблему) Думаю мне нужно раскрыть тему на канале по "непрерывному рефакторингу"

[@diatm1506]

@@grommaks Тоже думал например к auth относятся и login и register подумал не проще сделать rest и к login и register и к каждому сделать отдельные сервисы и dto вместо методов login register в auth servise, а разделить например login findOne когда пользователь вводит пароль и емаил destroy, когда делает logout и тд разделить на CRUD и собрать login, register реэкспортить в auth модуле. Думаю вк досихпор рефакорят и поддерживают и будут до безконечности. Material ui. интересно реализованно хотелось бы тоже попробовать что-то подобное написать для учебных целях их удобно использовать они не привязанны к друг к другу и переиспользуются хорошо. Index.ts barel file я использую но в nest сталкнулся с ошибками что когда использовал 2 сервиса в 1 модуле с index не правильно реэкспортился сервис. Думаю лучше дождусь других видео тк проект растёт, а оперировать сервисами и тд становится сложно и архитектура заходит в тупик( Я даже отказался от typeorm которая предоставляла репозитории в пользу prisma orm там без них можно) Думаю узнаю как правильно использовать сервисы в скором будущем

[@DInfinity3]

@@diatm1506 Серебряных пуль не завезли в очередной раз. Имхо, всё упирается в понятность и простоту поддержки кода. В 2 разных случаях один и тот же код может быть и допустимым, и вообще "его дробить давно нужно". Принцип SRP зависит сильно от задачи, которую код вынужден делать. Если известно, что он усложняется, добавляются вариации, то тогда мб есть смысл его дробить. Я лично против сильного дробления кода

[@alex330k47]

в репозитории под видео нет примеров урока, только базовый шаблон

[@grommaks]

Смотрите код готового урока в описании, там есть изменения 😊

[@DInfinity3]

А когда что лучше всего использовать? Почему бы просто не сделать отдельные компоненты с ngIf?

[@grommaks]

Это удобно использовать когда между компонентами передаются шаблоны, от родителя ребенку В видео о хуках, о AfterContentInit там есть пример использования В противном случае нужно использовать динамические компоненты, но это другая история и своя область применения

[@MrShevrin]

Привет, пытаюсь "вытащить" event из кнопки обернутую в ng-content (динамический компонент-обертка, со стилями, попапом и запрещающий функционал по клику), но получаю ошибку "Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index"... кроме того не отрабатывают стили по ховерам на кнопке. Уже близок к тому, чтобы все сделать через ngSwitch и иметь в шаблонах 2 кнопки - нормальную и обернутую в контент для чисто декоративного отображения залоченного функционала

[@ВеликийКамень-п9е]

Максим, а как давно вы пишите на Angular?

[@grommaks]

Года два наверно, я с бекенда перешёл на ангулар, а на ангулар не все проекты были…так что в если усреднить то можно считать 2 года

[@ВеликийКамень-п9е]

@@grommaks круто 🤙, я просто случайно наткнулся на данный ролик по Angular JS решил посмотреть , пишу на Angular Dart :0

[@Leonidn1972]

May can you create video - how to build GRUD project with ANGULAR 17 includ JWT token,Reduce,RXJS and best practices .NET CORE API .(я присоединился к каналу)

[@javavision73]

Спасибо!