Множественная проекция контента в Angular c помощью ng-content 👨🏻‍💻

Для того, чтобы передать в дочерний компонент html-разметку мы можем воcпользоваться механизмом ng-content

Дочерний компонент:



Родительский компонент:

Surprise from parent!


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

Дочерний компонент:



Родительский компонент:

Named surprise from parent!


С помощью данного механизма можно делать, например, переиспользуемые макеты страниц, а контент в них передавать с помощью проекции, это позволит не дублировать разметку и стили и сделать ваш код гибким и более простым в поддержке 🚀

Документация

#заметки #angular