Angular @if and @for Patterns and ngIf/ngFor Pitfalls
Modern Angular uses built-in @if and @for; legacy *ngIf and *ngFor remain important for maintenance but are deprecated from Angular 20.
GUIDES
Modern Angular uses built-in @if and @for; legacy *ngIf and *ngFor remain important for maintenance but are deprecated from Angular 20.
A full framework, not a library — the distinction that actually shapes how building an Angular app differs from a lighter tool like React or Vue, beyond just syntax.
One line in Angular's router config switches URLs from /#/products to /products — the part that actually takes real work is configuring the web server to make those clean URLs work on refresh.
Every component in Angular is technically a directive too — understanding the three-way split (component, structural, attribute) clarifies why *ngIf, [ngClass], and a custom component all count as the same underlying concept.
*ngFor only iterates arrays and other iterables natively — looping over a plain object's keys and values needs either the built-in KeyValue pipe or converting the object first.
A pipe transforms a value for display, right in the template, without touching the underlying data — the built-in set covers formatting basics, and a custom pipe extends the same pattern to anything else.
The multiple attribute on a file input is the easy part — looping through the resulting FileList and appending each file to FormData under a repeated key is what a backend actually needs to receive them all.
Two genuinely different approaches exist — rendering the DOM to an image-based PDF entirely in the browser, or asking a server to generate a real, selectable-text PDF — and they aren't interchangeable.
A component becomes genuinely reusable through its public API — @Input/@Output for data, and content projection (ng-content) for letting the parent supply arbitrary markup, not just values.
A service is where shared logic and state belong instead of a component — Angular's dependency injection handles creating and sharing a single instance across every place that needs it.
A service marked providedIn: 'root' is Angular's real equivalent of a global variable — a genuine singleton shared across the whole app, unlike a plain module-level constant, which every importer gets its own independent copy of.
navigator.userAgent is plain browser JavaScript, not an Angular API — genuinely useful for a quick check, but it's a notoriously unreliable string to parse for anything beyond the broadest categories.