Components-constructors: the power of ng-content in Angular

Content projection is one of the basic features in Angular with good official documentation. Almost everyone knows about it but nevertheless many developers avoid ng-content in their daily job choosing more complex ways and making the developer experience worse.

In this article, I would like to show several typical cases of using ng-content when developing reusable components and explain the benefits of this approach.

Basic terms

Here are basic terms about ng-content to refresh all the features before reading this article. If you are ace in it, you can just skip this chapter. If you have not seen ng-content before, I would like to recommend you start with official documentation.

So, we can write <ng-content></ng-content> in a template of our component. All the passed content will be projected in this place.

If we want to pass content, we just need to put it into the tag of our component.