{"slug": "angular-22-1-what-s-new", "title": "Angular 22.1: what's new", "summary": "Angular 22.1 has been released with refinements to signals, hydration, and control flow. Developers can now use viewChild and contentChild with more relaxed type inference, including inside computed signals, eliminating boilerplate ngAfterViewInit checks. Hydration mismatch errors now point to the specific DOM node, and @for blocks with track catch more identity-change issues. The update also delivers smaller bundles through better tree-shaking of unused signal utilities.", "body_md": "Angular 22.1 shipped a handful of changes worth knowing about if you're on a recent version. Here's what's in it, with code.\n\nYou can now use `viewChild`\n\nand `contentChild`\n\nwith more relaxed type inference in more places, including inside computed signals.\n\n```\nexport class MyComponent {\n  header = viewChild<HeaderComponent>('header');\n\n  headerText = computed(() => this.header()?.text() ?? '');\n}\n```\n\nNo boilerplate `ngAfterViewInit`\n\nchecks needed to read the value safely.\n\nIf you're using SSR, error messages for hydration mismatches now point more precisely at the DOM node that caused the mismatch, instead of just naming the component.\n\n```\nbootstrapApplication(AppComponent, {\n  providers: [provideClientHydration()],\n});\n```\n\nThe console output during dev now includes the actual vs expected node, which cuts down on guesswork when a mismatch happens deep in a template.\n\n`@for`\n\nblocks with `track`\n\nnow catch a few more cases where the tracking expression references something that changes identity unexpectedly, and warn about it in dev mode.\n\n```\n@for (item of items(); track item.id) {\n  <app-item [data]=\"item\" />\n}\n```\n\nIf `item.id`\n\nisn't stable, you'll see a warning in the console rather than silent re-renders.\n\nBuilds using the application builder produce slightly smaller bundles due to better tree-shaking of unused signal utilities. No config changes required to get this — it's automatic on upgrade.\n\nThat's the bulk of it in 22.1. Nothing dramatic, mostly refinements to signals, hydration, and control flow.", "url": "https://wpnews.pro/news/angular-22-1-what-s-new", "canonical_source": "https://dev.to/tomwebwalker/angular-221-whats-new-2d4", "published_at": "2026-08-05 17:49:33+00:00", "updated_at": "2026-08-05 17:57:04.564179+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["Angular"], "alternates": {"html": "https://wpnews.pro/news/angular-22-1-what-s-new", "markdown": "https://wpnews.pro/news/angular-22-1-what-s-new.md", "text": "https://wpnews.pro/news/angular-22-1-what-s-new.txt", "jsonld": "https://wpnews.pro/news/angular-22-1-what-s-new.jsonld"}}