Let's start at the beginning: in order to understand content projection, we need to first understand what set of problems is the feature trying to solve. What Problem is Content Projection Trying to Solve?

Interacting with Projected Content (inside ng-content).

How To apply styles to elements projected via ng-content.

Designing the Same Component Using Content Projection.

The Key Problem With The Initial Design.

Component Design Problem 4 - Custom third party input properties.Component Design Problem 3 - Capturing plain browser events of elements inside a template.Component Design Problem 2 - Integration with Angular Forms.Component Design Problem 1 - Supporting all the HTML Properties of an HTML Input.An example of a component that would benefit from content projection.What Problem is Content Projection Trying to Solve?.In this post we will cover the following topics: The final component that we are about to build is available here in the Angular Package Format. We are going to see how content projection works, when to use it and why, and how it can improve a lot the design of some of our components. In order to learn content projection, let's use it build a small component (a Font Awesome Input Box). In this post, we are going to learn how to use this feature to design components that have a very simple but still powerful API - the post is as much about component design as it's about content projection! One of the Angular features that help us the most in building reusable components is Content Projection and ng-content.

Clips multislot variable 1 or more