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

Veröffentlicht am: 01 Januar 1970
auf dem Kanal: Максим Гром
19,738
1.1k

Рассмотренные возможности Angular являются продвинутыми и без них можно делать приложение, но делать гибкие решения без них сложно, а иногда - невозможно.
ng-template это наиболее сложная и гибкая часть возможностей Angular. C ng-template возможно обмениваться частью верстки с параметрами и рисовать ее более чем один раз и в разных местах при этом сохраняя привязки событий и байндингов

ng-content это концепция slot глазами angular разрабочиков, ng-content позволяет фильтровать контент по селектору

ng-container это плейсхолдер, который превратиться в html комментарий и не будет изменять DOM дерево, по этому это отличное решение для опциональной верстки, на которую можно повесить логику angular и не повлиять на HTML
==============================
Код готового урока:
https://github.com/MaksymGrom/angular...
==============================
Инструкция по установке angular проекта:
Вариант 1:
Пройдите плейлист:    • Как работает WEB. Место и задачи Angu...  
Вариант 2:
Склонируйте https://github.com/MaksymGrom/angular...
Загрузите зависимости (npm install)
Можно запускать проект (ng serve)
==============================

Выбор редактора код это дело каждого, но в этом плейлисте я использую webstorm. Как настроить один из популярнейших редакторов ниже:
VS Code:    • VS Code extensions для работы с angul...  
WebStorm:    • WebStorm работа с angular проектом и ...  

Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов.
Курс по SQL можно найти по ссылке:    • Что такое SQL? Как работать с WebSQL?...  

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

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

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

#grommax #angular #ngtemplate #ngcontent #ngcontainer #ngtemplateoutlet

Материально поддержать канал можно следующим способом
1) Перевод на карту https://send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
https://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 - Краткий гайд


Auf dieser Seite können Sie das Online-Video ng-template, ng-content, ng-container, *ngTemplateOutlet, context лайфхаки. Angular mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Максим Гром 01 Januar 1970 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 19,738 Mal angesehen und es wurde von 1.1 tausend den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!