{"id":2328,"date":"2025-07-11T15:08:56","date_gmt":"2025-07-11T22:08:56","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2328"},"modified":"2025-07-11T15:09:03","modified_gmt":"2025-07-11T22:09:03","slug":"whats-new-in-angular-20-1","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/whats-new-in-angular-20-1\/","title":{"rendered":"What&#8217;s new in Angular 20.1?"},"content":{"rendered":"\n<p>Angular 20.1 was just released by the Angular team, with a lot of good tools for improved developer experience:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Developer Tools<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Signal Dependency Graphs:<\/strong> The Angular devtools extension includes an experimental feature to visualize the dependencies between signals in a graph. You can also inspect a signal and jump directly to its definition in the code. Signals also &#8220;blink&#8221; in the graph when their value changes.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Testing<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Simplified Component Testing:<\/strong> New binding helpers (<code>inputBinding()<\/code>, <code>outputBinding()<\/code>, <code>twoWayBinding()<\/code>) allow you to set a component&#8217;s bindings directly during testing, without doing manual assignments or using wrapper components.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Performance<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Optimized Template Compilation:<\/strong> The Angular compiler now uses more efficient, DOM-only instructions for elements that don&#8217;t have any directives applied, leading to better runtime performance.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Templates<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Assignment Operators:<\/strong> You can now use assignment operators like <code>+=<\/code>, <code>-=<\/code>, and <code>*=<\/code> directly in your component templates.<\/li>\n\n\n\n<li><strong><code>NgOptimizedImage<\/code> Decoding:<\/strong> The <code>NgOptimizedImage<\/code> directive now includes a <code>decoding<\/code> option, which can be set to <code>async<\/code> to avoid blocking the main JS thread.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>HTTP Client<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>New <code>HttpClient<\/code> Options:<\/strong> A variety of new options have been added to <code>HttpClient<\/code>, including <code>timeout<\/code>, <code>cache<\/code>, <code>priority<\/code>, and <code>credentials<\/code>, giving you more control over HTTP requests and helping to improve Core Web Vitals.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>AI and Angular CLI<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>AI-Assisted Development:<\/strong> Angular is integrating with AI development tools through the new <code>ng mcp<\/code> command, which starts a Model Control Protocol (MCP) server. This allows AI tools to better understand your Angular workspace for more accurate suggestions.<\/li>\n\n\n\n<li><strong>New Asset Loaders:<\/strong> The CLI now supports <code>dataurl<\/code> and <code>base64<\/code> loaders, allowing you to inline small assets directly into your application&#8217;s code.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Angular 20.1 was just released by the Angular team, with a lot of good tools for improved developer experience: Developer Tools Testing Performance Templates HTTP Client AI and Angular CLI<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-2328","post","type-post","status-publish","format-standard","hentry","category-angular"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=2328"}],"version-history":[{"count":1,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2328\/revisions"}],"predecessor-version":[{"id":2329,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2328\/revisions\/2329"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}