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.
What’s new in Angular 14?
Angular, a Google-developed framework, has released its latest v14 update, which includes standalone components, optional NgModules, typed reactive forms, and improved template diagnostics.
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.
Angular 14 is thought to be Angular’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.
Here are the most important updates in Angular 14:
- Standalone Components: The Angular 14 modules are optional; however, the goal is to depart from the current configuration by constructing pipes, directives, and components.
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.
It should be noted that prior to Angular 14, each component had to be associated with a module. If a parent module’s declarations array is not linked with every component, the application will fail.
- Strictly Typed Forms: The strictly typed forms will improve Angular’s modern-driven approach to integrating with existing forms.
- Angular CLI Auto-Completion: 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.
- Improved Template Diagnostics: The new Angular 14 update includes improved template diagnostics to protect developers from generic errors caused by compiler reconciliation to typescript code.
- Streamlined Page Title Accessibility: 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 Route.title property in the Angular router. However, Angular 14 does not support the additional imports required when adding a title to your page.
- Latest Primitives in the Angular CDK: 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.
- Angular DevTools is Now Present Online: It is simple to use the Angular DevTools debugging extension while offline. This extension is available for Firefox users through Mozilla’s Add-ons.
- Optional Injectors: When creating an embedded view in Angular 14, you can use TemplateRef.createEmbeddedView & ViewContainerRef.createEmbeddedView to specify an optional injector.
- Built-in Enhancements: 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.
- Extended Developer Diagnostics: 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.
Hands-on
In this hands-on, we will begin with an online compiler for angular called StackBlitz 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’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.
If you want to follow the steps on an online compiler, navigate to the StackBlitz portal. Click on Angular.
You will be navigated to the Angular compiler with some files preloaded displaying a sample startup app.
Select the src folder and right-click on it. Select Angular Generator and click on the component.
Enter the name of the component and press enter.
On success, you’ll see the files created along with the .html and .ts files.
Now, open the app.module.ts file.
Remove the default component that is loaded by default when we first start the compiler.
Remove its declaration from the import key as well.
Navigate to the app.component.html file and remove the declaration of the default component.
You can then add your own content as required and the error on the UI screen will be resolved.
Now, follow the same steps to create another new component.
Enter a name for that component and hit enter.
On success, the corresponding files will be created.
Now, open the first new components (homepage.component.ts) ts file, and in the @Component, add a new key ‘standalone’ with its value set to true.
The 2nd new component (standalone.component.ts) 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.
Add a global import for the Standalone component as shown in the image below.
Now, open the homepage.component.html file.
Replace its content with the desired content.
Declare the standalone component as a child component.
Add a class to the main div tag.
Open the homepage.component.css file.
Declare the class and add styling for the same.
Now, open the standalone.component.html file and add the following content to it.
Open the standalone.component.ts file and add a key of standalone with the value true in the component.ts file.
Open the app.module.ts file and import the HomePage component.
Now, open the app.component.html file and declare the parent (homepage) component. On success, you will see the content of the parent component loaded along with the standalone component’s (standalone component) content loaded on the UI.
You can expand the UI screen to look at the output.
Now, to differentiate between the components, we will need to add some styling. Open the homepage.component.css file and add the below styling.
Then, open the standalone.component.css file and the following styling. Click on Open in New Tab.
Now, you will be able to view the standalone component as a separate component from the Homepage component with proper styling.
Conclusion
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.
Meanwhile…
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:
- How to make use of an npm package Highcharts to plot Network Graphs in Angular?
- How to enhance UX by managing API requests using Angular Resolver?
- How to plot Bar Charts in Angular using npm package Highcharts?
- How to build an Angular Authentication Application using AWS Amplify?
- How to export datasets into CSV format using Angular with FileSaver?
Keep Exploring -> Keep Learning -> Keep Mastering
At Workfall, we strive to provide the best tech and pay opportunities to kickass coders around the world. If you’re looking to work with global clients, build cutting-edge products and make big bucks doing so, give it a shot at workfall.com/partner today!
