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

Рассмотренные возможности Angular являются продвинутыми и без них можно делать приложение, но делать гибкие решения без них сложно, а иногда - невозможно. ng-template это наиболее сложная и гибкая часть возможностей Angular. C ng-template возможно обмениваться частью верстки с параметрами и рисовать ее более чем один раз и в разных местах при этом сохраняя привязки событий и байндингов ng-content это концепция slot глазами angular разрабочиков, ng-content позволяет фильтровать контент по селектору ng-container это плейсхолдер, который превратиться в html комментарий и не будет изменять DOM дерево, по этому это отличное решение для опциональной верстки, на которую можно повесить логику angular и не повлиять на HTML ============================== Код готового урока: ============================== Инструкция по установке angular проекта: Вариант 1: Пройдите плейлист: Вариант 2: Склонируйте Загрузите зависимости (npm install) Можно запускать проект (ng serve) ============================== Выбор редактора код это дело каждого, но в этом плейлисте я использую webstorm. Как настроить один из популярнейших редакторов ниже: VS Code: WebStorm: Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов. Курс по SQL можно найти по ссылке: Спасибо что продолжаете смотреть меня и радовать комментариями. ---- Соц сети Телеграм, где можно узнать о новых видео и получать доп контент P.S. В youtube я отвечаю быстрее чем в telegram, буду рад комментам в youtube ---- Чтобы поддержать канал 1) Можно поставить лайк (или дизлайк, если не понравилось видео) 2) Оставить комментарий более 5 слов 3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении) 4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать #grommax #angular #ngtemplate #ngcontent #ngcontainer #ngtemplateoutlet Материально поддержать канал можно следующим способом 1) Перевод на карту 2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки Оглавление 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 - Краткий гайд