Understand what TypeScript is and why Angular uses it. TypeScript adds static typing to JavaScript, compiles to JavaScript, and improves error checking, editor support, and code readability for Angular apps.

Set up a TypeScript development environment with VSCode, Node.js, and the TypeScript compiler; verify installations and prepare for Angular CLI compilation.

Explore TypeScript data types and variable declarations, compare var, let, and const, and learn when to use each. Examine block scope, type inference, and unknown and any types.

Store multiple values with TypeScript arrays using number[] or Array<number>. Show push, index access, and length for scenarios like shopping carts and bulk emails, and emphasize type safety.

Learn how to manipulate data with essential array methods in TypeScript, including map, filter, find, reduce, forEach, and sort, with real-world price examples.

Group related user data with object literals, access values via dot notation, and use TypeScript type annotations to enforce a defined shape with required and optional properties and nested objects.

Define type aliases in TypeScript to name and reuse product structures, then build an array of products and apply in stock filtering and price sorting with method chaining.

Discover how TypeScript functions create reusable logic for discounts, with typed parameters, return type, and arrow syntax for concise, testable code.

Learn how array and object destructuring in TypeScript simplifies extracting values, supports skipping elements, rest patterns, renaming variables, defaults, and nesting for cleaner, safer code.

Explore how TypeScript access modifiers control class visibility by making id private and exposing it with a public get id method, while keeping name and price public.

Install Angular CLI globally by ensuring Node.js and npm are present, verify installation with ng version, and update or reinstall as needed to prepare for creating and managing Angular apps.

Explore Angular components as self-contained units with their own logic, HTML template, and styles. See how the app component uses TypeScript, HTML, CSS, decorators, data binding, interpolation, and signals.

Discover how routing enables a multi-page feel in a single-page Angular app by swapping components via the URL, using router outlet and router link.

Configure angular routing by defining routes with path and component, set a redirect to home, and update navigation using router link and router link active directives with a router outlet.

Learn to use expressions in interpolation for simple calculations, conditional text, and method calls in the SIP calculator template, including multiplication, string concatenation, ternary operators, and safe navigation.

Learn how property binding in Angular dynamically controls dom properties, such as disabling a button, binding image sources, and setting tooltips, using square brackets and one-way data flow.

Learn to bind click events in Angular 11, wiring a calculate returns action to a button in a SIP calculator and pass data to handlers while using the event object.

Learn two-way binding with ng model in Angular forms, by importing forms module and using banana in a box syntax to streamline the SIP calculator inputs.

Create a dashboard component in Angular to demonstrate style binding, class bindings, and control flow directives with metrics, status indicators, and an employee list.

Apply the ATF directive to conditionally render dashboard elements with simple and complex conditions, including methods and DOM removal, and learn the Angular 17 control flow syntax for standalone components.

Master ngIf with else in Angular to render alternative content for true and false states, ensuring clear, dynamic feedback for system status and sales targets.

Display real employee data by looping through the employees array with the for directive, rendering cards for each employee and using track by id for efficient updates.

Explore accessing the index and ngFor variables in angular 11, using dollar index and track by for numbering, first/last/even flags, and ranking badges for the top three earners.

Create an angular task manager component by importing common and forms modules, defining a task interface, binding form inputs with NgModel, and applying the provided css for styling.

Build a task manager UI using Angular, with a responsive header and stats cards for total, completed, pending, and overdue tasks, plus a completion rate with dynamic styling.

Develop a complete Angular 20 task manager using interpolation, property binding, event binding, and two-way binding to manage tasks, due dates, and productivity score with dynamic styling.

Explore five common template errors in Angular, from typos and missing forms module to track clause requirements, scope issues, and component imports; learn to read error messages and fix them.

Identify and fix five common TypeScript errors in Angular components—type mismatches, wrong import paths, return type conflicts, runtime errors from undefined values, and missing parentheses when calling methods.

Explore how to debug logical errors in Angular apps using Chrome DevTools. Inspect console logs, set breakpoints in sources, monitor network requests, disable cache, and validate calculations like getCompletionRate.

Learn how services centralize business logic in Angular by using a TypeScript class shared across components to fetch data, share state, and improve testability through dependency injection.

Explore how Angular dependency injection provides a shared logger service instance to components, contrasting manual 'new' instantiation with constructor injection, and highlight the injector’s singleton pattern and benefits.

Learn how three components share a single counter service to read, modify, and display the same data with a status label and color cues.

Discover hierarchical injection by providing CounterService at the counter-section, creating two independent counters on the same page. Understand the injector hierarchy and how component-level providers isolate state.

Learn how Angular registers services with provideIn options, including provideInRoot for app-wide singletons and tree shaking, plus platform and any for advanced scenarios; and how component-level providers override these settings.

Apply dependency injection by introducing a dedicated task service as the single source of truth for all task data, exposing methods to get, add, delete, and toggle task completion.

Refactor the task manager to use TaskService for all task operations, including getTasks, addTask, deleteTask, and toggleTaskComplete, enabling shared data across components.

Centralize statistics calculations in a dedicated statistics service that consumes task data via dependency injection. Refactor the task manager to delegate getCompletedTasksCount, getPendingTasksCount, getOverdueTasksCount, getCompletionRate, and getProductivityLevel to the service.

Demonstrates built-in Angular pipes, showing date pipe presets and custom formats, text transformation pipes (uppercase, lowercase, title case), and the number pipe with practical format examples.

Master Angular's built-in pipes: currency, percent, slice, json, and date, with params like currency code and display type, plus practical pipe chaining demonstrations.

Discover how to create a practical custom truncate pipe in Angular, implementing the transform method, decorating with the pipe decorator, and using it in templates to add ellipses.

Explore how pure and impure pipes control Angular's transform method calls, impact change detection and performance, and how immutable data patterns keep your pipes efficient.