Member-only story
What Is Ng-Content?
One Man’s Epic Journey Across The Angular Landscape.
There are an enormous amount of things available to developers in the Angular framework. Some of them are used daily, and some never. As part of my ongoing journey to discover all that Angular has to offer, I occasionally like to explore some of the more seldom seen features. Today, we dig into <ng-content></ng-content>.
One of the main goals of Angular is to help the developer create reusable and composable components. I think ng-content is one of the simplest ways to do that once you understand how it works.
Dynamic content. That is the simplest way to explain what ng-content provides. You use the <ng-content></ng-content> tag as a placeholder for that dynamic content, then when the template is parsed Angular will replace that placeholder tag with your content. Think of it like curly brace interpolation, but on a bigger scale. The technical term for this is “content projection" because you are projecting content from the parent component into the designated child component.
If you understand {{myValue}}, then you understand the basics of what ng-content does. The difference is where that value comes from. With normal curly brace interpolation the value comes from the component. With ng-content the value comes from the component in its execution…
