{"id":1384,"date":"2022-11-28T14:08:07","date_gmt":"2022-11-28T08:38:07","guid":{"rendered":"https:\/\/blogs.infosys.com\/digital-experience\/?p=1384"},"modified":"2022-11-28T14:08:07","modified_gmt":"2022-11-28T08:38:07","slug":"angular-15-new-features","status":"publish","type":"post","link":"https:\/\/blogs.infosys.com\/digital-experience\/web-ui-ux\/angular-15-new-features.html","title":{"rendered":"Angular 15 New features"},"content":{"rendered":"<p><span style=\"color: #000000\"><strong>Summary<\/strong><\/span><\/p>\n<p>Angular 15 is released recently. The changes in new version include \u2013<\/p>\n<ul>\n<li>Stabilizing the API which were included as developer preview in Angular V14<\/li>\n<li>Reduce boiler plate code<\/li>\n<li>Improvement in Angular CLI<\/li>\n<\/ul>\n<p>Above changes result in better developer experience and performance. The document mentions the Angular framework feature changes release as part of Angular Version 15.<\/p>\n<h3><span style=\"color: #000000\"><strong>New Features<\/strong><\/span><\/h3>\n<h4><span style=\"color: #666699\">Stable Standalone API<\/span><\/h4>\n<p>Standalone APIs which were introduced in Angular V14 and were in developer preview are stable with release on Angular V15. Standalone APIs enables developer to write angular application without ngmodule resulting &#8211;<\/p>\n<ul>\n<li>Boot strap an application using single component.<\/li>\n<li>Less boiler plate code to be written by developer.<\/li>\n<li>Relatively easier learning curve.<\/li>\n<\/ul>\n<h4><span style=\"color: #666699\">Directive composition API<\/span><\/h4>\n<p>Directives enables reuse of UI behavior. Directive composition API enables to apply directive to host element from component itself. Prior to Angular v15, to use the behavior provided by a directive, the directive needed to be explicitly applied on the component where behavior is to be attached.<\/p>\n<p>Directive composition APIs simplifies the UI composition using angular directives.<\/p>\n<h4><span style=\"color: #666699\">Router &#8211; Tree-shakable standalone API<\/span><\/h4>\n<p>Routing functionalities are achieved by using <strong>RouterModule<\/strong>. Angular 15 provides stable <strong>provideRouter<\/strong> API.\u00a0 Using provideRouter function, multi-route application could be built. BootstrapApplication takes provideRouter as one of the optional options parameters. ProvideRouter is also tree shakable i.e., unused features are removed at build time.<\/p>\n<p>Tree-shaking impacts the bundle size. Reduced bundle size positively impacts the application size, as relatively smaller file will have to be downloaded in the browser.<\/p>\n<h4><span style=\"color: #666699\">Stable NgOptimizedImage Directive<\/span><\/h4>\n<p>Angular V14 introduced NgOptimizedImage directive under developer preview. \u00a0The directive is made stable with release of Angular V15.<\/p>\n<p>The release has also introduced new features for image directive \u2013<\/p>\n<p><strong>Automatic srcset generation<\/strong> \u2013 The directive auto generates srcset based on value of the size attribute. Srcset ensures image of correct size is requested, reducing the image download time.<\/p>\n<p>The NgOptimizedImage directive supports customization of \u2013<\/p>\n<ul>\n<li>Breakpoints to generate srcset<\/li>\n<li>Disable auto generation of srcset<\/li>\n<li>Provide custom values for srcset to be generated.<\/li>\n<\/ul>\n<p><strong>Fill Mode<\/strong> \u2013 Use the fill mode when height and width of the image is not known. Fill mode causes the image to fill it parent container.<\/p>\n<h3><span style=\"color: #666699\">Functional route guards<\/span><\/h3>\n<p>Using CanActivateFn signature, inline function could be provided for canActivate function. This reduces the boiler plate code.\u00a0Using functional route guard developer can create factory like functions, the function accepts parameters and return guard based on input parameter.<\/p>\n<h4><span style=\"color: #666699\">Router auto unwraps default exports<\/span><\/h4>\n<p>Modules can be exported in two ways in typescript<\/p>\n<ul>\n<li><strong>Using export<\/strong> &#8211; These are named export i.e. objects being exported has a name<\/li>\n<li><strong>Using export default<\/strong> \u2013 When using export default syntax, objects being exported need not to have a name.<\/li>\n<\/ul>\n<p>During lazy loading, If Angular router finds a default export, it uses it automatically. Thus, reducing the boiler plate code.<\/p>\n<p>&nbsp;<\/p>\n<h4><span style=\"color: #666699\">Angular Material 15\u2013 Stable MDC based components<\/span><\/h4>\n<p>Angular material components have been refactored to be based on Material Design Components for web (MDC). While old implementation of new components are deprecated, they can still be accessed from \u201cLegacy\u201d import.<\/p>\n<p>Angular material provides schematic to migrate from existing implementation to new implementation.<\/p>\n<h4><span style=\"color: #666699\">CLI Changes<\/span><\/h4>\n<ul>\n<li>The CLI has included support for standalone stable APIs. The standalone component can be generated using <strong>ng generate component \u2013standalone componentName<\/strong> cli command<\/li>\n<li>The ng new CLI command don\u2019t generate following files\n<ul>\n<li>Environment files \u2013 ng new does not output environment.ts and environment.prod.ts file files. Angular.json does not includes filereplacement configuration as well.In case if you want to use environment files, Files can be created manually. Corresponding file replacement configuration needs to be added in angular.json.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>ts \u2013 Pollyfills.ts is removed. The polyfills option in angular.json accepts array of file names to be imported.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3><strong>Upgrade to Angular 15<\/strong><\/h3>\n<p>Refer to the Angular upgrade guide URL &#8211; https:\/\/update.angular.io\/. It provides a step-by-step guide to migrate existing angular application from lower version to latest version.<\/p>\n<p><strong>Reference URLs \u2013<\/strong><\/p>\n<ul>\n<li>https:\/\/blog.angular.io\/angular-v15-is-now-available-df7be7f2f4c8<\/li>\n<li><a href=\"https:\/\/angular.io\/guide\/directive-composition-api\">https:\/\/angular.io\/guide\/directive-composition-api<\/a><\/li>\n<li><a href=\"https:\/\/angular.io\/guide\/image-directive\">https:\/\/angular.io\/guide\/image-directive<\/a><\/li>\n<li><a href=\"https:\/\/angular.io\/api\/router\/CanActivate\">https:\/\/angular.io\/api\/router\/CanActivate<\/a><\/li>\n<li><a href=\"https:\/\/angular.io\/guide\/update-to-latest-version\">https:\/\/angular.io\/guide\/update-to-latest-version<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Summary Angular 15 is released recently. The changes in new version include \u2013 Stabilizing [&hellip;]<\/p>\n","protected":false},"author":210,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[2],"tags":[],"coauthors":[66],"class_list":["post-1384","post","type-post","status-publish","format-standard","hentry","category-web-ui-ux"],"acf":[],"_links":{"self":[{"href":"https:\/\/blogs.infosys.com\/digital-experience\/wp-json\/wp\/v2\/posts\/1384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.infosys.com\/digital-experience\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.infosys.com\/digital-experience\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.infosys.com\/digital-experience\/wp-json\/wp\/v2\/users\/210"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.infosys.com\/digital-experience\/wp-json\/wp\/v2\/comments?post=1384"}],"version-history":[{"count":18,"href":"https:\/\/blogs.infosys.com\/digital-experience\/wp-json\/wp\/v2\/posts\/1384\/revisions"}],"predecessor-version":[{"id":1424,"href":"https:\/\/blogs.infosys.com\/digital-experience\/wp-json\/wp\/v2\/posts\/1384\/revisions\/1424"}],"wp:attachment":[{"href":"https:\/\/blogs.infosys.com\/digital-experience\/wp-json\/wp\/v2\/media?parent=1384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.infosys.com\/digital-experience\/wp-json\/wp\/v2\/categories?post=1384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.infosys.com\/digital-experience\/wp-json\/wp\/v2\/tags?post=1384"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blogs.infosys.com\/digital-experience\/wp-json\/wp\/v2\/coauthors?post=1384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}