Once you have the primitives, the next step is collections and named values. Arrays hold many values of the same type. Tuples hold a fixed number of values of different types, position by position. Enums give names to a set of related constants. These three types appear constantly — arrays in every list, tuples in…
TypeScript’s type system starts with a small set of primitive types: string, number, boolean, null, and undefined. These are the atoms — every more complex type is built by combining them. They map directly to JavaScript’s runtime primitives, but TypeScript gives them a compile-time identity that the runtime doesn’t have. Understanding them properly is not…
The TypeScript CLI (tsc) is the program that reads your .ts files, type-checks them, and emits .js. But tsc on its own does almost nothing useful — it needs configuration. That configuration lives in tsconfig.json, a single file at the project root that tells the compiler which files to include, what JavaScript version to target,…
Before writing any TypeScript, you need a working environment — Node.js, npm, the TypeScript compiler, and a code editor that understands the language. This is a one-time investment, but it’s the foundation everything else builds on. Get it right and every subsequent step is smooth; get it wrong and you’ll spend hours chasing phantom errors…
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Every valid JavaScript program is already a valid TypeScript program — TypeScript just adds a layer of static types on top, checks them at build time, and strips them away before the code ever runs in a browser or Node. It was created…
An attribute directive changes the appearance or behavior of an existing element without changing its structure. Where a structural directive decides whether an element exists, an attribute directive says how it looks or behaves while it exists. You’ve already used attribute directives — [class.active] and [style.color] are built-in attribute bindings. Angular also ships a few…
Angular 17 introduced a block syntax for control flow — @if, @for, @switch, and @let — that replaces the old *ngIf, *ngFor, and *ngSwitch directives. The new syntax is built into the template language itself, so it doesn’t need CommonModule imports, it’s faster at runtime, and it reads more like code. Everything the structural directives…
Structural directives change the shape of the DOM — they add, remove, or replace elements based on data. The three built-in ones are *ngIf (conditionally include), *ngFor (repeat for each item), and *ngSwitch (pick one of several branches). They’re called “structural” because they don’t just style an element — they decide whether it exists at…
Interpolation renders text. Bindings do everything else — they push values into the DOM, listen for events coming out of it, and (in the two-way case) keep a value and a form control in sync both ways. Angular has three binding directions: property binding ([prop]=”expr”) sends data from the class into the template, event binding…
A template is the HTML that a component renders. It looks like regular HTML, but Angular extends it with its own syntax — double curly braces, square brackets, parentheses, and asterisks — that connects the markup to the component’s data and behavior. Interpolation is the simplest of those extensions: it renders a component property as…