Authors: Mark Thompson, Kristiyan Kostadinov We’re extending Angular’s built-in template syntax to provide developers with a better way to define variables inside component templates. The new @let syntax will enable developers to define a variable and reuse its value throughout the template. This new syntax also solves one the community’s most upvoted issues. Continue reading to find out how you can use @let in your templates to improve your developer experience. A new way to define reusable template variables Angular’s template syntax supports complex JavaScript expressions but there ha ..read more

Today we are excited to share the next milestone in the evolution of Angular! Over the past three releases we’ve introduced a lot of new features and improvements. This time we focused on polishing the work we shipped by graduating many of the new APIs to stable, addressing common developer requests, and experimentally releasing one of the most desired roadmap projects: zoneless change detection. The highlights of this release include: Experimental support for zoneless change detection Angular.dev is now the new home for Angular developers Material 3, deferrable views, built-in control ..read more

Authors: Jatin Ramanathan, Tom Wilkinson Photo of a telephone switchboard by Joe Mabel, CC BY-SA 4.0, via Wikimedia Commons Rather than focusing on developer-facing APIs, in this blog post we’ll cover under-the-hood details of the new event delegation system of Angular. In the long-term it’ll enable features such as fine-grained hydration and improve runtime performance by reducing the number of event listeners in your apps. This initiative is inspired by the convergence of Angular and Wiz and sets the foundation for the resumability that Wiz offers. Background Our most recent update ..read more

Authors: Jatin Ramanathan, Minko Gechev You may know Angular as the web framework from Google, but Google actually has another web framework: Wiz. Both Angular and Wiz are used by thousands of engineers and thousands of apps inside of Google. Wiz is an internal framework that is used by some of the most popular Google products such as Search, Photos, Payments and many others. Over the last year we’ve been exploring ways for Angular to benefit from the performance of Wiz and Wiz to benefit from the developer experience of Angular. Historically, Angular and Wiz have been serving differ ..read more

Angular v17.3 introduces the improved API for declaring outputs as a developer preview. The new output API provides developers with: a simpler and safer API for declaring outputs in directives. a consistent API aligned with the new signal inputs, queries or model functions. more correct types for emitting values. The existing @Output API with EventEmitter does not guarantee proper type safety and could cause subtle runtime errors to surface. The new output API is now available in developer preview and we would like your feedback. The new API Outputs allow component authors to emit ..read more

Lighting consoles are electronic devices used in theatrical lighting design to control multiple stage lights at once. Traditionally, lighting consoles are standalone physical devices. The nstudio team wanted to bring the power and versatility of the lighting console to mobile devices. This is the story of how we used Angular and NativeScript to bring that vision to reality. We developed Blackout, an iPad app that provides the same features as standalone lighting consoles on a table. The app supports a versatile DMX (Digital Multiplex) control platform, compatible with industry-standard sA ..read more

We rarely write blog posts about minor releases, but today we have a few surprises for you — experimental support for Material 3, signal queries, model inputs, Netlify loader, and hydration debugging support in Angular DevTools. In the next few paragraphs you’ll learn more about the individual features and find links to documentation. Experimental Material 3 Over the past months we’ve been working hard to transition the Angular ecosystem to the latest version of Material Design for the Web. In the process we worked with the Material Design team at Google to understand what M3 means for th ..read more

We’re thrilled to announce that Angular 17.2 features experimental support for Material 3 theming in Angular Material. In this blog post we’re updating you on the latest news about this feature and providing a preview of what’s next for Material 3 support. What is Material 3 Material 3 is the latest evolution of Material Design, Google’s open-source design system. Material 3 for Angular is implemented as an alternate theme, compatible with the same Angular Material components and Sass mixins you use today. Material 3 themes are based on design tokens (implemented as CSS custom ..read more

Over the past year we’ve been evolving Angular based on developer feedback and community trends. We receive developer feedback from dozens of sources including GitHub, social media, interviews, conferences, etc. One of the strongest guiding indicators which has been highly influential in our prioritization process are the results from the Angular developer survey. In 2023 we delivered a lot to address developers needs for higher performance and better developer experience. Just to mention a few improvements: to make Angular more enjoyable to use, we shipped a brand new build pipeline that impr ..read more

Nikolay Vitkov from the Puppeteer Team co-authored this blog post. Puppeteer, a powerful tool for automating browser interactions, is now even easier to integrate with your Angular projects thanks to the newly released @puppeteer/ng-schematics package. This package provides an out-of-the-box experience for setting up and running Puppeteer tests, minimizing the configuration burden and accelerating your automation journey — especially creating end-to-end tests! Quick setup for new project For new projects, integrating Puppeteer is a breeze. Run ng e2e and choose the Puppeteer option ..read more