Angular released its 15th version last November 2022 and a 15.2 version this February.
The new version comes with great features: Standalone Components, Image Directive, among other improvements to its entire ecosystem and community.
A new version of Angular
Angular launches its 15th version and this is already normal within its ecosystem, since every six months there is a version with improvements, updates and new features to create more powerful applications.
This shouldn’t cause any concern if you have Angular projects with any other version. It doesn’t matter which version you are working on, you can simply click the update button and continue working without any problems.
How can I update Angular?
Angular has made the upgrade job much easier and you only need to run the ng update command to upgrade.
Note that you need to do it gradually. That is, if you are working on a project in Angular with version 13, you must first update to version 14 and then to version 15, to do this you run the command indicating the version you want to update.
If you want more details you can go to the official Angular page, where you indicate the version you are on and which one you want to upgrade to. There you have more details on how to do it, however, 99% of the work is already done by the ng update command.
What’s new in Angular version 15?
We have to remember that Angular is a whole platform that allows us to use several tools to build powerful applications, so, when there is a new version the changes and new features come from many of its packages.
Applications without modules
Standalone Components is one of the most important innovations. It is about developing applications without the need for modules.
One of the objectives of Angular is to minimize the learning curve of new people learning this framework and modules is one of the concepts that are difficult to understand at the beginning. Since version 14 had already released a preliminary version of the Standalone Components, now we have a more robust API to support it. For example, with a single file you could run an Angular App without using modules.
This does not mean that modules will no longer be used. Rather, you now have the possibility to handle both structures. And, in addition, Angular is backwards compatible, that is to say, this new form is optional, if you want to continue working with modules you can continue to do so or even have hybrids of modules and Standalone Components.
Lazy Loading of components
When you want to implement the Lazy Loading pattern you do it through a module; however, now thanks to Standalone Components you will be able to do it directly in components and you don’t have to solve the dynamic import promise, it is done automatically.
Improved image loading
Another new feature is that we have a new directive in Angular to improve the loading of images and thus reduce loading times on a website. For example, we have a test site that takes 4 seconds to load an image; applying the new directive would take much less.
To use it, all you have to do is import the NgOptimizedImage module where you want to use it and then use the attr ngSrc on your images.
One example of the impact of this directive is the ecommerce site Land’s End. Since it uses a lot of images, after applying this feature it saw a 75% improvement in site load times, according to the lighthouse report.
Improved bug formatting
Debugging is one of the primary tasks of a web developer and Angular has always been ahead of the curve in giving us better tools to analyse bugs. Now you have a more complete way to know how and why an error occurred, with clearer formatting.
Now in version 15 the errors are small, with relevant information and it tells you where the error occurs more precisely.
Angular Material aligned with Material Design 3
Angular Material is one of those packages that you can use or not use in Angular, remember you choose which parts of the framework to use. In this case, Angular Material would be a library of components with a visual style following Google’s Material Design design system for applications and they released version number 3 of this design system.
What changes in this version? Precisely, Google is making an update to its design system and as part of it released tools for Android, Flutter and Web where it is easier to implement and follow its guidelines.
Now, the Angular Material team will be using these Material Design tools directly, making it easier to maintain and implement the design system more faithfully.
If you use Angular Material and you want to upgrade to version 15 if you must make extra steps, since this change will modify how to work with Angular Material but Angular always thinks of you and you can make this migration with the commands.
Also new in this new version is support for the mat-slider component with ranks.
New utility in Angular CDK
The Angular CDK is a set of tools for UI behaviours that are agonistic to the visual style, meaning that you could save many lines of code by making behaviours like Drag and Drop, Modals, Overlays but you add your own visual style.
An example of this is using the Angular CDK + TailwindCSS to create an interface like trello.
And this new version includes a new CDK Listbox behaviour.
By using @angular/cdk/listbox, you get all the expected behaviours of a list, including accessibility, keyboard interaction, focus management, etc.
Faster Build with ESBuild
In this release they improve support for ESBuild, a packager that is written in GO and would be the replacement for Webpack. With this, running commands like ng build takes less time and you can even livereload with ng build –watch.
In version 14 a pre-release was released, this version already includes the packaging process with this tool and includes the processing of sass, svg and fileReplacement files.
Fewer files
When you start a new project in Angular you will notice that there is a noticeable difference with the decrease in the number of files.
What about files that disappear? Angular handles those settings in the backend and some of them do disappear and others you will have to enable if you really use them.
For example, you won’t find the environments folder anymore if you really need to manage environments and place your keys there then you manually enable the file. Don’t worry if you already managed the files with custom settings, Angular will keep them.
Choose your testing tool for e2e
Angular recently deprecated Protractor as the tool for writing e2e tests. So what to use? There are tools in the industry that are doing a great job for this type of testing and now Angular gives you the choice of which one you want to work with when you run the ng e2e command.
Benefits of Angular 15 and Stripe Integration
Stripe is an online payment platform that allows businesses to process transactions securely and efficiently. Integrating Stripe into an Angular application can provide a wide range of benefits for users and business owners.
Here are the benefits of integrating Stripe Integration into an application developed by Angular 15.
Secure payment processing
Stripe is a trusted payment platform that uses the highest security standards in the industry to protect users’ payment information. By incorporating Stripe into an Angular application, users can be confident that their payment data will be protected and not shared with third parties. This can increase user confidence in the application and the brand behind it.
Payment processing flexibility
Stripe offers a wide variety of payment processing options, including credit and debit cards, Apple Pay, Google Pay, and others. By incorporating Stripe into an Angular application, business owners can offer users a wide variety of payment options, which can increase customer satisfaction and sales conversion.
Ease of integration
Stripe offers an easy-to-use API that allows for quick and easy integration with Angular applications. By incorporating Stripe into an Angular application, business owners can save time and resources by not having to develop a custom payment solution from scratch.
Centralized payment management
Stripe provides a centralized payment management platform that allows business owners to track transactions, issue refunds and perform other payment management tasks. By incorporating Stripe into an Angular application, business owners can manage all of the application’s transactions in one place, which can simplify the payment management process.
Improved user experience
By incorporating Stripe into an Angular application, users can experience a fast and seamless checkout process. This can improve the user experience and increase customer satisfaction. Users can pay for the products or services they want easily and quickly, without having to worry about technical or security issues.
Expanding customer base
By offering a variety of payment options to users, business owners can expand their customer base. By incorporating Stripe into an Angular application, business owners can attract users who prefer to pay with a specific payment option, which can increase the sales and profitability of the application.
Fraud Reduction
Stripe has tools and security measures in place to detect and prevent fraud in payment transactions, which can help protect both business owners and app users.
Access to payment data
By using Stripe, business owners can access valuable information about payment transactions, such as purchase frequency, average purchase value and other relevant data. This data can help business owners make informed decisions about their sales and marketing strategy.
Integration with other business tools
Stripe integrates with a wide variety of business tools, such as e-commerce platforms, billing and accounting services, and more. By incorporating Stripe into an Angular application, business owners can leverage these integrations to improve the efficiency and effectiveness of their business.
Technical support and learning resources
Stripe offers excellent technical support and a wide variety of learning resources to help business owners use the platform effectively. This can help business owners troubleshoot technical issues and learn new strategies to improve their payment processing and payment management.
We will soon bring news about the upcoming 16th version of Angular to be released this May.
