NgComponentOutlet input bindings

You might not be familiar with ngComponentOutlet in the first place, so let's explain what the directive does.

Let’s consider the following template syntax:

The above code would load a dynamic component into the ng-container. Assigning a new component type to componentTypeExpression would display it in that container.

Here’s a basic example that shows a HelloComponent in the component outlet:

This feature of Angular allows us to pass input values to that component.

Let's assume that HelloComponent looks like this:

We can bind a value to the name input as follows:

And that does the trick! You can see an example in action on Stackblitz here. inputs is an object that can have as many keys as needed. In my example, there is only one: name.

---

Let’s get connected! You can find me on:

• Medium: https://medium.com/@nhannguyendevjs/
• Dev: https://dev.to/nhannguyendevjs/
• Substack: https://nhannguyendevjs.substack.com/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (formerly Twitter): https://twitter.com/nhannguyendevjs/