ng-template, ng-content, ng-container, *ngTemplateOutlet, context лайфхаки. Angular
ฝัง
- เผยแพร่เมื่อ 28 มิ.ย. 2024
- Рассмотренные возможности Angular являются продвинутыми и без них можно делать приложение, но делать гибкие решения без них сложно, а иногда - невозможно.
ng-template это наиболее сложная и гибкая часть возможностей Angular. C ng-template возможно обмениваться частью верстки с параметрами и рисовать ее более чем один раз и в разных местах при этом сохраняя привязки событий и байндингов
ng-content это концепция slot глазами angular разрабочиков, ng-content позволяет фильтровать контент по селектору
ng-container это плейсхолдер, который превратиться в html комментарий и не будет изменять DOM дерево, по этому это отличное решение для опциональной верстки, на которую можно повесить логику angular и не повлиять на HTML
==============================
Код готового урока:
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 #ngtemplate #ngcontent #ngcontainer #ngtemplateoutlet
Материально поддержать канал можно следующим способом
1) Перевод на карту send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
forms.gle/ZbFCKJSpDNYp4AMC6
Оглавление
00:00 - Введение
00:24 - Подготовка к уроку
00:54 - Передача контента и ng-content
03:05 - ng-template, ng-container и *ngTemplateOutlet
04:00 - ng-template и context (let-foo)
05:06 - ng-template и context $implicit
06:02 - ng-container *ngIf & *ngFor
07:32 - ng-template переданный от родителя
12:03 - Краткий гайд
Очень полезная информация. Я серверный программист, начал изучать ANGULAR. Очень профессионально. Акцент на том, что будут спрашивать на собеседовании.Thanks a lot.
Канал в котором лежит золотой клад знаний, не только по ангуляру, но и в целом, если вы захотите стать разработчиком, тут находиться один из лучших материалов, автор научит Вас как правильно делать, расскажет об альтернативах, разберет плюсы и минусы, тут все что нужно разрабу.
Привет всем)
Уровень уроков этого плейлиста плавно растет, я могу отнести информацию из этого видео к уровню мидл
Если вам тяжело проходить этот урок, то попробуйте пройти его ради понимания возможностей и добавьте себе в закладки, ведь еще придется сюда вернуться 😜
Хай, с радостью посмотрю. Отличный материал!
как думаешь, стоит повторять пройденный материал, например посмотрел 3 видео, а потом сидишь и повторяешь, потому что как по мне, я многое забываю, особенно то , что понял как то поверхностно, или очень слабо
@@murakami374 если есть ощущение что надо повторять, то повторять определенно стоит. У меня не просто так для каждого урока есть исходная версия проекта, чтобы можно было повторить любой урок
да это про меня из разряда, ничего не понятно но очень интересно;))) но я не сдамся, раз сюда дошел)
Может, конечно, плохо искал, но это лучшее, что я нашёл по Angular на русском языке.
А главное - очень полезный канал!
Круть, в свое время нигде ни в одном гайде/курсах не было об этом ни слова, все это познавалось путем чтения официальной доки, которая ой как туго описана. Делаешь хорошую работу по продвижению фреймворка и обучению работы с ним, а то к нам приходят на собесы ангулярщики с 3 годами опыта и не знают что такое ng-content
Спасибо за отзыв)
С ангуларщиками Жизненно)
Полностю поддерживаю. Тоже для познания этого, в частности работы с контекстом, я долго сидел тыкал интуитивно... Это видео тогда бы мне сэкономило минимум несколько часов))
Понятные гайды среди прочего и редко кто так итоги подводит чтоб не запутаться
Друзья, урок шикарный, но учитесь с умом. ПОсмотрите 1-2 раза, пока не поймете принцип работы, далее через 2-3 дня пересмотрите видео. Через неделю пересмотрите еще раз, и так вы навсегда запомните что это такое и как работает. Даже гуглить не придется ничего.
Чем чаще возвращаетесь к информации тем связь нейронов крепче, и с каждым разом запоминаете больше информации.
очень полезные видео, спасибо! Если бы еще сразу были задачки как отработать знания - вообще круто было бы)))
большое спасибо! лучшее видео на эту тему
Спасибо, Максим, за классный гайд! Все четко и по делу.
Супер! Отличное видео. Объяснение намного лучше, чем родной документации angular.
Лайк
Спасибо за видео) как всегда все круто и интересно)) сложная штука ангуляр для понимания, уже второй месяц пытаюсь понять, но каждый раз что то новое и новое...
Надіюсь випуск буде тривалий по часу)) Дякую за відоси!!
Этот выпуск около 15-20 минут) содержательный, но будет ещё один выпуск вместе с жизненным циклом компонента на 20 минут по той же теме, но ещё интереснее 🤠
@@grommaks Супер, з нетерпінням очікую!!
Блин, как же круто, и круто то что ты именно на пальцах всё объясняешь, всё понятно досконально, спасибо большое!!!
Странно что так мало просмотров... Контент просто офигенный! В который раз пишу уже в комментах-главное не забрасывай эту движуху, это супер-полезно!) Спасибо
Це шедеврально
Все ясно и понятно! А это очень большая редкость...Спс за материал!
Контент потрясающий! Спасибо за труд! Жду продолжения
делаешь очень важную работу! большое тебе спасибо!
Максим, спасибо огромное за уроки! Я не встречала пока ,чтобы так понятно и доступно было объяснено!
Очень жду уроки по директивам!
Спасибо, хорошо объяснил. Ждём видел об ngcomponentoutlet
Отлично пояснил, качество подачи растет. Спасибо за тему очень классная штука с ref tempate жаль мало кейсов для применения :) Покрайне мере я так и не нашел места для ее реализации. Если будет возможно показать побольше примеров, было бы неплохо.
Обязательно будут примеры) а такую штуку применяем в конструкторе таблиц на проекте, шаблон ячейки передаём в базовый компонент и не трогаем старый код)
Такая же мысль посетила. Очень крутая информация , но ни разу не применял ничего подобного кроме обычной передачи данных от parent -> child. А вот чего не знал так это то что есть директива select ) видимо документацию читал между строк )
Спасибо! Отлично раскрыта тема как и с чем есть эти темплейты)
Ещё будет видео с более продвинутым механизмом передачи темплейтов через контент) так что у меня еще есть козыри, чтобы впечатлить
Очень важное и понятно видео! Спасибо огромное.
Спасибо, хорошо объяснили работу сложных конструкций.
Большое спасибо за подробное объяснение.
Очень круто, спасибо за ролики
самый доступный мануал для понимания, спасибо!!!
Очень полезное видео! Респектище!
Супер! Спасибо большое!
Awesome topic - keep on!
Очень полезно!! добавил в закладки)) ждем новых выдео
Спасибо за гайды!!
годный какой контент по Ангуляру :) подписочка прям
Спасибо за видео!
Максим спасибо вы крутой чел
Спасибо !
Була необхідність, чимало гуглив та читав статті по темам: ng-template, ng-content, ngTemplateOutlet, однак, щоб все це в одному короткому уроці та ще й із прикладами, то це неабияка знахідка. Greate job!
P. S.
Окрема вдячність за короткі висновки в кінці відео, текстовий опис під уроком та таймкоди, дуже допомагає, при необхідності повернутись та окремо освіжити якусь інфо!
сенкс) довго шукав щось гідне по Angular) відоси - АААгонь!)
Очень полезное видео. Я для себя даже конспект сделал) хотя работаю с ангуляром уже пол года, но все равно с контекстом путаницы были, так как редко его применял...
Хочу еще один кейс показать странный, которым я писал через месяц работы на проекте (будучи полным джуном, хотя как и нынче) и сейчас не совсем понимаю)). Будет плюсом для продвижения видео)) Прокидывал таким образом форму (ngForm) через контекст из дочерного компонента в родительский, а там эту форму прокидывал в сложные дочерные "инпут-компоненты", которые потом через ng-content снова прокидывал и выводил в первый дочерный компонент, из которого эта форма и пошла)) Звучит запутанно и думаю, что можно было сделать проще... Но зато интересный синтаксис.
Мы можем с темплейта внутри дочерного компонента передать контекст в темплейт
Дочерный шаблон:
SAVE
Дочерный клас:
...
@ViewChild('f', { static: false }) public f!: NgForm;
@ContentChild(TemplateRef) templateRef!: TemplateRef;
...
Родительский шаблон (где 2 сложных инпут-компонента прокидываем в ng-content дочерного компонента с формой):
Прикольное решение) мне нравится)
Достаточно гибкое, когда буду директивы показывать, там чуть чище можно сделать...
И в видео о AfterContentInit Я покажу как можно было массивом шаблоны передавать...чтобы надежнее было :)
Лучший
Круто - с "select". Никогда так не юзал, всегда ng-templateOutlet делал. C select кода заметно меньше, но для потребителей компоненты это менее понятно. (В какие тэги что выводить)
Спасибо за урок!
Подсветку делает не angular, а language server protocol, разработанный jetbrains.
Implicit - не значение по умолчанию, а неявное значение
Очень досадно что (надеюсь - пока) не освещена тема тестов.
Если кто так же скучает по тестам - "Frontend не для всех"
th-cam.com/channels/74THBccUmyFbkRtA0NBAog.html
"Для этго отправимся в ребёнка".. 1:32 пояснения такие пояснения =))
Такой инфой я свою сраку еще не мучал
Отличное видео, спасибо в очередной раз. Скажите пожалуйста, вы занимаетесь менторингом?
На данный момент нет, и ближайшим временем не предвидится
Максим, обнови уже WebStorm. Уже в который раз смотрю ролик, каждый раз удивляюсь что не обновлено 😁
Лень :)
Как лучше разбивать по папкам? Хранить всё отдельно например папка components, pages, models, pipes, services и тд. Собирать потом например в pages posts module? Или хранить умные и глупые компаненты в одной папке с именем страницы и складывать всё туда и выносить в папку shared то что переиспользуется?
Вопрос не простой
1) Обязательно нужно делать консистентно - т.е. везде одинаково, все остальное опционально
2) shared модуль допустим если мы делаем маленькое приложение, например микросервисы, но и даже тут я бы не стал делать эту папку
- Вместо shared лучше использовать common и туда скидывать общие модули, именно модули, один модуль одна общая фича
- А при микросервисах лучше иметь проект libs где будут также общие модули, но тут они уже будут не обязательны к подключению во всех модулях проекта
3) Папки в модулях помогают легча понимать что и для чего используется, но много папок могут затруднить навигацию...
Тут нужен баланс.
То что нравится мне, но то что сложно реализуется без понимания модульной архитектуры - разбиение на папки по ответственности, guards в своей папке, страицы в своей, юи в своей...
Глупые и умные компоненты имеют слишком широкое разделение. Тут глупые я считаю UI елементы, и умные могут быть страницами, могут быть layout (шаблонами страницы), модалки, виджеты (если у нас сложное отображение, не 1 страница = 1 фича)...но суть в том, что нужно четко понимать в какой папке какая логика должна быть, и можно ли чтобы верхний слой перескакивал и подключал другой слой к себе...например страница подключила UI без использования виджета...
По разбиению компонентов - всего лишь вершина айсберга. Еще есть специальные компоненты или специальные сервисы и диррективы которые наследуются от ядра какой ни будь фичи...например платежные методы на странице оплаты...
Я бы вынес их в отдельную папку payments по какой либо логике...но это уже сложный подход, я его применял в последних видео джедая веб разработки в nestjs проекте
P.S. Разбивать на микро модули это правильно и удобно, но требует много конфигураций код становится сложнее на порядок...
P.S.S Нужно освоить "не прекращающийся рефакторинг" - это когда часть функционала скрывается за приватными методами и контрактами, а по мере роста приложения переписываются на правильную архитектуру и публичные контракты расширяются...
Т.е. можно сделать очень грязную архитектуру, но к которой можно будет получить доступ через один компонент и один сервис...а по мере работы декомпозировать, раскидывать по папкам и тратить деньги клиента на красоту...а пока ничего не понятно, сделать чтобы работало и никому не показывать то что еще сырое
@@grommaks спасибо!
@@diatm1506 P.S. Если модульная архитектура, и есть компонент который не понятно куда положить, но он приватный для модуля, то можно его положить куда угодно, и не экспортить...перед экспортом подумать где он должен быть на самом деле)
Если он должен быть публичный, но опять не понятно куда его положить, то можно в модуле добавить index.ts файл который будет импортить компонент и его же экспортить...цель чтобы никто не знал где он лежит в модуле, и потом его можно было перенести куда угодно...
(Но index.ts файл я не люблю, он импортит слишком много без явного запроса, но решает описанную мною проблему)
Думаю мне нужно раскрыть тему на канале по "непрерывному рефакторингу"
@@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 там без них можно) Думаю узнаю как правильно использовать сервисы в скором будущем
@@diatm1506 Серебряных пуль не завезли в очередной раз. Имхо, всё упирается в понятность и простоту поддержки кода. В 2 разных случаях один и тот же код может быть и допустимым, и вообще "его дробить давно нужно". Принцип SRP зависит сильно от задачи, которую код вынужден делать. Если известно, что он усложняется, добавляются вариации, то тогда мб есть смысл его дробить. Я лично против сильного дробления кода
А когда что лучше всего использовать? Почему бы просто не сделать отдельные компоненты с ngIf?
Это удобно использовать когда между компонентами передаются шаблоны, от родителя ребенку
В видео о хуках, о AfterContentInit там есть пример использования
В противном случае нужно использовать динамические компоненты, но это другая история и своя область применения
Спасибо, хочется поддержать канал, да не знаю как. Можно было бы и донат оставить.
Коммент это самое вдохновляющее, ещё нравится обратная связь, я готовлю офлайн курс исходя из полученного опыта в этих плейлистах, так что любая критика и рекомендации помогут)
@@grommaks
хочу навчатись у вас офлайн теж!
@@KvN-UA якби не війна, був би курс, а так поки планую повертатися у ютуб
Привет, пытаюсь "вытащить" event из кнопки обернутую в ng-content (динамический компонент-обертка, со стилями, попапом и запрещающий функционал по клику), но получаю ошибку "Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index"... кроме того не отрабатывают стили по ховерам на кнопке.
Уже близок к тому, чтобы все сделать через ngSwitch и иметь в шаблонах 2 кнопки - нормальную и обернутую в контент для чисто декоративного отображения залоченного функционала
May can you create video - how to build GRUD project with ANGULAR 17 includ JWT token,Reduce,RXJS and best practices .NET CORE API .(я присоединился к каналу)
Максим, а как давно вы пишите на Angular?
Года два наверно, я с бекенда перешёл на ангулар, а на ангулар не все проекты были…так что в если усреднить то можно считать 2 года
@@grommaks круто 🤙, я просто случайно наткнулся на данный ролик по Angular JS решил посмотреть , пишу на Angular Dart :0
в репозитории под видео нет примеров урока, только базовый шаблон
Смотрите код готового урока в описании, там есть изменения 😊
Спасибо!