A deep dive into Angular content projection

Often, when creating a component, you need to display a wide variety of content inside it. Some good examples include a modal component, a card, or a tab component.

Let’s consider the modal component; you want the component to have a visible and hidden state, a backdrop, and some shared styling so that all your modals have the same look and feel. Yet the content inside each instance of the modal component will be wildly different. Sometimes, you want to display a form inside the modal, while other times, you want to use it to display text or provide actions or configurations to the user. Most likely, each modal you have within your application will have different content inside.

So, a question arises: how do we facilitate this need and create a component that can house any content it needs within its HTML template?

You could hardcode all the options and use inputs to configure the component, but this becomes unmaintainable...