Angular 15 Updates: What's new?
Tags: angular, webdev, programming, frontend
Published: 2022-12-02 16:27:29

Just recently, Angular came out with the version 15, and this version has some amazing things built in.

If you wish to check the video format of this post, [click here](https://youtu.be/cuOjjjfyoUY).

I would advise to watch the video, as it is more detailed.

## Standalone Components
In the **Angular 14**, we got one cool feature called Standalone Components. This feature was not related only to the _components_, but to the _directives_, and _pipes_.

In the **Angular 15**, and now improved API, Standalone Components are stable.

This means that we can develop full applications with those, and not use _NgModules_, if we don't want to.

Because this is the case, **Angular** has added additional ways to use their modules, like _HTTP_, or _Routing_ module.

![HTTP Module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13eroywarx49rk6rqkle.png)

![Routing Module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wnj8jhuuygpupuqs81c.png)

## Directive Composition API
The **Directive Composition API** is a new feature added into the Angular framework.

With this, from now on we can add host directive property to our components, and pass directives into it, instead into our _HTML_ code.

This will keep things more smooth, and private, but still keep the same, if not enhanced functionality.

![Host Directives](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ec27rdy59ei3oh0hfrod.png)

## Image Directive
Another stable feature that will work with **Standalone Components** and **NgModules**.

To use it, simply replace _src_ attribute to _ngSrc_ on your images.

![Image Directive](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1p8dfyn3p9ouvg1gyis.png)

This will add default lazy loading, it will optimize your images, and improve load times.

Another cool thing that came with this **Image Directive** is **Fill Mode**. From now on, we don't need to use explicit _width_ and _height_ on the images, we can simply use **Fill Mode**.

![Fill Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wli8y8gd135eo8ifd3cz.png)

## Additional Updates
There were additional updates as well, and here are some of those:
- Additional ESBUILD Support
- New Features in Development
- SVG Templates (IN DEVELOPMENT)
- File Replacement Support (IN DEVELOPMENT)
- Additional Quick Fixes
- Generate Standalone Components
- More Minor Updates

## Debugging Improvements
There are some improvements in the debugging department as well. So from now on, we should get much better error messages.

![Error Message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1le8xyi3tgwdu5pgs56d.png)

## Angular Material Updates
Additional updates were made to Angular Material as well... Here are those:
- MDC
- Accessibility Improvements
- Identical API Paths
- Guide to Update to Angular Material 15
- Update Module by Module
- Range Selector Support
- Customizing Density
- CDK Listbox
- And More

## Conclusion
With all these updates that Angular has, it is worth updating our apps to it.

Once again, to watch the video format of this post, which has more details, [click here](https://youtu.be/cuOjjjfyoUY).