{"id":57575,"date":"2023-06-08T08:34:20","date_gmt":"2023-06-08T03:04:20","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=57575"},"modified":"2023-06-08T08:34:20","modified_gmt":"2023-06-08T03:04:20","slug":"angular-15-everything-you-need-to-know-about-the-new-features","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/angular-15-everything-you-need-to-know-about-the-new-features\/","title":{"rendered":"Angular 15: Everything You Need to Know About the New Features"},"content":{"rendered":"<p>Angular 15 is the latest version of the Angular framework. It was released on March 8, 2023. It includes several new features and improvements. In this blog, we&#8217;ll talk about those updated features.<\/p>\n<ul>\n<li>\n<h3><b>Standalone API&#8217;s<\/b><\/h3>\n<\/li>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Now we can develop applications without NgModules.<\/span><\/li>\n<li style=\"font-weight: 400;\">This component can now be used in any Angular application without having to be part of a module<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-57572\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/06\/standalone.png\" alt=\"\" width=\"768\" height=\"348\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/06\/standalone.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/06\/standalone-300x136.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/06\/standalone-624x283.png 624w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Standalone API allows you to bootstrap applications using single component<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<h3><b>Router and HttpClient Tree shakable API\u2019s<\/b><\/h3>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<h3><b>Directive Composition API<\/b><\/h3>\n<\/li>\n<\/ul>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The directive composition API brings code reuse to another level!<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The directive composition API only works with standalone directives.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<ul>\n<li>\n<h3><b>Image directive is now stable<\/b><\/h3>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>The\u00a0<code><a class=\"code-anchor\" href=\"https:\/\/angular.io\/api\/common\/NgOptimizedImage\">NgOptimizedImage<\/a><\/code> the directive makes it easy to adopt performance best practices for loading images.\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-57573\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/06\/optimized-1.png\" alt=\"\" width=\"638\" height=\"204\" \/><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Enable the directive<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-57574\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/06\/image-opti-2.png\" alt=\"\" width=\"475\" height=\"204\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/06\/image-opti-2.png 475w, \/blog\/wp-ttn-blog\/uploads\/2023\/06\/image-opti-2-300x129.png 300w\" sizes=\"(max-width: 475px) 100vw, 475px\" \/><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Automatic srcset generation:<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Fill mode<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">This mode causes the image to fill its parent container, removing the requirement to declare its width and height.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<h3><b>Functional router guards<\/b><\/h3>\n<\/li>\n<\/ul>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Together with the tree-shakable standalone router APIs, we worked on reducing boilerplate in guards.\n<p><\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-57568\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/06\/carbon-16.png\" alt=\"\" width=\"613\" height=\"276\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/06\/carbon-16.png 613w, \/blog\/wp-ttn-blog\/uploads\/2023\/06\/carbon-16-300x135.png 300w\" sizes=\"(max-width: 613px) 100vw, 613px\" \/><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<ul>\n<li>\n<h3><b>Router unwraps default imports.<\/b><\/h3>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">To make the router simpler and reduce boilerplate further, the router now auto-unwraps default exports when lazy loading.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">This is how it used to be Previously.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-57569\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/06\/lazy.png\" alt=\"\" width=\"744\" height=\"258\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/06\/lazy.png 744w, \/blog\/wp-ttn-blog\/uploads\/2023\/06\/lazy-300x104.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/06\/lazy-624x216.png 624w\" sizes=\"(max-width: 744px) 100vw, 744px\" \/><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">As per the new code:<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-57570\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/06\/carbon-24.png\" alt=\"\" width=\"691\" height=\"340\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/06\/carbon-24.png 524w, \/blog\/wp-ttn-blog\/uploads\/2023\/06\/carbon-24-300x148.png 300w\" sizes=\"(max-width: 691px) 100vw, 691px\" \/><\/p>\n<ul>\n<li><b>Better stack traces\n<p><\/b><span style=\"font-weight: 400;\">\u00a0To solve the Debugging struggles for Angular developers<\/span><\/li>\n<\/ul>\n<h3><\/h3>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>\n<h3><b>More improvements in components<\/b><\/h3>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Range selection support in the slider.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-57571\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/06\/carbon-26.png\" alt=\"\" width=\"565\" height=\"258\" \/><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Improvements in the experimental esbuild support.<\/span><\/li>\n<li style=\"font-weight: 400;\">The improved experimental ESbuild support makes building Angular applications faster and more efficiently possible.<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Automatic imports in language service.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">CLI improvements.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Conclusion<\/h3>\n<p>Angular 15 is a major release with several new features and improvements. The new features are designed to make Angular easier to use, more performant, and more scalable. If you are using Angular, I recommend upgrading to Angular latest as soon as possible.<\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>Angular 15 is the latest version of the Angular framework. It was released on March 8, 2023. It includes several new features and improvements. In this blog, we&#8217;ll talk about those updated features. Standalone API&#8217;s Now we can develop applications without NgModules. This component can now be used in any Angular application without having to [&hellip;]<\/p>\n","protected":false},"author":1595,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":5},"categories":[1439],"tags":[5251,5252,955],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57575"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1595"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=57575"}],"version-history":[{"count":2,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57575\/revisions"}],"predecessor-version":[{"id":57617,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57575\/revisions\/57617"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=57575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=57575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=57575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}