{"id":1402,"date":"2022-10-10T11:46:47","date_gmt":"2022-10-10T11:46:47","guid":{"rendered":"https:\/\/www.workfall.com\/learning\/blog\/?p=1402"},"modified":"2025-09-25T09:20:54","modified_gmt":"2025-09-25T09:20:54","slug":"standalone-components-in-angular-14","status":"publish","type":"post","link":"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/","title":{"rendered":"Create &#038; Use Standalone Components in Angular 14"},"content":{"rendered":"<span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">8<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/XPbXEtP5EMEXvSESEVJ4QCNtcV-yQEL2jZXqzQB2CNAbnWlGz4xh1VctxuoN_Tx86ERPCIHrRqWMvZ6K5FY3jVON23DnmMaMsL4qbpDhictGOnjtmhwJsaqrt7iC6kVSK8AtgBR69fmmbcFk7btQfb56mkdeTl4jzSPCEiJX-keYWx0smVEMtltYEw\" alt=\"How to Create &amp; Use Standalone Components in Angular 14?\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">App development is now super-simple and quicker with the new features including standalone components in Angular 14. Because of the standalone components, the use of NgModules has now become optional. The Angular developer community strives to provide web developers with better versions of the TypeScript-based framework while also allowing them to stay on track with other online ecosystems and user requirements. In this blog, we will take a quick look at all the new features of Angular 14 and will demonstrate how to create and use Standalone Components.<\/p>\n\n\n\n<h2>What\u2019s new in Angular 14?<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/Lpld4iEDOCIJbua-0ok0RfgoFygMtNFgpBEhpH03jR_o4AbFrPgK3LgtOv6IrVDTHxeat2xxdiG1VV69tPE0ZrtU6lje5t3mWafVaI7xED-dcnviKJI5vQBIQ2sxvkD-8TQXRmRooXgwiuJsMGTWEggeSn75B38mnNY-oWnkRAfsgtiGJ84ZTRAlsQ\" alt=\"What\u2019s new in Angular 14?\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Angular, a Google-developed framework, has released its latest v14 update, which includes standalone components, optional NgModules, typed reactive forms, and improved template diagnostics.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">The TypeScript-based web application framework is the next significant Google release. Angular 14 includes standalone components, which promise to simplify Angular app development by eliminating the need for Angular modules. The Angular 13 to Angular 14 upgrade introduces new possibilities for typed forms, improved template diagnosis, and standalone components.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Angular 14 is thought to be Angular&#8217;s most systematic and well-planned upgrade to date. CLI auto-completion, typed reactive forms, standalone components, directives, and pipes, and enhanced template diagnostics are among the new features in the Angular 14 release.<\/p>\n\n\n\n<p><strong>Here are the most important updates in Angular 14:<\/strong><\/p>\n\n\n\n<ul><li><strong>Standalone Components: <\/strong>The Angular 14 modules are optional; however, the goal is to depart from the current configuration by constructing pipes, directives, and components.<br><br>Angular has issued RFC to make NgModules optional on standalone components (Request for Comments). These modules will not become obsolete with the Angular 14 update, but will instead become provisional in order to maintain compatibility with existing Angular libraries and applications.<br><br>It should be noted that prior to Angular 14, each component had to be associated with a module. If a parent module&#8217;s declarations array is not linked with every component, the application will fail.<\/li><\/ul>\n\n\n\n<ul><li><strong>Strictly Typed Forms: <\/strong>The strictly typed forms will improve Angular&#8217;s modern-driven approach to integrating with existing forms.<\/li><\/ul>\n\n\n\n<ul><li><strong>Angular CLI Auto-Completion: <\/strong>The best thing about Angular CLI auto-completion is that it allows you to increase productivity by delivering the commands needed to create modules, directives, and components for your new\/existing project. However, Angular 14 provides you with a plethora of commands.<\/li><\/ul>\n\n\n\n<ul><li><strong>I<strong>mproved Template Diagnostics: <\/strong><\/strong>The new Angular 14 update includes improved template diagnostics to protect developers from generic errors caused by compiler reconciliation to typescript code.<\/li><\/ul>\n\n\n\n<ul><li><strong>Streamlined Page Title Accessibility: <\/strong>During application development, your page title should clearly show the contents of your page. Previously, the entire process of adding titles in Angular 13 was aligned with the new <em>Route.title<\/em> property in the Angular router. However, Angular 14 does not support the additional imports required when adding a title to your page.<\/li><\/ul>\n\n\n\n<ul><li><strong>Latest Primitives in the Angular CDK: <\/strong>The Angular Component Dev Kit (CDK) is a comprehensive set of tools for developing Angular components. The CDK menu and Dialog have been pushed to a stable Angular version in Angular 14. Nonetheless, the new CDK primitives enable the creation of more accessible custom components.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/E2gjyTFcH-9L7eimxdOKeOgLj1JBgOlMFITX4FsCPjCndr0rO4eMV8KMCB0thpjFha56_xFskSg3dpmIRGuqccYn5ntgRoWCk9zLqPcAuCTyt4ugNHTyDM0oCL5_nJfoTePwpjk-bmH-TP2YCd3VS17jNT3yb3d4G-_bm_LmfnZ4lhFPVRHXmM27ag\" alt=\"Latest features in Angular 14\"\/><\/figure>\n\n\n\n<ul><li><strong>Angular DevTools is Now Present Online: <\/strong>It is simple to use the Angular DevTools debugging extension while offline. This extension is available for Firefox users through Mozilla&#8217;s Add-ons.<\/li><\/ul>\n\n\n\n<ul><li><strong>Optional Injectors: <\/strong>When creating an embedded view in Angular 14, you can use <em>TemplateRef.createEmbeddedView<\/em> &amp; <em>ViewContainerRef.createEmbeddedView<\/em> to specify an optional injector.<\/li><\/ul>\n\n\n\n<ul><li><strong>Built-in Enhancements: <\/strong>One of the most intriguing aspects of the Angular 14 update is that it allows the CLI to deploy small code without lowering its value. The built-in enhancements allow you to connect to secure component members directly from your templates. Overall, using the public API surface gives you more control over the reusable components.<\/li><\/ul>\n\n\n\n<ul><li><strong>Extended Developer Diagnostics:<\/strong> The extended developer diagnostics is an Angular 14 feature that provides an extendable framework that aids in a better understanding of your template and displays suggestions for potential improvements.<\/li><\/ul>\n\n\n\n<h2>Hands-on<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">In this hands-on, we will begin with an online compiler for angular called <a href=\"https:\/\/stackblitz.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">StackBlitz<\/a> that gives us the flexibility of an already created folder structure. We will be using this compiler to create flexibility for implementing the standalone components in Angular. We will first begin with creating the new required components. Then, we will restructure the existing file structure of the application to fit our requirements. Accommodating the same, we will declare the standalone properties to be true for the components and make one of the components a child standalone component without having to declare it in the main module. We will then add some content for both components for us to view the same on the UI screen. Then, we will import the parent component with the child standalone component in the main module file of the application. After importing the same, we will declare and call the parent component from the main application component. After reviewing the UI, we will then add some styling for the same. Finally, opening the UI in a new tab, we&#8217;ll have a look at the standalone component on the UI with its content displayed without having the component declared in any of the modules.<\/p>\n\n\n\n<p>If you want to follow the steps on an online compiler, navigate to the StackBlitz portal. Click on Angular.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/ToltlRYFGuPvuhMcr_UNiSNTXnAIf7xyG_G7eFd-IRj8doqLo_7J39Tz881EJqDUPHJ_aypyTdzzpLCtxv2jTjy2RsNQsC7zNbY8DtEBDSZrHE1iZeOrlBl4TpRFctq5KrlGM8Whc3ZdpcgXZI69C_Dr9pnABs_4wrpeNDE82Gsz-zCNcdkJvNTrRg\" alt=\"How to Create &amp; Use Standalone Components in Angular 14?\"\/><\/figure>\n\n\n\n<p>You will be navigated to the Angular compiler with some files preloaded displaying a sample startup app.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/ouIdMfUwiq5mfisPgHy1AZxItfcRAZ7yWwKRfweE8Mz5dgv2bJIICZsKE2UNS4pN1EqAeHRrL55bKOmZITYzsBa4qYubSVe27N4_YH4FIy9eAARF9htynLrzt9Runco6MYe7WGO9kx8IgRul9YhsXC5mtKDIfJvWJn8JRUT85gXDeJwoaMl9CMlE8w\" alt=\"How to Create &amp; Use Standalone Components in Angular 14?\"\/><\/figure>\n\n\n\n<p>Select the src folder and right-click on it. Select Angular Generator and click on the component.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/L7iqW08uZEmGl18o9am0HTqreM2rMNDBIBeHrJ8q9G5hnFb5v7pSvRnEnsJCl4B2d54OoPyOzmcYiH7TJ7GA-foPfPiLbEFDVimlJOke3myFYsO2-tHuAIi1eoaxSWxnNLUs1YJx6n4lKcd_QuWlEkfRr6OfF5gW2UJjsb6uRsqyOpT4506cHV5_7g\" alt=\"How to Create &amp; Use Standalone Components in Angular 14?\"\/><\/figure>\n\n\n\n<p>Enter the name of the component and press enter.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/H-WrSSHcLwXVYQ73TAkf21taHBIqqhYQr1erLd9F_qBJgCLw_4bV2dBDBlRqQK9ob9HxTVIPq57tHl2FxbHYfgYuNJLsm8iVxj2JBAK9zHXNDb8qCT2gicVrt-0XHutURtXY93_TSdY6Sys3TbVAoeflwKB8mhryyJNBJCTBWjTxN-oxBIwok_MRHA\" alt=\"How to Create &amp; Use Standalone Components in Angular 14?\"\/><\/figure>\n\n\n\n<p>On success, you&#8217;ll see the files created along with the <em>.html<\/em> and <em>.ts<\/em> files.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/b3Goym9Vi0GWpgVjIcKkeDzw6xUYgFHXknmoWh4ICCZ--lTP5zyeJJD3jRp7XGvGaechQe2vafQ6MHjLnp_rEnXGururhif_uBj49A6KL4dmW183GhSl6HjFavXZeFZj4I0FtsLBhhhAz-47G0DOo2pYZfcGEStfx3Fa4P5pWJQlHoCRZVvrx-azGQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Now, open the <em>app.module.ts<\/em> file.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/ozvngzSACsUTfx8PL_hsJ3PZg3VtU0weZR0d2XdKozDRevuAq7JBTzPkwo9ICcS7tCWOUNE63YrfH1dm26GsRErDOJgyFjDL7TlF0-Vhz9HvTQ_QSgd9QhM45DuBsM82kZbcoUIsJj7LZsD0zbI0Gl8V1lUPGXRkG2RLL1m5HTUZHFfqlrehkyvstw\" alt=\"How to Create &amp; Use Standalone Components in Angular 14?\"\/><\/figure>\n\n\n\n<p>Remove the default component that is loaded by default when we first start the compiler.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/k4XDiw9Ve7S3Q8jVvixjF3rtHDK6haJG-uoOr9nvoVVFbZC5KU_FcdSBxNyKdii5tIootcRWnO935YAf6ZeFxLzsh4mWu1R_Nw6vgi9SR6PkGoOB9F0zeUEsqAFuQ_wdB-9pUqcDIi5hQaDm5qCKi6LP-AjtzvY7Xy8t7wlxCleVr2l6l1OMB1DTTw\" alt=\"\"\/><\/figure>\n\n\n\n<p>Remove its declaration from the import key as well.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/l_0-u6aD0Awo8M7Rju-pyodaAvGXUjXXz6Qvo8RInGlqa6ZmBlrRjZOt2xC1NtEkRz9lD8z4h2wfSbNa63DFsKaImBTSbCZxOfh2B0s6gBRaaQRQRrm1WTK8kb00xc83P4vbWk9DUCALS8Ogj6KXGD5z9CZ2s96n2KSl2F6wYowx-Z6sExBQ9XqRRw\" alt=\"How to Create &amp; Use Standalone Components in Angular 14?\"\/><\/figure>\n\n\n\n<p>Navigate to the <em>app.component.html<\/em> file and remove the declaration of the default component.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/ombgE5maO-abQsSgWkxXbaIBSPcVjxD17M2xFi2NeR3slwnrcEixZaUsbuKrdLDr983fDf3Zdp6-8sZiIwJBuMdMRDz1HjkRP73QQMoQGBMJV9IbqrwSZ-WnTT1oay1R65NB7cizWwaOV7gnmsp4ThjJjBw0ILE_mMUxi-NmLeW-EcoFVKWmKOyIiA\" alt=\"\"\/><\/figure>\n\n\n\n<p>You can then add your own content as required and the error on the UI screen will be resolved.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/iwlxv9oXBG0D1QmSU_I-Ym_6aQF84TDd1M7ED0mirbxOAyF72OM8LMACEMHP2iz62c5whhVqfb_I1zx8qejriBb3st1fDXZIXffr8qtF8ZpAs471btv0Gji_iJQmHOOv6YvDpcf-l9td7vYKKfouOtkWEjcdTlB4jzqA5Iv-1G2rfDmRVhh27F3gXg\" alt=\"How to Create &amp; Use Standalone Components in Angular 14?\"\/><\/figure>\n\n\n\n<p>Now, follow the same steps to create another new component.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/QBeVQC7Gj3ZPl-IVR-oAq2g0flGqLSpfdDqN2tp3f4n5lEvj0W81Iz9gW-QBhHz2PlX2CnNfLr4lsDMDh_i-1M8eJN-jrDQ8LJswjoE0grVMrUgdtBfIyVqDJqPmUYiKDFbuWCOiOLfixrwcah1iRKbhUchmc9pSfnpPqiwuuQtYpPSK-DWYY7oImw\" alt=\"\"\/><\/figure>\n\n\n\n<p>Enter a name for that component and hit enter.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/Y2FGzo5NIhVqle88f-4qxwtNXm2UfboBWFuviMIU8W8fbDJmpoo5M8NNYBS3MXDm4fZeMnkGMAcBVi_e6Ca45BK77gix_eiNAXwIUF-sO6KtbDQCmlrLOGxiGhIMPJm5wjs4pTLpzeL90EiNHKofUQW1ICOp2c0Y3QmxDC_C6WhijU1YYWPflXLpsw\" alt=\"\"\/><\/figure>\n\n\n\n<p>On success, the corresponding files will be created.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/Q5s6H61bT057lg_K9yurEcwzlivCo5yjt5vd8YgSeuIBX1Pvt0Tao3d0wVjjId_1wyK6RrOr3jtIrS80dv5X0Rsi5WoN_HNxN-auX3_3ibDF_hr8loPU2ic8VIISOh1ZLnQhCYHdPoycHgKEc9gLJv5m2szGiVivWJH0Rt61TDIIKyLjGuYgGRMpBw\" alt=\"How to Create &amp; Use Standalone Components in Angular 14?\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Now, open the first new components (<em>homepage.component.ts<\/em>) ts file, and in the <em>@Component<\/em>, add a new key &#8216;standalone&#8217; with its value set to true.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/df2a9Y-QRalC1kwQ04YJuHSGmFzgfEH6131q52qHE2FPiM92Be8HG1d9TM1xj9XohwsYLDl2Jj3Gxq9wR5dbHW_16FRGgRnHyui64RHLIPsLdjkMQdmVMeeoYkOhdGRf3m_2BZokOXhoU6MjYICO6gW2uiGqesqP15NzEBQFTfvBiCqcjxVMp4CaWA\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">The 2nd new component (<em>standalone.component.ts<\/em>) file is the child component but will exist as a standalone component. Import the standalone component in the homepage component as shown in the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/pHWegwZiWLgfJuhbPM-u76vp8dNxhK6U6cqer2zMBCTmAoA1lkJQwtIFPM7xomwqDpOj7hHcUTyERNMCNuek-g0ypIQFqcvPRNImkML8vzMcYCwEMJZ2BwrDHsWPsKo9ut1bEU3HPt7KnNEniySzu3XJClbOeBWn7loz-YlWs3dN2Vpj-pa7G2Nxbw\" alt=\"How to Create &amp; Use Standalone Components in Angular 14?\"\/><\/figure>\n\n\n\n<p>Add a global import for the Standalone component as shown in the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/4Pdwdi-BCefwKfqP8XAsfVbtTjsdc4uSVx9oJtnPSBmpwYzBLTRVyCHOfaMV0eJxwXB2NBkM_8r0PfOXkV5QdbYUodvInf3QdvhBMNDptZsSgTHOMhdPFXBd581LrJo1gyQNqDDulO0OBlu3F1horQNZInoYpdfuFxhlwDUoAqXdg6txbkYEMh9QjQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Now, open the <em>homepage.component.html<\/em> file.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/rSlGEvxNiz1CRUAJEg55bY3ocafo3IQvMmxbRmdBofjrVp5c5hlhv_j0liCqqFQoiSQg_th9WeyNBcdC5KOxO9C6J6sU7S6G7x8o3xuQxkrZJ1vreHI_gt1YpgLsd3BlNZLRb0Fv7lg_BLgUxsGY5TTRDhEVR9-xgzIPX55SI7KgUrQKLKo80079mw\" alt=\"How to Create &amp; Use Standalone Components in Angular 14?\"\/><\/figure>\n\n\n\n<p>Replace its content with the desired content.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/dvrosQiwrifEr0y3TuK2vxWGfWkXrixYe2uqfjuPB19sqUtWHT_CbvP0q6yYXpgXcNX1t75KiOlwPpF8KLK_36WgtUZe_NlcfxYUmud_lEvV7gOkvXAItzGn3ysWV3io7DAwPjTAAio80ohZ6e0hF0hYO6JrlGMzFrlIhurcYfeBBDPM2GSHbCvvbQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Declare the standalone component as a child component.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/HFqZTHScfok9h5k1JYYRzD9mmQdK5401xx3xPcS3UrzvM_VXcyFukLKMm2WQyoagqVL2Z54rE3dSrQG9zAItJSlOISPFxTmmoSEhPcp0W3nLVZ0ezyCmdO69HbOENyq_cetW9K6uYsdKsmAXAb42ZwrMsJyq1pWwvXXPoCMlxmNq24TkpmO53eSIFg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Add a class to the main div tag.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/kBr-ZwbzNiSdRAbdT9e8AfGGcjTaMcZgVVPRkey6W4mzf609f9c48sZSx0wMs7E-aOuQjIlHgwyzpnpnQjt3ARdHrHw3hrQspI6F5_YVkvqyraAMy27DxoBipL0knt3Fn_Xe4cv1kgNxflbLBSAZ36RHM2FnkTOoiHMwHDA2L0rfMmiOjs7AREKUFw\" alt=\"How to Create &amp; Use Standalone Components in Angular 14?\"\/><\/figure>\n\n\n\n<p>Open the <em>homepage.component.css<\/em> file.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/g25O_eib-v02lup18LBQIf9dEv_L1tT4baf74GqM4GmA_IFhvbw3FedtOA29EnFSLWu98L3L36NwhsHLLIUS-XyACh77Tc3qWjS4HaAZ97oFyghhZq0oLdClzxJp2XfITV9UeKDaeigBL7QUqNcBVY2_F4EZEWS_BwUCzrc9YQsyl1WaYAhBLWuAyQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Declare the class and add styling for the same.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/7gZkJhea5TCRVqFwUIzVW61n7DU-OICARTANpDvPC_W6Bm1WLGaIk70-o15Aij9jv94iDNJY5_mUzuwQZdLEL1SSAfN9PfE0-YhWSF0DQzu8IphqGacw2dzXjHd5Yopr5rb6xV_1tfDgd-e6EBJxA7sKQLTpjoiXri0BNZ2bLI7KFsVt84QHZEAG1A\" alt=\"How to Create &amp; Use Standalone Components in Angular 14?\"\/><\/figure>\n\n\n\n<p>Now, open the <em>standalone.component.html<\/em> file and add the following content to it.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/EA3H6WKUrhyw_3aQgkUUoBKdsntkF4r0lD3OznuA2RmO_9j6gHOaZw4_muWgP9wYPJ1Rb-XIsN7ldZ7ounas43hw6drZudXfczlVR1dg0ug-ktZXK3Ka_7pfaIG64XgtQ7siohqdn6qNso6FK385k7TLJpWseOejFuEP1CiMIfqSm5hE8kqgwOyFCQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Open the <em>standalone.component.ts<\/em> file and add a key of standalone with the value true in the <em>component.ts file<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/O_ydO089QBUovyJZq7qn6JUHgbQC0Tex4U7khhpiNH4OHGNDZZc4U_FToBPYQfZHs2KURIe7HtV1G4dwfE1ruWZtb-uANPfIZPFTBN9mcWtcx1DR887aLBxdjJOvVZwCOuwySeKBm40TVO4BuTOK2K0XkMoZu-8ryEsNx-9CHIG4hVz8AfBrmR1otQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Open the <em>app.module.ts<\/em> file and import the HomePage component.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/07REQbow2TRTNzFlavckS--ng89or4IM7CIJ5MqYYRzphM7l3sl6W5qYvXYX7hQ2sVTsVZpMyM92EwjVTV-y9PqIpRerLlAw-FyW26OihPIMEOcHPFWyJC9R001UiLSl3MtsPjKYv0mpirkirnceWc81APcIJORP3yynI0xkF7o_aEaHDRLHCGBcjQ\" alt=\"How to Create &amp; Use Standalone Components in Angular 14?\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Now, open the <em>app.component.html<\/em> file and declare the parent (homepage) component. On success, you will see the content of the parent component loaded along with the standalone component&#8217;s (standalone component) content loaded on the UI.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/e8Q1W6GjvyL7nWBULyE-QAYA6z2GEtLfEzzgxhIhZ_Y7DEBOyqWi2M2yuVcTGa7pDjLwqLvWVx9M5XcH4d2sb4YQKHRzS7Feb4DaeoqRfFuMVzkiikl8eUtE6tpJj8oGP_t-Omyi7gUxXVsfdu_LVJ09aiVHIDTJmIziryWsI7nbtBI7frKF7JKM6Q\" alt=\"\"\/><\/figure>\n\n\n\n<p>You can expand the UI screen to look at the output.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/-dOeHcFMbD3ixHCE6RK7cRNGbpUJlPIcInNHCErsVZNFfVVK_6-re1_5joY6lOA-Xc4QFxJo-4XOWu7_ua9quuH4W4mTCcqEDK16Qhly-8wh_AkrDoy4zn7Veps9n6WOTWZwlxvrDvxPN51ezsHopK1hdeoXRQIAijU7CnDEGL3YRgVCIX6kgNEkZA\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Now, to differentiate between the components, we will need to add some styling. Open the <em>homepage.component.css<\/em> file and add the below styling.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/1gYqUNFL267zR_vDlvV3myIP3cZ0KCNnhLdpPdEYt3GAde0JGd8wOwi_kswM2rWMahkHSSTxHQAXjdP5pGZ1z_1JkdUAqYDckSI8d7dCYJcsCcYi7QOaQk7kMIGIOA-uc4otZ_NzC9O9doWVBaa6YO_odav85Xbcbdjaca1MnkwfN2RCQytgBFdzyQ\" alt=\"How to Create &amp; Use Standalone Components in Angular 14?\"\/><\/figure>\n\n\n\n<p>Then, open the <em>standalone.component.css<\/em> file and the following styling. Click on Open in New Tab.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/D6nHNEamZjlAw-3ZvG6u1mUg-5_DVW5b7nuYf3_D4YH-Uekns6Srx8wZA0-j5kakrMuMfrIPfa11Py-FELQKaWGtPHS80h40U-4GJvW691UvRBs7shON2TXu9Q6uwzg59xL6GG2lSEPgyFWg7WM9H9GcTC-yYe3qqplPky7rCwZMv-SBaT7rVVG5PQ\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Now, you will be able to view the standalone component as a separate component from the Homepage component with proper styling.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/hqys17tJW6KcinXn4eoSXp7_RCvuZgoWo4shfb6t-O-a5kHQcQ34K2MO_tS_SCqGowwwQVpWbqSnq0Rwl9BkcsUoJmNVUvpY5jdQqnKpV8rpJdJ6_O8GRmbXs7H07Fl3Z7HV3IeiUv5pNTcqKmlkm5uwlKLjl1uEJcUCoZjHfq00cxmvR4xrxKKzQg\" alt=\"How to Create &amp; Use Standalone Components in Angular 14?\"\/><\/figure>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">In this hands-on, we have demonstrated how it began with an online compiler for angular called StackBlitz that gives us the flexibility of an already created folder structure. We used this compiler to create flexibility for implementing the standalone components in Angular. We first began with creating the new required components. Then, we restructured the existing file structure of the application to fit our requirements. Accommodating the same, we declared the standalone properties to be true for the components and made one of the components a child standalone component without having to declare it in the main module. We then added some content for both components for us to view the same on the UI screen. Then, we imported the parent component with the child standalone component in the main module file of the application. After importing the same, we declared and called the parent component from the main application component. After reviewing the UI, we then added some styling for the same. Finally, opening the UI in a new tab, we had a look at the standalone component on the UI with its content displayed without having the component declared in any of the modules. We will come up with more such use cases in our upcoming blogs.<\/p>\n\n\n\n<p><strong>Meanwhile\u2026<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">If you are an aspiring Angular Lover and want to explore more about the above topics, here are a few of our blogs for your reference:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/www.workfall.com\/learning\/blog\/how-to-make-use-of-an-npm-package-highcharts-to-plot-network-graphs-in-angular\/\">How to make use of an npm package Highcharts to plot Network Graphs in Angular?<\/a><\/li><li><a href=\"https:\/\/www.workfall.com\/learning\/blog\/how-to-enhance-ux-by-managing-api-requests-using-angular-resolver\/\">How to enhance UX by managing API requests using Angular Resolver?<\/a><\/li><li><a href=\"https:\/\/www.workfall.com\/learning\/blog\/how-to-plot-bar-charts-in-angular-using-npm-package-highcharts\/\">How to plot Bar Charts in Angular using npm package Highcharts?<\/a><\/li><li><a href=\"https:\/\/www.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/\">How to build an Angular Authentication Application using AWS Amplify?<\/a><\/li><li><a href=\"https:\/\/www.workfall.com\/learning\/blog\/how-to-export-datasets-into-csv-format-using-angular-with-filesaver\/\">How to export datasets into CSV format using Angular with FileSaver?<\/a><\/li><\/ul>\n\n\n\n<p><strong>Keep Exploring -&gt; Keep Learning -&gt; Keep Mastering&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">At <a href=\"https:\/\/www.workfall.com\/\">Workfall<\/a>, we strive to provide the best tech and pay opportunities to kickass coders around the world. If you\u2019re looking to work with global clients, build cutting-edge products and make big bucks doing so, give it a shot at <a href=\"https:\/\/www.workfall.com\/partner\/\">workfall.com\/partner<\/a> today!<\/p>\n\n\n\n<p><\/p>\n\n\n<style type=\"text\/css\"><\/style><section id='' \n                class='helpie-faq accordions faq-toggle open-first groupSettings-521__enabled' \n                data-collection='' \n                data-pagination='0' \n                data-search='0' \n                data-pagination-enabled='0'\n                role='region'\n                aria-label='FAQ Section'\n                aria-live='polite'><h3 class=\"collection-title\">Frequently Asked Questions:<\/h3><article class=\"accordion \"><div class='helpie-faq-row'><div class='helpie-faq-col helpie-faq-col-12' ><ul><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2970\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2970\"\r\n                data-id=\"post-2970\" \r\n                data-item=\"hfaq-post-2970\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. What are standalone components in Angular 14 and how are they different from module-based components?<\/div><\/div><div id=\"accordion-content-post-2970\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2970\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">8<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><b>A: <\/b><span style=\"font-weight: 400\">Standalone components are components declared with <\/span><span style=\"font-weight: 400\">standalone: true<\/span><span style=\"font-weight: 400\"> in their <\/span><span style=\"font-weight: 400\">@Component<\/span><span style=\"font-weight: 400\"> decorator so they don\u2019t need to be declared in an <\/span><span style=\"font-weight: 400\">NgModule<\/span><span style=\"font-weight: 400\">. They manage their own imports directly. This reduces boilerplate and allows coexisting use of module-based and standalone components.<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2971\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2971\"\r\n                data-id=\"post-2971\" \r\n                data-item=\"hfaq-post-2971\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. How do I create a standalone component?<\/div><\/div><div id=\"accordion-content-post-2971\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2971\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">8<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\">You can generate a component with the <\/span><span style=\"font-weight: 400\">&#8211;standalone<\/span><span style=\"font-weight: 400\"> flag (e.g. <\/span><span style=\"font-weight: 400\">ng generate component my-comp &#8211;standalone<\/span><span style=\"font-weight: 400\">). In the component decorator, add <\/span><span style=\"font-weight: 400\">standalone: true<\/span><span style=\"font-weight: 400\">, and import required modules (like <\/span><span style=\"font-weight: 400\">CommonModule<\/span><span style=\"font-weight: 400\">) in the <\/span><span style=\"font-weight: 400\">imports<\/span><span style=\"font-weight: 400\"> array within that decorator.<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2972\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2972\"\r\n                data-id=\"post-2972\" \r\n                data-item=\"hfaq-post-2972\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. How to use a standalone component inside another component or module?<\/div><\/div><div id=\"accordion-content-post-2972\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2972\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">8<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><b>Answer:<\/b><\/p>\n<ul>\n<li><b>Inside another standalone component<\/b><span style=\"font-weight: 400\">: include it in the <\/span><span style=\"font-weight: 400\">imports<\/span><span style=\"font-weight: 400\"> array of that component.<\/span><span style=\"font-weight: 400\"><br \/>\n<\/span><\/li>\n<li><b>Inside a module-based component<\/b><span style=\"font-weight: 400\">: import the standalone component in the module\u2019s <\/span><span style=\"font-weight: 400\">imports<\/span><span style=\"font-weight: 400\">.<\/span><\/li>\n<\/ul>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2973\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2973\"\r\n                data-id=\"post-2973\" \r\n                data-item=\"hfaq-post-2973\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. What are the benefits and trade-offs of using standalone components?<\/div><\/div><div id=\"accordion-content-post-2973\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2973\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">8<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><b>A: <\/b><\/p>\n<p><b>Benefits<\/b><span style=\"font-weight: 400\">: Less boilerplate (no NgModule required), better tree-shaking, simpler component dependencies, more modularity.<\/span><span style=\"font-weight: 400\"><br \/>\n<\/span> <b>Trade-offs<\/b><span style=\"font-weight: 400\">: It may require migrating existing module-based code gradually. Some tooling or libraries still expect modules. Also, careful management of imports is needed as each standalone component must list its needed dependencies.<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2974\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2974\"\r\n                data-id=\"post-2974\" \r\n                data-item=\"hfaq-post-2974\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. Can I gradually migrate an existing Angular app to use standalone components?<\/div><\/div><div id=\"accordion-content-post-2974\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2974\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">8<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\"><strong>\u00a0A:<\/strong> Yes \u2014 Angular supports hybrid use of modules and standalone components. You can incrementally convert components to standalone by adding <\/span><span style=\"font-weight: 400\">standalone: true<\/span><span style=\"font-weight: 400\">, moving their dependencies into the <\/span><span style=\"font-weight: 400\">imports<\/span><span style=\"font-weight: 400\"> of the component, and removing them from modules, then using <\/span><span style=\"font-weight: 400\">bootstrapApplication<\/span><span style=\"font-weight: 400\"> when all is migrated.<\/span><\/p>\n<\/div><\/li><\/ul><\/div><\/div><\/article><\/section>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">8<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span> App development is now super-simple and quicker with the new features including standalone components in Angular 14. Because of the standalone components, the use of NgModules has now become optional. The Angular developer community strives to provide web developers with better versions of the TypeScript-based framework while also allowing them to stay on track with [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1403,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[289],"tags":[100,344,346,343,131,255,347,342,314,254,345,6],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create &amp; Use Standalone Components in Angular 14 - The Workfall Blog<\/title>\n<meta name=\"description\" content=\"App development is now super-simple and quicker with the new features including standalone components in Angular 14.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create &amp; Use Standalone Components in Angular 14 - The Workfall Blog\" \/>\n<meta property=\"og:description\" content=\"App development is now super-simple and quicker with the new features including standalone components in Angular 14.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/\" \/>\n<meta property=\"og:site_name\" content=\"The Workfall Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/workfall\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-10T11:46:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-25T09:20:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/10\/Cover-Images_Part2-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@workfall\" \/>\n<meta name=\"twitter:site\" content=\"@workfall\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Workfall\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/18.141.20.153\/learning\/blog\/#organization\",\"name\":\"Workfall - Hire #Kickass Coders On Demand\",\"url\":\"https:\/\/18.141.20.153\/learning\/blog\/\",\"sameAs\":[\"https:\/\/www.instagram.com\/workfall\/\",\"https:\/\/www.linkedin.com\/company\/workfall\/\",\"https:\/\/facebook.com\/workfall\",\"https:\/\/twitter.com\/workfall\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/18.141.20.153\/learning\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400\",\"contentUrl\":\"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400\",\"width\":400,\"height\":400,\"caption\":\"Workfall - Hire #Kickass Coders On Demand\"},\"image\":{\"@id\":\"https:\/\/18.141.20.153\/learning\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/18.141.20.153\/learning\/blog\/#website\",\"url\":\"https:\/\/18.141.20.153\/learning\/blog\/\",\"name\":\"The Workfall Blog\",\"description\":\"#Tech #Remote #Jobs\",\"publisher\":{\"@id\":\"https:\/\/18.141.20.153\/learning\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/18.141.20.153\/learning\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#primaryimage\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/10\/Cover-Images_Part2-2.png\",\"contentUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/10\/Cover-Images_Part2-2.png\",\"width\":1200,\"height\":628,\"caption\":\"How to Create & Use Standalone Components in Angular 14?\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#webpage\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/\",\"name\":\"Create & Use Standalone Components in Angular 14 - The Workfall Blog\",\"isPartOf\":{\"@id\":\"https:\/\/18.141.20.153\/learning\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#primaryimage\"},\"datePublished\":\"2022-10-10T11:46:47+00:00\",\"dateModified\":\"2025-09-25T09:20:54+00:00\",\"description\":\"App development is now super-simple and quicker with the new features including standalone components in Angular 14.\",\"breadcrumb\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/18.141.20.153\/learning\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create &#038; Use Standalone Components in Angular 14\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#webpage\"},\"author\":{\"@id\":\"https:\/\/18.141.20.153\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a\"},\"headline\":\"Create &#038; Use Standalone Components in Angular 14\",\"datePublished\":\"2022-10-10T11:46:47+00:00\",\"dateModified\":\"2025-09-25T09:20:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#webpage\"},\"wordCount\":1632,\"publisher\":{\"@id\":\"https:\/\/18.141.20.153\/learning\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/10\/Cover-Images_Part2-2.png\",\"keywords\":[\"angular\",\"angular14\",\"angulardevelopers\",\"angularjs\",\"developers\",\"frontend\",\"frontenddevelopers\",\"js\",\"stackblitz\",\"typescript\",\"webdeveloper\",\"workfall\"],\"articleSection\":[\"Frontend Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/18.141.20.153\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a\",\"name\":\"Workfall\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/18.141.20.153\/learning\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png\",\"contentUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png\",\"caption\":\"Workfall\"},\"sameAs\":[\"https:\/\/www.workfall.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create & Use Standalone Components in Angular 14 - The Workfall Blog","description":"App development is now super-simple and quicker with the new features including standalone components in Angular 14.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/","og_locale":"en_US","og_type":"article","og_title":"Create & Use Standalone Components in Angular 14 - The Workfall Blog","og_description":"App development is now super-simple and quicker with the new features including standalone components in Angular 14.","og_url":"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/","og_site_name":"The Workfall Blog","article_publisher":"https:\/\/facebook.com\/workfall","article_published_time":"2022-10-10T11:46:47+00:00","article_modified_time":"2025-09-25T09:20:54+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/10\/Cover-Images_Part2-2.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@workfall","twitter_site":"@workfall","twitter_misc":{"Written by":"Workfall","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/18.141.20.153\/learning\/blog\/#organization","name":"Workfall - Hire #Kickass Coders On Demand","url":"https:\/\/18.141.20.153\/learning\/blog\/","sameAs":["https:\/\/www.instagram.com\/workfall\/","https:\/\/www.linkedin.com\/company\/workfall\/","https:\/\/facebook.com\/workfall","https:\/\/twitter.com\/workfall"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/18.141.20.153\/learning\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400","contentUrl":"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400","width":400,"height":400,"caption":"Workfall - Hire #Kickass Coders On Demand"},"image":{"@id":"https:\/\/18.141.20.153\/learning\/blog\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/18.141.20.153\/learning\/blog\/#website","url":"https:\/\/18.141.20.153\/learning\/blog\/","name":"The Workfall Blog","description":"#Tech #Remote #Jobs","publisher":{"@id":"https:\/\/18.141.20.153\/learning\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/18.141.20.153\/learning\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#primaryimage","url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/10\/Cover-Images_Part2-2.png","contentUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/10\/Cover-Images_Part2-2.png","width":1200,"height":628,"caption":"How to Create & Use Standalone Components in Angular 14?"},{"@type":"WebPage","@id":"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#webpage","url":"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/","name":"Create & Use Standalone Components in Angular 14 - The Workfall Blog","isPartOf":{"@id":"https:\/\/18.141.20.153\/learning\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#primaryimage"},"datePublished":"2022-10-10T11:46:47+00:00","dateModified":"2025-09-25T09:20:54+00:00","description":"App development is now super-simple and quicker with the new features including standalone components in Angular 14.","breadcrumb":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/18.141.20.153\/learning\/blog\/"},{"@type":"ListItem","position":2,"name":"Create &#038; Use Standalone Components in Angular 14"}]},{"@type":"Article","@id":"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#article","isPartOf":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#webpage"},"author":{"@id":"https:\/\/18.141.20.153\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a"},"headline":"Create &#038; Use Standalone Components in Angular 14","datePublished":"2022-10-10T11:46:47+00:00","dateModified":"2025-09-25T09:20:54+00:00","mainEntityOfPage":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#webpage"},"wordCount":1632,"publisher":{"@id":"https:\/\/18.141.20.153\/learning\/blog\/#organization"},"image":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/#primaryimage"},"thumbnailUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/10\/Cover-Images_Part2-2.png","keywords":["angular","angular14","angulardevelopers","angularjs","developers","frontend","frontenddevelopers","js","stackblitz","typescript","webdeveloper","workfall"],"articleSection":["Frontend Development"],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/18.141.20.153\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a","name":"Workfall","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/18.141.20.153\/learning\/blog\/#\/schema\/person\/image\/","url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png","contentUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png","caption":"Workfall"},"sameAs":["https:\/\/www.workfall.com"]}]}},"jetpack_featured_media_url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/10\/Cover-Images_Part2-2.png","jetpack-related-posts":[{"id":2337,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-handle-authentication-in-angular-spas\/","url_meta":{"origin":1402,"position":0},"title":"How to Handle Authentication in Angular SPAs?","date":"May 30, 2023","format":false,"excerpt":"Angular is a good framework for creating Single Page Applications (SPAs) using JavaScript\/TypeScript. With Single Page Applications, routing is handled on the client side. This calls for protecting routes on the client side as well. Angular comes with the Angular Routing module which handles routing. Sometimes you will have protected\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"How to Handle Authentication in Angular SPAs?","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/05\/Cover-Images_Part2-2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":848,"url":"https:\/\/learning.workfall.com\/learning\/blog\/angular-vs-react-which-one-to-choose-and-when\/","url_meta":{"origin":1402,"position":1},"title":"Angular vs React: Which one to choose and when?","date":"December 30, 2021","format":false,"excerpt":"Javascript is one of the most widely used programming languages today. Many developers, both new and experienced, choose to use Javascript to construct their applications or projects, but they are sometimes perplexed while deciding which framework or library to use for their projects. Although Angular and ReactJs are their top\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"Angular vs React: Which One to Choose for Your App","src":"https:\/\/i2.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/12\/Cover-Images_Part2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1533,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/","url_meta":{"origin":1402,"position":2},"title":"How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions?","date":"December 20, 2022","format":false,"excerpt":"Refer to Part 2 of this blog, to know How to Write Unit Tests for Forms in an Angular 15 Application Using Jasmine? In this blog, we will cover: What is Unit Testing?About AngularAbout JasmineHands-onConclusion What Is Unit Testing? As you develop applications, you write code and as the application\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions?","src":"https:\/\/i0.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/12\/Cover-Images_Part2-1-2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":902,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-plot-bar-charts-in-angular-using-npm-package-highcharts\/","url_meta":{"origin":1402,"position":3},"title":"How to plot Bar Charts in Angular using npm package Highcharts?","date":"April 12, 2022","format":false,"excerpt":"Highcharts have been around since 2009 helping IT professionals, deep tech aficionados, and even recent graduates to present data in a user-friendly manner.\u00a0 It is basically a complex word for charts used by developers while in the development stage of web applications. It comes with extensive documentation, high responsiveness, and\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"Plot Bar Charts in Angular JS","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/04\/Cover-Images_Part2-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":867,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/","url_meta":{"origin":1402,"position":4},"title":"Custom Pipes in Angular Framework","date":"February 2, 2022","format":false,"excerpt":"In Angular, pipes are a helpful feature. They're a quick and easy way to change values in an Angular template. A pipe accepts one or more values and then returns one or more values. Pipes can be used to display strings, currency amounts, dates, and other types of data. Pipes\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"Custom Pipes in Angular Framework - Workfall","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/02\/Cover-Images_Part2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1015,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-enhance-ux-by-managing-api-requests-using-angular-resolver\/","url_meta":{"origin":1402,"position":5},"title":"How to enhance UX by managing API requests using Angular Resolver?","date":"June 28, 2022","format":false,"excerpt":"It might be challenging at times to build Angular applications. This could be caused by flaws that later have an impact on the user experience or by delayed server answers following API calls. If real-time apps are developed that involve numerous server requests or calls, the user experience could suffer.\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"Enhance UX by Angular Resolver","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/06\/Cover-Images_Part2-1-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/1402"}],"collection":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/comments?post=1402"}],"version-history":[{"count":5,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/1402\/revisions"}],"predecessor-version":[{"id":2976,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/1402\/revisions\/2976"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/media\/1403"}],"wp:attachment":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/media?parent=1402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/categories?post=1402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/tags?post=1402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}