{"id":576,"date":"2023-02-28T05:00:00","date_gmt":"2023-02-28T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=576"},"modified":"2023-02-27T19:05:34","modified_gmt":"2023-02-28T03:05:34","slug":"adding-dependencies-to-standalone-components","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/adding-dependencies-to-standalone-components\/","title":{"rendered":"Adding dependencies to standalone components"},"content":{"rendered":"\n

Now that we’ve introduced standalone components<\/a>, you might have tested them and quickly realized that if you start using directives such as *ngIf<\/code>, or other components, your code doesn’t compile anymore.<\/p>\n\n\n\n

That’s because those template dependencies (used only in the HTML template of your component) are not imported in Typescript (yet), so Angular cannot compile your templates. This doesn’t happen when we use modules because our components are declared there. We also import CommonModule by default, which contains all of the primary directives and pipes of the Angular framework.<\/p>\n\n\n\n

If we want to import all these features into our standalone components, we can use the import<\/code> property in the decorator as follows:<\/p>\n\n\n

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

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

And if you want to import just one feature instead of an entire module, you can do that too – but only if that feature is declared as standalone<\/strong>:<\/p>\n\n\n

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

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

This means that the Angular team has modified all Angular directives and pipes<\/b> to be available as standalone features (see the ngIf source code here<\/a> as an example).<\/p>\n\n\n\n

Of course, we can still import entire modules if needed or list individual template dependencies, which means that all pipes, directives, and components should be listed individually in the imports<\/code> array:<\/p>\n\n\n

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

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

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

Now that we’ve introduced standalone components, you might have tested them and quickly realized that if you start using directives such as *ngIf, or other components, your code doesn’t compile anymore. That’s because those template dependencies (used only in the HTML template of your component) are not imported in Typescript (yet), so Angular cannot compile […]<\/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-576","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\/576","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=576"}],"version-history":[{"count":7,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/576\/revisions"}],"predecessor-version":[{"id":589,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/576\/revisions\/589"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}