What’s New in the Latest Version of Angular v15?

Angular is a framework for building web applications. It was developed by Google and has become a popular choice among web developers. The latest version, Angular 15, includes several improvements over previous versions. 

This post will explore some of the key changes in Angular version 15 including new features and bug fixes (plus an exciting new feature!).

Image Directive (NgOptimized Image) is Now Stable

The Image directive is now stable in the latest version of Angular. This means that you can use it to load images from your server or locally, just as you would with any other component.

In the previous version of Angular for custom PHP development, you would have to use Webpack or another module bundler to get stack traces for errors.

For example, if you used module bundlers like Webpack or Browserify to build your application, you would need to add a file called StackTrace.ts into your main src/app folder and then export it with an import statement in each file that needed a stack trace. 

This made it difficult for developers who weren’t familiar with JavaScript ES6 syntax or TypeScript/TypeScript-like languages (like Flow) because they had no idea how exactly this class was implemented.

Directive Composition API

The Directive Composition API is a new feature in Angular that allows you to compose multiple directives into a single directive. This can be useful for creating reusable components, or even building custom filters on top of existing ones.

In the previous version of Angular (v14), there was no way to create classes that combined multiple services. With the web evolution, we now have two ways:

• Using composition wrappers – these are special classes that wrap around other objects and provide additional features like class inheritance and interfaces. They are limited because they only work with decorated components but can still help with some tasks such as dependency injection (DI). For example, if your project needs an interface but doesn’t want all its methods defined by default then you could use one from here instead of defining them manually in each file where needed.
• Including inputs and outputs – when you apply hostDirectives to a component, the inputs and outputs from the host directives are not by default included in the component’s API. By expanding the entry in hostDirectives, you can explicitly include inputs and outputs in your component’s API.

@Component({
selector: 'mat-menu',
hostDirectives: [HasColor, {
directive: CdkMenu,
inputs: ['cdkMenuDisabled: disabled'],
outputs: ['cdkMenuClosed: closed']
}]
})
class MatMenu {}

Functional Router Guards

You can use the new guard syntax to define an optional path segment in your routes. This allows you to match routes with regular expressions, which is a very powerful feature.

In the previous version of Angular, you would have to use Webpack or another module bundler to get stack traces for errors we would help in WordPress website cost reduction. 

For example, if you used module bundlers like Webpack or Browserify to build your application, you would need to add a file called StackTrace.ts into your main src/app folder and then export it with an import statement in each file that needed a stack trace. 

Better Stack Traces

You can now see the code that led to your error and why it happened. Stack traces are now more helpful, accurate, and detailed than ever before. They show you the step-by-step progression of an exception through its lifecycle, so you can easily understand what caused it and how your app’s code should be better structured to prevent future issues.

Optimized CLI with a Bunch of Improvements

Angular CLI is a tool that allows you to create and manage Angular apps, using the command-line interface (CLI). The CLI is a great way to get started with an application, but it’s not without its limitations. 

For example, if you’re new to web development and aren’t familiar with Node or Webpack, then getting started with the CLI might be difficult.

In this article, we’ll go over some of the improvements made in version 15 of Angular CLI. These include:

• Additional commands such as ng new –no-skip-web pack or ng build –prod (for production builds) – allow you to specify build targets when using other tools such as Webpack which can be helpful for those who want more control over their projects’ configuration files but still want them built automatically by default when working locally without having any knowledge about how those settings work themselves;
• Improved error messages – these should now explain why something failed rather than just saying “Error”, so users will know what happened without having to look through logs;
• Improved documentation – features like documentation generation have been improved upon so there aren’t any more typos or incomplete sentences;
• Improved code completion – works better than ever before! You’ll find yourself typing less often because everything has gotten easier thanks again.

Stable MDC-based Components

The MDC (Model-Driven Component) architecture is a new way to separate the view from the model, and also from other components. This allows you to create reusable components that are as easy to test as plain HTML or JS files.

The idea behind MDC is simple, instead of having everything in your app be defined somewhere else, like CSS rules or templates, you can create reusable parts of your application by having them live in their files (similarly to how JavaScript modules work). 

