{"id":1464,"date":"2023-09-18T05:00:00","date_gmt":"2023-09-18T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1464"},"modified":"2023-09-13T14:47:14","modified_gmt":"2023-09-13T21:47:14","slug":"angular-16-2-ngcomponentoutlet-input-bindings","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-16-2-ngcomponentoutlet-input-bindings\/","title":{"rendered":"Angular 16.2: NgComponentOutlet input bindings"},"content":{"rendered":"\n

Another feature of Angular 16.2 is using input bindings with component outlets. You might not be familiar with ngComponentOutlet<\/a><\/code> in the first place, so let’s explain what the directive does. <\/p>\n\n\n\n

Let’s consider the following template syntax:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The above code would load a dynamic component into the ng-container<\/a><\/code>. Assigning a new component type to componentTypeExpression<\/code> would display it in that container. Here’s a basic example that shows a HelloComponent<\/code> in the component outlet:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

This can be helpful if you need to use different types of components and don’t want to (or can’t) use the router to make it happen.<\/p>\n\n\n\n

The new feature of Angular 16.2 allows us to pass input values to that component. Let’s assume that HelloComponent<\/code> looks like this:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

We can bind a value to the name<\/code> input as follows:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

And that does the trick! You can see an example in action on Stackblitz here<\/a>. inputs<\/code> is an object that can have as many keys as needed. In my example, there is only one: name<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Another feature of Angular 16.2 is using input bindings with component outlets. 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,8,11],"tags":[],"class_list":["post-1464","post","type-post","status-publish","format-standard","hentry","category-angular","category-components","category-directives"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1464"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1464\/revisions"}],"predecessor-version":[{"id":1471,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1464\/revisions\/1471"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}