{"id":570,"date":"2023-02-27T05:00:00","date_gmt":"2023-02-27T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=570"},"modified":"2023-02-27T19:22:42","modified_gmt":"2023-02-28T03:22:42","slug":"what-are-standalone-components","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-are-standalone-components\/","title":{"rendered":"What are standalone components?"},"content":{"rendered":"\n

Since Angular 14, any Angular feature (component, pipe, or directive) can be created as “standalone<\/a>.” This week, we will dive into what standalone components are, what feature they bring to the table, and how to use them.<\/p>\n\n\n\n

One quick note before we start: Whenever you see the words “standalone components,”<\/strong> it really means “standalone components\/pipes\/directives.” Perhaps we should call those “standalone features,” but I’ll stick with the naming convention used by the Angular team so far, so I don’t stand… alone. <\/p>\n\n\n\n

What’s a standalone component?<\/h2>\n\n\n\n

A standalone component is a component that doesn’t belong to any NgModule<\/code>. It can be imported on its own and used as-is.<\/p>\n\n\n\n

For instance, in the past, we might have a ButtonComponent<\/code> and a ButtonDirective<\/code> in a ButtonModule<\/code> (just like Angular Material<\/a> does). This means that if we want to use ButtonComponent<\/code>, we have to import the ButtonModule<\/code> in our AppModule<\/code> or feature module. This will make both ButtonComponent<\/code> and ButtonDirective<\/code> available for use in our app, even if you just use one of those features and don’t need the other. <\/p>\n\n\n\n

Standalone components are different. They can be imported in a module just like other modules get imported in the array of imports<\/code>:<\/p>\n\n\n

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

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

Importing only the features we need is always better for performance, as the build output will be smaller than if we import an entire module of dependencies. So that would be benefit number one of standalone components.<\/p>\n\n\n\n

How to create a standalone component?<\/h2>\n\n\n\n

With the Angular CLI: ng generate component Button --standalone<\/code><\/p>\n\n\n\n

We can also make an existing component standalone by adding the standalone: true<\/code> property in the @Component<\/code> decorator like so:<\/p>\n\n\n

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

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

You can see that example in action here on Stackblitz<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"

Since Angular 14, any Angular feature (component, pipe, or directive) can be created as “standalone.” This week, we will dive into what standalone components are, what feature they bring to the table, and how to use them. One quick note before we start: Whenever you see the words “standalone components,” it really means “standalone components\/pipes\/directives.” […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,21,8,23],"tags":[],"class_list":["post-570","post","type-post","status-publish","format-standard","hentry","category-angular","category-architecture","category-components","category-standalone"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/570","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=570"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/570\/revisions"}],"predecessor-version":[{"id":597,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/570\/revisions\/597"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}