You can then use these files anywhere else in your app without worrying about how they should look or behave like they’re part of some larger whole—the only thing that matters is whether or not it works!

Extended esbuild support

The new esbuild build system is a replacement for the traditional ng build system. It’s faster, more efficient, and better suited to building large applications.

The main advantage of this new feature for custom PHP development is its ability to generate optimized builds with no need for manual intervention or configuration files. This means you can focus on writing code rather than worrying about how your app will be built into a release artifact (i.e., an executable). However if you haven’t using PHP yest you must consider migrating to PHP!. 

CDK Listbox

The CDK Listbox is a component that allows you to display lists of items. It’s built on top of the Angular Material library, so you can use it with any app or framework based on Angular.

The CDK Listbox has several features:

• It’s fully customizable. You can change its color, font size, line height, padding, and spacing by using CSS in your stylesheet or through parameters passed during initialization (for example {listbox:[]}).
• It supports multiple columns for better readability when displaying long lists of data (like file names) and also allows you to create scrollable elements like accordions or tabs that reveal additional information when clicked on them (similar to what we did in this project).

Router Unwraps Default Imports

The new router unwraps default imports, so you can import { Component } from ‘@angular/core’. This means that your app’s components are no longer required to be injected with a Router instance.

To use the new Angular 15 Features, you should replace the following lines:

import { Component } from ‘@angular/core’;

import { Router } from ‘@angular/router’;

import { HomeComponent } from ‘./home/home.component’;“`with this line:

Dependency Injection

Dependency Injection (DI) is a design pattern that allows the creation of loosely coupled objects. It’s used to inject dependencies into an object, such as a service or component.

The idea behind DI is that you shouldn’t have to pass all of your dependencies around in every constructor or method call, which can lead to code duplication and poor cohesion between classes. 

When using DI, services will be able to create instances of other components without having access to their constructors directly; this reduces coupling between components as well as makes it easier for developers/testers who may not know all aspects of how they work internally.

Other Enhancements in Angular 15 Features

The Angular team has done a great job at adding new Angular 15 Features to the framework. In this post, we will look at some of the new Angular 15 Features that were added in version 15 of AngularJS.

• Automatic Imports In-Language Support Service:

This feature allows you to automatically import modules from other modules by using import{auto} syntax in your code. This helps when working with multiple languages since it makes sure that all the necessary dependencies are available for use without having to specify them manually every time you want something from another module or library (e.g., lodash). 

• Standalone components are stable:

The standalone components API enables the creation of Angular applications without the need for NgModules.

• Stack traces are more helpful:

Angular v15 offers cleaner stack traces that make debugging Angular applications easier. In collaboration with Google Chrome, Angular presents stack traces that highlight your application’s code rather than libraries.

• MDC-based components are stable:

We have refactored many Angular Material v15 components to use the Angular Material Design Components (MDC) for the Web instead. Refactored components are more accessible and comply with Material Design.

So what are you still thinking?

If you’re using Angular to build an application, it’s important to make sure that your app is compatible with the latest Angular version 15.

To check if your app is compatible with the latest version of Angular, go to the command line and type: ngc -version. 

If that command returns no output, then your project is not compatible with Angular version 15 or later versions.

Conclusion

The new version of Angular has been released and it’s time to upgrade your existing projects. In this article, we’ve covered the Angular 15 Features that make it worth upgrading.

There are many good reasons to use Angular as your framework of choice. The most important is that it’s a fast, easy-to-learn web and mobile application framework. If you want to build a mobile app or create a SPA in a short amount of time, then Angular could be the solution for you.

This is just the beginning of Angular.

 We’re excited to see what the future holds for this framework, and we hope you are too.

Nandan Goda

My name is Nandan, the Owner at Gtech Web Infotech Pvt. Ltd.. I’m also a designer and developer. I’ve been working in the web development field for last 12+ years. Developing and implementing small to large-scale projects and everything in between. Currently working on a lot of CMS, dev-tooling projects. Furthermore focusing on combining Artificial Intelligence and Machine Learning with emerging technologies.