{"id":18228,"date":"2021-05-15T05:35:02","date_gmt":"2021-05-15T05:35:02","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=18228"},"modified":"2025-03-12T06:58:12","modified_gmt":"2025-03-12T06:58:12","slug":"new-features-in-angular-12","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/new-features-in-angular-12","title":{"rendered":"What\u2019s New in Angular 12?[Highlights Of Angular 12 Features]"},"content":{"rendered":"<style>\nul.index-list {\n    text-align: left;\n    list-style-type: square;\n}\np{\n   width:100%;\n}\n.post-content p img {\n    margin-bottom: 0 !important;\n}\n.text-orange,.text-orange> strong{\ncolor: #ec6100 !important;\nfont-weight: 700;\n}\n.border-box{\npadding: 12px;\nborder: 1px solid #000;\nmargin-bottom: 16px;\n}\n.border-div{border: 1px solid #000; padding: 22px; text-align: center; margin-bottom: 32px;}\n\t\t.border-bottom{\n\t\t\tborder-bottom: 1px solid #000;\n\t\t\ttext-align: center;\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t.border-div p{text-align: left;}\n\t\t.cust-list{padding: 0; text-align: left;}\n\t\t.cust-list li{padding-left: 32px; list-style: none}\npre {\n    background: #f7e9dd;\n    border: none;\n    font-size: 16px;\n}\n.cross-platform{\n    background: #f7e9dd;\n    border: none;\n    font-size: 16px;\n    text-align:center;\n    padding:40px;\n}\n.cross-platform a{\n   font-size:20px;\n   font-weight:bold !imporatnt;\n   margin-top:10px;\n}\n<\/style>\n<p><em><strong>Quick Summary:<\/strong> Welcome the new Angular 12 and find out the sprouted features that will only make your front-end app development experience better. As promised, Google presents a new major version release every 6 months and the awaited Angular v12 is now available. <\/em><\/p>\n<p><em>Find out <b>Angular 12 features<\/b>, what will be discontinued, and why and how to upgrade to latest Angular 12 version.<\/em><\/p>\n<div class=\"border-div\">\n<h2 class=\"border-bottom\">Table of Content<\/h2>\n<p><a href=\"#1\">\u25a3 <strong>What&#8217;s new in Angular 12<\/strong><\/a><\/p>\n<p><a href=\"#2\">\u25a3 <strong>Top Angular 12 Features<\/strong><\/a><\/p>\n<ul class=\"bullets text-left\">\n<li>Ivy- a step closer<\/li>\n<li>Switch from i18n<\/li>\n<li>Coming up for Protractor<\/li>\n<li>Nullish Coalescing<\/li>\n<li>Angular Learning<\/li>\n<li>Style Improvements<\/li>\n<li>Bid Adieu IE11<\/li>\n<li>Some more of new Angular 12 features<\/li>\n<\/ul>\n<p><a href=\"#3\">\u25a3 <strong>What will discontinue in Angular 12?<\/strong><\/a><\/p>\n<p><a href=\"#4\">\u25a3 <strong>Conclusion<\/strong><\/a><\/p>\n<p><a href=\"#5\">\u25a3 <strong>FAQs<\/strong><\/div>\n<p><\/a><\/p>\n<h2 id=\"1\">What&#8217;s new in Angular 12<\/h2>\n<p>Angular 12 overview along with Angular 12 release date, features and update.<\/p>\n<p>Google released the popular <a href=\"https:\/\/angular.io\/\" target=\"_blank\" rel=\"noopener\">Angular web framework<\/a> in September 2016 under the MIT License. Angular is a typescript-based open-source web app framework and is a part of the popular <a href=\"https:\/\/www.bacancytechnology.com\/blog\/why-choose-mean-stack-for-next-web-development-project\" target=\"_blank\" rel=\"noopener\">MEAN stack<\/a>.<\/p>\n<p>The Angular community comes up with a major release every six months and on 12th May 2021, we are here with the gift of the Angular version 12 update. The long-term support LTS for Angular 11 will end within a year. And until then it will be active for critical fixes and security patches.<\/p>\n<p>In this post, we will discuss what\u2019s included in version 12 of Angular unveiling the new features of Angular 12 performance and changes that the Angular team has brought along.<\/p>\n<p>Over some time in the past few releases, we have been hearing of the Ivy all around in the Angular space. Now, is when we can see moving towards the goal. All the new updates in Angular 12 are little efforts to enable the transition of going \u201cIvy Everywhere\u201d.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Image-2-1.jpg\" alt=\"New Angular 12 Features \" width=\"1100\" height=\"600\" class=\"aligncenter size-full wp-image-18233\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Image-2-1.jpg 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Image-2-1-300x164.jpg 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Image-2-1-1024x559.jpg 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Image-2-1-768x419.jpg 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<h2 id=\"2\">Top Angular 12 Features<\/h2>\n<p>Here is the list of top Angular 12 new features that you need to know to upgrade your App to Angular 12.<\/p>\n<h3>\u2605 Ivy- a step closer<\/h3>\n<p>The big announcement of deprecating the View Engine is out, and hence, none of the future major releases will have it. If your existing libraries are using View Engines, do not worry, because your libraries will work fine with Ivy applications as well. <\/p>\n<p>Angular developers have nothing to fret about here, but yes the <a href=\"https:\/\/www.bacancytechnology.com\/blog\/how-to-create-own-library-with-angular-cli\" target=\"_blank\" rel=\"noopener\">Angular library<\/a> authors need to start working upon the Ivy transition and the Angular community\u2019s post will help them. <\/p>\n<h3>\u2605 Switch from i18n<\/h3>\n<p>We no more need to be cautious about using the legacy message ID formats like whitespaces, ICU expressions, and format templates. Angular 12 has brought a more resilient and intuitive ID format that will minimize the invalidation and retranslation cost. <\/p>\n<p>Though all the new projects since Angular v11 were auto-configured to the new message ID. Now, with Angular 12 we\u2019ve got the essential tools to migrate the translations. <\/p>\n<h3>\u2605 Coming up for Protractor<\/h3>\n<p>Remember Protractor? Though the core purpose of the <a href=\"https:\/\/github.com\/angular\/protractor\/issues\/5502\" target=\"_blank\" rel=\"noopener\">state of the protractor<\/a> was to manage the flow of the asynchronous operation without using promises, later it was proved that the protractor doesn\u2019t help in upgradation. Hence, it is kept limited to use in Angular JS and avoided in Angular. <\/p>\n<p>The progress on the protractor feedback is still ongoing and henceforth, the Angular community has decided to restrict usage of protractor in new projects and rather using 3rd party solutions in Angular CLI. <\/p>\n<p>Some of the alternative solutions are tried with Cypress, WebDriverIO, and Test Cafe. <\/p>\n<h3>\u2605 Nullish Coalescing<\/h3>\n<p>Typescript developers out there might have already been excited about this particular Angular 12 feature. The fantastic nullish coalescing operator (??) that enables you to write cleaner code, is now acceptable in Angular 12 templates. So, instead of this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Code1.jpg\" alt=\"Nullish Coalescing\" width=\"1100\" height=\"162\" class=\"aligncenter size-full wp-image-18234\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Code1.jpg 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Code1-300x44.jpg 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Code1-1024x151.jpg 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Code1-768x113.jpg 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p>You gotta write just this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Code2.jpg\" alt=\"Nullish coalescing\" width=\"1100\" height=\"162\" class=\"aligncenter size-full wp-image-18235\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Code2.jpg 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Code2-300x44.jpg 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Code2-1024x151.jpg 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Code2-768x113.jpg 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p>How cool is that? <\/p>\n<h3>\u2605 Angular Learning<\/h3>\n<p>Google always strives to improve the developers\u2019 learning experience, and because of the same reason, you will find some change in the Angular 12 documentation with an edition of the <a href=\"https:\/\/angular.io\/guide\/content-projection\" target=\"_blank\" rel=\"noopener\">content projection guide<\/a>. <\/p>\n<p>Also, there\u2019s a <a href=\"https:\/\/angular.io\/guide\/contributors-guide-overview\" target=\"_blank\" rel=\"noopener\">contributor\u2019s guide<\/a> that helps the developers improve their project documentation. More to this, ever since the <a href=\"https:\/\/www.bacancytechnology.com\/blog\/new-features-in-angular-11\" target=\"_blank\" rel=\"noopener\">Angular 11 release<\/a>, the community shares useful ways to <a href=\"https:\/\/blog.angular.io\/angular-debugging-guides-dfe0ef915036\" target=\"_blank\" rel=\"noopener\" class=\"broken_link\">debug guides and videos<\/a>. <\/p>\n<h3>\u2605 Style Improvements<\/h3>\n<p>The best part of Angular 12 features is this amazing thing- they\u2019ve added support for inline SaaS in styling fields and component decorators. Earlier, developers could only avail SaaS from external mediums because of the restriction of the Angular compiler.<\/p>\n<p>You can add the support by using the SCSS or you should add the following command: &#8220;inlineStyleLanguage&#8221;: &#8220;scss\u201d in your json file.<\/p>\n<p>Talking about the <a href=\"https:\/\/www.npmjs.com\/package\/tailwindcss\" target=\"_blank\" rel=\"noopener\" class=\"broken_link\">Tailwind CSS<\/a>, Angular v11.2 had already enabled the support for styling. Another noteworthy update is that Angular Material and Angular CDK have adopted the new SaaS module, for which you\u2019ll have to download <a href=\"https:\/\/www.npmjs.com\/package\/sass\" target=\"_blank\" rel=\"noopener\" class=\"broken_link\">saas npm package<\/a> and switch from node-saas.<\/p>\n<p>The new SaaS API comes with the @use syntax, which makes it more useful and has meaningful naming conventions. As you update your web app to Angular 12 features, you will be automatically switched to the new SaaS API. <\/p>\n<h3>\u2605 Bid Adieu IE11<\/h3>\n<p>It is rightly said \u201cNothing lasts forever\u201d and now is the time we bid farewell to Internet Explorer 11. You will find the deprecation message in the Angular 12 update for Internet Explorer 11 IE11. Until Angular v11, it was supported, but not continued.<\/p>\n<p><em>The not-so-good news for IE lovers- your favorite browser IE11 will not be supported by the new version of Angular &#8211; v12. <\/em><\/p>\n<h3>\u2605 Some more of new Angular 12 features<\/h3>\n<p>Here are additional features that when your Angular 12 download is done:<\/p>\n<ul class=\"bullets text-left\">\n<li>Prevention of accidental development builds with executing <em><b>ng build<\/b><\/em><\/li>\n<li>CLI strict mode-by default<\/li>\n<li>Mandate implication of the Ivy-based language support <\/li>\n<li>Experimental support- Webpack 5<\/li>\n<li>Support for typescript v 4.2<\/li>\n<\/ul>\n<h2 id=\"3\">What will discontinue in Angular 12?<\/h2>\n<p>With every new invention, we have to let go of the old-school techniques, only for the betterments. In the same manner, the removal of legacy software- Internet Explorer focuses more on adapting to modern and new solutions for the developers as well as the users. <\/p>\n<p>Soon a deprecation message will be enabled once you update to Angular v12 mentioning the removed support for IE11 in effect from Angular v13.<\/p>\n<h2 id=\"4\">Conclusion<\/h2>\n<p>I\u2019d be immensely thankful to the Angular community for constantly improving our  Angular tutorial experience by their contributions and support. If you want to go for <a href=\"https:\/\/www.bacancytechnology.com\/angular-upgrade-service\" target=\"_blank\" rel=\"noopener\">Angular upgrade service<\/a>, then Bacancy Technology is a safe place to reach out. Our best <a href=\"https:\/\/www.bacancytechnology.com\/angular-js-development\" target=\"_blank\" rel=\"noopener\">Angular developers<\/a> can visualize your dream and make it a reality by executing an Agile methodology.<\/p>\n<p>Do let me know which Angular 12 feature has made your heart pound!<\/p>\n<style>\n.faqs-tran-black-border li{ list-style:none;}\n<\/style>\n<section class=\"bg--white faqs-tran-black-border\" style=\"padding-top: 60px;\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-sm-12\">\n<h2 id=\"5\">FAQs<\/h2>\n<ul class=\"accordion accordion--oneopen\">\n<li class=\"active\">\n<div class=\"accordion__title\"> <span class=\"h5\">How can I update to the latest Angular 12 version?<\/span> <\/div>\n<div class=\"accordion__content\">\n<p>To update to the latest version of Angular, you should run the following command: ng update @angular\/cli @angular\/core.<\/p>\n<\/p><\/div>\n<\/li>\n<li>\n<div class=\"accordion__title\"> <span class=\"h5\">Is it worth migrating to Angular 12?<\/span> <\/div>\n<div class=\"accordion__content\">\n<p>Indeed, you cannot stay back with the older version. Support for Angular v11 will end in a year. Also, there are some amazing benefits of moving to Angular 12 features, read the blog to learn more.<\/p>\n<\/p><\/div>\n<\/li>\n<li>\n<div class=\"accordion__title\"> <span class=\"h5\">Which companies use Angular?<\/span> <\/div>\n<div class=\"accordion__content\">\n<p>The big giants like Microsoft Office, Gmail, PayPal, Upwork, Forber, and many more use Angular&#8217;s latest version.<\/p>\n<\/p><\/div>\n<\/li>\n<li>\n<div class=\"accordion__title\"> <span class=\"h5\">What is the difference between Angular 11 and 12?<\/span> <\/div>\n<div class=\"accordion__content\">\n<p>The evident differences between the <a href=\"https:\/\/www.bacancytechnology.com\/blog\/new-features-in-angular-11\" target=\"_blank\" rel=\"noopener\">Angular 11 features<\/a> and Angular 12 features are style improvements, Nullish Coalescing, strict CLI mode, typescript support, and more.<\/p>\n<\/p><\/div>\n<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Quick Summary: Welcome the new Angular 12 and find out the sprouted features that will only make your front-end app development experience better. As promised, Google presents a new major version release every 6 months and the awaited Angular v12 is now available. Find out Angular 12 features, what will be discontinued, and why and [&hellip;]<\/p>\n","protected":false},"author":34,"featured_media":18230,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"no","footnotes":""},"categories":[989],"tags":[],"coauthors":[1568],"class_list":["post-18228","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs"],"acf":[],"modified_by":"Binal Prajapati","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/18228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=18228"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/18228\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/18230"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=18228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=18228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=18228"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=18228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}