Albiorix is a custom software development company providing top-notch services to build tailor-made custom software solutions to your needs.
At Albiorix, we enjoy working on popular and trending technologies. Whether it's backend or frontend, AI or Cloud, we can help your business innovate and grow.
Our expertise spans all major technologies and platforms, and advances to innovative technology trends.
We strictly adhere to the standard software development lifecycle to provide the best possible IT solutions for your business success.
Check our web & mobile app development portfolio. We have designed and developed 150+ apps for all business verticals as per their specific needs.
Our prime clients share the prioritized experience and personal recommendations about working with our development team.
Albiorix Technology is a Australia-based IT consulting and software development company founded in 2018. We are a team of 100+ employees, including technical experts and BAs.
Founder & CEO
Published On: Apr 05, 2023
Angular is an in-demand and open-source framework that has come up with astonishing updates of the new version. Yes, you read it right.
Angular 15 is now live.
After the successful launch of Angular 14, Angular 15 is back with more and more exciting updates and allowing Angular developers in building robust applications.
Yeah, I know you all are too enthusiastic to see what’s new in Angular 15. So, let’s start to see what new updates have been introduced in the latest Angular version 15.
Angular 15 release date is 16th November 2022 and brought a big smile to Angular developers (including me) globally. The reason was quite obvious as they were expecting something big to announce and it really happened.
Angular 15 came with some limelight and interesting new features like
Sounds interesting, Right. These are the major updates that are introduced in the Angular 15 version. We’ve highlighted detailed information on all such major features of Angular latest version 15. In this article, I hope that you have a clear idea of what is Angular and what it’s main used for.
We have a team of Angular developers who are proficient in developing web and mobile apps using Angular version 15.
Yeah! I know you all are too much excited to know about the inspiring features that are introduced in Angular 15. Let’s get a deep dive into all the technical aspects of current Angular version 15.
In Angular v15, the first and most important feature that has been updated is stable standalone components API.
You can quickly build Angular applications without any involvement of ngModules. Moreover, it is one of the best examples of gaining stability after detailed performance observation and amendments.
If you’re entirely new to development or have a basic knowledge of JavaScript, Angular 15 is the best front–end development tool for learning Angular development practices.
And if we talk about Angular standalone components, you can efficiently work with them across Angular applications. Moreover, they are 100% functional in Angular elements, HttpClient, Routes, and many more.
The exciting part of Angular 15 is that you can quickly bootstrap an Angular app using only a single component.
How to use standalone API in Angular 15? To answer this question, please have a look at the below code.
import {bootstrapApplication} from '@angular/platform-browser'; import {ImageGridComponent} from'./image-grid'; @Component({ standalone: true, selector: 'photo-gallery', imports: [ImageGridComponent], template: ` ... <image-grid [images]="imageList"></image-grid> `, }) export class PhotoGalleryComponent { // component logic } bootstrapApplication(PhotoGalleryComponent);
In the above code, you can see that it mentions “standalone: true”. That’s an example of a standalone component API. So, you do not have to declare components, directives, and pipes into NgModule. If you do that mistake, get ready to receive a big error on your screen.
With the help of stable Standalone APIs, you can effectively create Multi-Route Application
In case, if you want to import NgModule in your standalone component APIs of Angular application, do it by simply writing import: [module_name] and you are good to go. Often, there exist many advantages to using the Angular framework, but Angular 15 possess more functionalities as compared to previous versions.
Yes, you read it right. Angular 15 is now ready with an essential functionality named router standalone API that makes it easy for you to build multi-route applications.
First, let’s declare the root route for your Angular application.
export const appRoutes: Routes = [{ path: 'lazy', loadChildren: () => import('./lazy/lazy.routes') .then(routes => routes.lazyRoutes) }];
Next, you can declare lazyRoutes as:
import {Routes} from '@angular/router'; import {LazyComponent} from './lazy.component'; export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];
Remember that you have to register the appRoutes in the bootstrapApplication method and call it using the ProvideRouter API, which is tree-shakable!
bootstrapApplication(AppComponent, { providers: [ provideRouter(appRoutes) ] });
All Angular developers working with leading AngularJS development company, including me, were waiting for a feature where we could easily reuse the directives. And that’s what the Angular team made possible for us by including Standalone Directive Composition API and made our development experience smooth.
Want to know how? Directive Composition API makes code usability enhancement and boosts host elements with directives. However, always remember that Directive Composition works only with standalone directives.
@Component({ selector: 'mat-menu', hostDirectives: [HasColor, { directive: CdkMenu, inputs: ['cdkMenuDisabled: disabled'], outputs: ['cdkMenuClosed: closed'] }] }) class MatMenu {}
You can see from the above code that the “MatMenu” selector has two hostDirectives: HasColor and CdkMenu.
It means that MatMenu can reutilize all the properties from these two directives. Simply put, it can be inherited with the inputs, outputs, and logic associated with the HasColor directive and only logic and input from CdkMenu.
In the Angular 14 version, we’ve seen that one of the best ways to load image performance was by using the NgOptimizedImage directive. But it’s good news for Angular developers that the option of Image directive has become stable now.
With the launch of Angular 15, there are some minor updates in NgOptimizedImage
Now, let’s see how we can use the standalone NgOptimizedImage directive.
You can use NgOptimizedImage inside your Angular component or NgModule.
import { NgOptimizedImage } from '@angular/common'; // Include it into the necessary NgModule @NgModule({ imports: [NgOptimizedImage], }) class AppModule {} // ... or a standalone Component @Component({ standalone: true imports: [NgOptimizedImage], }) class MyStandaloneComponent {}
You just have to replace image src with ngsrc, especially when you’re using an Angular image directive within a specified component. It plays a vital role in determining the priority attribute to optimize the speed for the LCP images.
It’s a practical concept. So, let’s dive deep into the example without taking much time. First, we’ve defined guards to verify whether the user has logged in.
@Injectable({ providedIn: 'root' }) export class MyGuardWithDependency implements CanActivate { constructor(private loginService: LoginService) {} canActivate() { return this.loginService.isLoggedIn(); } } const route = { path: 'somePath', canActivate: [MyGuardWithDependency] };
Here, you can see that LoginService contains the main logic, wherein the guard – only isLoggedIn() is one trigger invoked. As many boilerplates are included in this code segment, need to reduce it to the maximum.
Thanks to Functional Router Guards, you can easily refactor code into the given-below code with the necessary boilerplates.
const route = { path: 'admin', canActivate: [() => inject(LoginService).isLoggedIn()] };
One of the excellent parts about Functional Guards is that they are purely compostable. So, it brings convenience to you in many ways, including building robust functionalities like factor-like functions, accepting a given configuration and returning a guard or function that resolves a matter.
With the launch of the latest version of Angular, debugging Angular applications has been simplified and is now more straightforward with stack traces. Angular’s development team strives to achieve a standard for tracing development code irrespective of displaying libraries during the entire Angular development lifecycle.
The primary aim of developing such stack traces is to improve the display of error messages as they come by. For example, developers get a one-liner error message during the own code discovery phase if we talk about the previous versions of Angular. And a lot more to deal with the lengthy procedure to resolve that bug.
First, let’s see the snippet for previous error indications:
ERROR Error: Uncaught (in promise): Error Error at app.component.ts:18:11 at Generator.next (<anonymous>) at asyncGeneratorStep (asyncToGenerator.js:3:1) at _next (asyncToGenerator.js:25:1) at _ZoneDelegate.invoke (zone.js:372:26) at Object.onInvoke (core.mjs:26378:33) at _ZoneDelegate.invoke (zone.js:371:52) at Zone.run (zone.js:134:43) at zone.js:1275:36 at _ZoneDelegate.invokeTask (zone.js:406:31) at resolvePromise (zone.js:1211:31) at zone.js:1118:17 at zone.js:1134:33
Developers were not able to understand the ERROR snippets due the following reasons:
Now, with Angular 15, you can see the improvement in the stack traces as mentioned below:
ERROR Error: Uncaught (in promise): Error Error at app.component.ts:18:11 at fetch (async) at (anonymous) (app.component.ts:4) at request (app.component.ts:4) at (anonymous) (app.component.ts:17) at submit (app.component.ts:15) at AppComponent_click_3_listener (app.component.html:4)
The above code shows that error message information from where it got encountered,, so developers can directly go to that code part and fix it immediately.
MDC stands for Material Design Components, which are pre-built UI components that implement the Material Design specification. Angular provides a way to use MDC-based components in your application through the Angular Material library.
Angular Material is a UI component library for Angular that is built with Material Design principles in mind. It provides a set of building UI components that can be easily integrated into your Angular application. Angular Material design components typically uses MDC web components under the hood, which means that the components are built using the same CSS and JavaScript as the MDC components.
Some of the Angular Material components include buttons, cards, menus, dialogs, and many others. These components are fully customizable and can be styled to fit the look and feel of your application.
To use Angular Material in your application, you need to install the @angular/material package and automatically import components and the required modules in your application module. Here’s an example:
import { NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; @NgModule({ imports: [ MatButtonModule, MatCardModule ], exports: [ MatButtonModule, MatCardModule ] }) export class MaterialModule { }
CDK (Component Dev Kit) offers different behavior user interface primitives that help you build UI components. The Angular v15 gets a new primitive called CDK Listbox, making it easy for the Angular developers to customize Listbox interactions drawn up by the WAI-ARIA Listbox pattern based on requirements.
Here, the behavioral interactions have impressive features like keyboard interactions, bidi layout support, lazy loading, and focus management. Moreover, it does not matter what you use; every directive creates associated ARIA roles with respective host Angular elements.
In the previous version of the Angular framework, you can efficiently support esbuild to effectively build a faster javascript bundler, enabling quick build done by simplifying the server-side rendering pipeline.
The Angular 15 comes up with new experimental support for the ng build –watch support, Sass, SVG template, and file replacement.
Now, let’s see the command for upgrading the angular.json builder is:
The Angular development team worked hard on minimizing the boilerplate code by simply performing code refactoring. It is made possible by using the tree-shakable standalone router APIs in your business applications. Moreover, it helps you reduce the bundle size of Angular with the new Functional Router Guards; we can refactor the code.
Angular is one such robust framework that comes up with multiple Angular development tools. Installing Angular 15 on your system is very easy, you just need NPM installed in your system.
Command to install Angular 15: npm install – global @angular/cli@latest
If you’re already using Angular version 14 or lower, and you want to upgrade to Angular 15, you need to type the following command.
Please follow Angular Update Guide
What are you waiting for? Upgrade to Angular 15 and grab the Angular 15 new features to build a robust and secure web application for your business needs.
Angular 16 is now available, and you can install it without obstructions. Still, if you find any issue in installing or planning to develop front-end development services, consult Albiorix now.
Dec 04, 2024
Best ERP Solution for Your Business in 2025 Enterprise Resource Planning (ERP) solutions are comprehensive software systems designed to integrate…
Nov 27, 2024
AI in Video Game Development The global gaming industry is no longer just about entertainment—it’s a thriving sector at the…
Angular is a leading front-end JavaScript framework that helps you build robust web applications for your business needs.
Angular 15 is released with many new features that are stable like standalone components API and Directive composition API. So we can say that Angular 15 is stable.
Nov 21, 2024
In today’s digital-first world, businesses are under constant pressure to innovate and adapt. Enter digital product development — a transformative…
Explore the illustrious collaborations that define us. Our client showcase highlights the trusted partnerships we've forged with leading brands. Through innovation and dedication, we've empowered our clients to reach new heights. Discover the success stories that shape our journey and envision how we can elevate your business too.
Whether you have a query, a brilliant idea, or just want to connect, we're all ears. Use the form below to drop us a message, and let's start a conversation that could shape something extraordinary.
Completed Projects
Global Customers
On-Time Delivery Projects
Countries Clients Served