Angular DEV (@angular)

Meet resource and httpResource — reactive, Signal-based ways to handle async data in Angular v20. Auto-fetch on signal change. Built-in aborts. Clean, reactive, and powerful. Try it now! 🚀

      const userResource = resource({
  params: () => ({ id: userId() }),
  loader: ({ request, abortSignal }) =>
    fetch(`users/${request.id}`, { signal: abortSignal }),
});

Angular v20: Better error handling!
🛡️ provideBrowserGlobalErrorListeners catches global errors
🐞 Event listener errors now reported to Angular’s handler
🔍 Tests may fail for silent errors—fix them or use rethrowApplicationErrors: false as fallback!

Published 8 days ago Valuable

For the professional developer in 2025, mastery of JavaScript is no longer sufficient. One must also master the meta-language of the prompt, becoming not just a writer of code, but an architect of intelligence. The prompt "Act as a Senior JavaScript Developer" has achieved canonical status within the community. Superficially, this appears to be a role-playing request. However, at a mechanistic level, this prompt functions as a powerful contextual filter. #Prompts

Did you know @Input() can auto-transform values with zero boilerplate?

✅ Required inputs
✅ Aliases
✅ Getters/Setters
✅ NEW: Input transforms like booleanAttribute, numberAttribute, or custom transforms!

🔁 Example: Auto-trim whitespace from input:

      @Component({
  selector: 'app-user',
  template: `<p>{{ username }}</p>`,
})
export class UserComponent {
  @Input({ transform: (val: string) => val.trim() })
  username: string;
}

Angular Devtools update: OnPush components marked as OnPush in tree, deferred blocks (defer) shown, and improved Signals support—signal tree coming soon!

Angular’s new enableProfiling() in @angular/core tags framework operations like change detection, templates, and defer using the browser’s Performance API. Record in Chrome Devtools to see a custom “Angular” track and get clear insights into app performanc

Use NgRx when your Angular app grows complex and you need predictable state management, especially with lots of shared or nested data. It shines with large teams, debugging, and time-travel dev tools. Avoid it for small apps.

The NgRx Signal Store is a state management solution for Angular applications that is built on top of Angular’s reactive signals, which were introduced in Angular 16. NgRx Signal Store is designed to be a more efficient and simpler alternative.

      import { signalStore, withState } from '@ngrx/signals';
import { Book } from './book.model';

type BooksState = {
  books: Book[];
  isLoading: boolean;
  filter: { query: string; order: 'asc' | 'desc' };
};

const initialState: BooksState = {
  books: [],
  isLoading: false,
  filter: { query: '', order: 'asc' },
};

export const BooksStore = signalStore(
  withState(initialState)
);

Interview Question 🎯
What does this JavaScript code do?

      const user = { name: "John" };

const proxy = new Proxy(user, {
  get(target, prop) {
    return prop in target ? target[prop] : "Not found";
  }
});

console.log(proxy.name); // ?
console.log(proxy.age);  // ?

Angular v20: createComponent() power-up!
✅ directives
✅ inputBinding()
✅ twoWayBinding()
✅ outputBinding()
❌ No more setInput() hacks!
👀 TestBed next?

🚀 Meet The Angular's New Query System: Simpler, Faster, Better! Use the Angular signal-based template queries.

      // From this
@ViewChild('title') title!: ElementRef;

// To this
title = viewChild<ElementRef>('title');

No signal-based forms yet in Angular 20, but two nice updates:
resetForm(undefined, { emitEvent: false }) resets without firing events, and markAllAsDirty() marks all controls dirty—finally a sibling for markAllAsTouched()!