Angular - The Complete Guide

Master the Angular essentials by building a complete demo app, learn the project structure, components, TypeScript, and declarative code, handle user events, and render a dynamic UI that updates.

Explore how Angular bootstraps an application by compiling TypeScript to JavaScript, injecting scripts via Angular CLI, and rendering a component into the app-root element using its template.

Register a custom header component in the Angular app by importing it and adding it to the app component's imports array, then render it with the app-header tag.

Learn to style the header component in Angular by linking header.component.css, updating global styles and fonts, and adding a logo image from assets with proper angular.json assets configuration.

Define a selectedUser property in the Angular component class, import DUMMY_USERS from dummy-users.ts, compute a randomIndex with Math.random and Math.floor, and bind selectedUser to the template.

Learn to listen to user input in Angular by binding a click event in the template, invoking a component method, and logging output to the console.

Manage state in angular by updating the user interface when a user is clicked, changing the selected user, and recalculating a new random index to refresh the displayed user.

Explore how Angular's change detection automatically tracks data changes in component properties, updates the DOM through the template, and uses zone.js to listen for user events and timers.

Learn how signals provide a fine-grained state update mechanism in Angular, including creating, reading, and computing signal values, and updating the UI without relying on Zone.js.

Learn to build flexible, reusable angular components by rendering a list of users with a single reusable UserComponent, configurable via attributes, to display multiple users with different data.

Define component inputs by adding a settable property decorated with @Input from @angular/core, enabling outside binding; expose avatars and names via the app component and a dummy users array.

Configure Angular input properties to make the user component reusable. Set the required option to true to enforce avatar and name values and catch errors during development.

Learn how to accept component inputs in Angular using either the traditional @Input decorator or signal inputs, including typing, defaults, required inputs, and how external data binds.

Add extra type information to EventEmitter using generics with the output decorator or output function. Enforce string value emissions to prevent emitting numbers.

Learn how TypeScript enforces strong static typing to prevent runtime errors by handling possibly undefined values with exclamation marks, question marks, and union types.

Define explicit types in TypeScript, including string or undefined, then adopt a single user object with a typed object type and required id, avatar, and name properties.

Use Angular's dynamic list rendering to output as many list items as needed from the users array, and apply a track by user.ID for efficient updates.

Enhance the demo app by adding a tasks section and a reusable app-task component, generating components with the Angular CLI and styling with task.component.css to show Emily's tasks.

Highlight the selected user by conditionally applying an active CSS class with Angular class bindings. Pass a selected boolean to the user component and bind class.active to it.

Enable deleting tasks by emitting a complete event from the task component when the complete button is clicked, then filter tasks in the tasks component to remove the completed one.

Create and conditionally render a new task component in angular by wiring a click listener to show app-new-task when isAddingTask becomes true.

Learn to handle form submission in Angular by using FormsModule to prevent the browser default, listen for ngSubmit, and run an onSubmit method to add data to the tasks array.

Explore content projection with ng-content using a shared card component to wrap markup across views. See how ng-content merges wrapped markup into the card template for consistent styling.

Use Angular pipes as output transformers to format template data. Learn to format dates with the DatePipe by importing DatePipe from @angular/common and configuring with fullDate or short formats.

Create a dedicated service to manage shared task data across components. Move task logic from the tasks component to a tasks service, with methods like getUserTasks, addTask, and removeTask.

Practice moving completion logic from the TasksComponent to the TaskComponent, using the tasks service via inject, and calling tasksService.removeTask(this.task.id) to remove completed tasks.

Explore Angular essentials, including components, bindings (interpolation, property, event, two-way with ngModel), template features (@if, @for, ng-content), forms with ngSubmit, and services via dependency injection.

Learn how to migrate from standalone components to a module-based Angular app by configuring AppModule, declarations, and bootstrap, and bootstrapping with platform-browser-dynamic as the root component.

Learn to create and bootstrap Angular modules, register standalone and non-standalone components, and mix modules with standalone components while migrating a demo app.

Migrate header, user, and tasks components from standalone to module-based, updating app.module declarations and imports, and resolving internal dependencies such as card, task, and new task components.

Learn how to build complex module-based Angular app structures by creating a tasks module, exporting key components, and resolving cross-module dependencies with common, forms, and shared modules.

Create an Angular header component with the CLI, display a public folder image with alt text, and integrate it into the app via imports, illustrating standalone and module-based approaches.

Learn to implement two-way binding in Angular forms by using the ngModel directive, wiring input elements to component properties, and managing initial values and names to capture user input.

Explore deriving annual investment results in Angular by implementing calculation logic in the app component or via a service, passing input data to compute and display results in a table.

Master cross-component communication in Angular by emitting an event from the user input to the app component, sending a data object with initial investment, duration, expected return, and annual investment.

Create an investment results component to display a dynamic table of yearly investment data, with fallback text, using an Angular input to receive an array of results from the parent.

Output a dynamic investment table by using @if for conditional display and @for to loop results, rendering year, valueEndOfYear, interest gained, and totals with track by year.

Format template values with Angular's currency pipe, imported from Angular common and added to the component imports; apply the pipe to values and optionally pass parameters for euros or dollars.

Explore how to migrate to signals in Angular, manage results data with signals, and reset the form after submission using signal-based state management.

Learn how to use an Angular service for cross-component communication by moving calculation logic into a reusable InvestmentService, and wiring components to share results without inputs and outputs.

Learn to manage data in an angular service using signals. Declare resultData as a signal, update with set, and expose a read-only signal via computed or asReadonly for components.

Learn to debug Angular applications by interpreting error messages and fixing logical errors with Angular developer tools, using a hands-on starter project and npm install and npm start.

Analyze Angular error messages from terminal and IDE, identify when a string is required but an object is passed, and fix by using the selected user's id for userId.

Explore advanced Angular component concepts, including host elements, inputs and outputs, and two-way binding. Use a demo project to examine templates, lifecycle hooks, configuration options, and content interactions.

Begin a new Angular starter project, install dependencies, and start the dev server to explore the starting state. Learn when to split markup and logic into smaller components.

Break up complex markup into reusable components by creating a shared dashboard-item component that wraps common header markup, enabling reuse across server status, tickets, and traffic components.

Explore property binding in Angular to bind image src, alt text, and title from input signals, using square brackets and interpolation for reusable dashboard item components.

Learn how to use Angular's content projection with ng-content to render wrapped content inside a custom component, avoiding content duplication and enabling reusable dashboard item components.

Define content projection fallbacks with ng-content to display a default icon when no content is provided, and learn how Angular supports this while IDEs may flag older version errors.

Create a reusable control component for form inputs in Angular, using an input label and ng-content select to restrict projections to inputs and textareas.

Learn how to scope CSS to Angular components by moving global styles from styles.css into component-specific css files, migrate styles, and manage breakages during migration.

Every component has a host element rendered in the dom; with view encapsulation none, host selectors can break styles, so add class like control to the host to fix it.

Learn to use the host property in the component decorator to automatically add key-value attributes, like class, to host elements across all app-control instances, reducing duplication.

learn how the component host property interacts with view encapsulation to style the host element, using :host selectors for host styling, and why semantic wrappers like forms should remain.

Inject ElementRef to access the host element programmatically in Angular, inspect its nativeElement properties, and log or read information, while preferring data-driven template updates over direct DOM changes.

Explore Angular dynamic inline style binding using [style] and [style.fontSize], including object and string forms, dash-to-camel case conversions, and a height percentage bound in a traffic component div.

Demonstrate updating currentStatus in an Angular app using setInterval every five seconds, with Math.random selecting online, offline, or unknown, and enforce a TypeScript union to prevent typos.

Learn to implement ngOnDestroy to clean up a setInterval by storing the interval in a private property and clearing it on destroy, preventing memory leaks.

Learn how to handle form submissions in Angular by using ngSubmit, importing FormsModule, and wiring a NewTicketComponent with an onSubmit method to capture and log submitted values.

Learn how to extract input values with template variables in Angular forms, passing only the title and ticketText as strings to onSubmit and handling extraction in the template.

Explore template variables in Angular forms: access dom elements or component instances, and see how a button becomes a button component instance with the app button attribute.

Explore decorator-based queries with view child and content child in Angular, and master after view init and after content init hooks to access selected elements reliably.

Employ custom outputs in Angular by emitting an add event from the new ticket form, sending a ticket object with title and text, and updating the tickets array.

Learn to add a collapsible ticket details feature in angular using signals to manage a details visible state, toggle it with set or update, and trigger on click.

Update ticket status via cross-component communication by mapping the tickets array and setting status to closed using onCloseTicket, while TicketComponent emits a close event to reflect completion in the UI.

Configure inputs and outputs in Angular components by applying configuration objects, aliases, and transform functions, and learn when defaults or required values apply via the input decorator and @Output.

Explore directives as enhancements that add behaviors to elements in templates, like NgModel for input handling and two-way binding. Distinguish directives from components, which bring their own templates.

Explore how the built-in ngModel attribute directive enables two-way binding and dynamic class management on input elements, illustrating how Angular enhances inputs with ngModelChange and ng-untouched/ng-touched states.

Explore how structural directives render content conditionally with @if in Angular 17, using an auth service and isAdmin logic to show admin content, compared to ngIf.

Learn how to add inputs to a custom attribute directive in Angular, use an input function for configurable query param, and append a from query parameter to navigation addresses.

Explore how directives use dependency injection to inject services or the host element via ElementRef, enabling access to host element, such as an HTML anchor element, and supporting attribute directives.

Create a custom structural directive in Angular that renders content by user status, using an input userType and the auth service with activePermission to drive DOM via the Effect function.

Create a custom structural directive by using ng-template, templateRef, and viewContainerRef to create embedded views and conditionally render or clear content in the DOM based on auth status.

Explore how the asterisk acts as syntactic sugar for ng template, enabling property binding and TypeScript evaluation. See shorter syntax conditionally render content with app auth and CSS classes.

Explore Angular pipes and learn how built-in pipes like currency format values in templates, configure them, and apply transformations in a single component demo.

Explore built-in Angular pipes, using DatePipe with medium format and custom options, and apply the number (decimal) pipe via colon-separated arguments to control digit precision.

Build and use a custom temperature pipe that formats values as degrees Celsius or Fahrenheit, converts between units with a transform method, using the pipe decorator and standalone pipe.

Learn to configure pipes by accepting input and output types for Celsius and Fahrenheit conversions and symbols. Pass arguments with colon syntax in templates and combine with the decimal pipe.

Build an Angular sort pipe that sorts arrays of strings or numbers with ASC or DSC direction, using a copied array and a comparator, and use it in templates.

Explore pure and impure pipes in Angular, learning how setting pure to false disables caching so transform runs on every template change, with performance trade-offs and practical demo notes.

Avoid mismatches by not using pipes when item order matters; operate on raw input data and use unique identifiers or sort data in a constructor so pipes transform the view.

Explore services and dependency injection in Angular, build a new service, and examine hierarchical injection, how it resolves requests, and injection tokens and values to provide services to components.

Create a tasks.service.ts in an Angular project, decorate with Injectable and providedIn root, and manage a tasks array with a signal and an addTask method for building a new task.

Learn how to share a single TasksService instance across components in Angular by using dependency injection, instead of creating separate class instances in NewTaskComponent and TasksListComponent.

Learn how Angular's dependency injection allows components, directives, and services to request dependencies in constructors, with Angular providing shared instances via injectors, using TypeScript shortcuts for concise code.

Explain how Angular's element injector requests a service and cascades up to environment, module, and platform injectors, using @Injectable with providedIn root, ending with injector errors when no provider exists.

Explore ways to provide a service in angular, including @Injectable with providedIn root and an alternative bootstrapApplication providers approach, which lacks tree shaking and is less optimal.

Register an injectable value with Angular’s element injector to scope a service to a component’s element tree, using the providers array to share one instance among task components.

Explore how the element injector registers values per component, creating isolated service instances, and contrast it with a root-provided service that shares state across the app.

Explore the Angular dev tools injector tree to see null, platform, root environment, and element injectors, and inspect injectable values like the tasks and logging services registered at the root.

Learn how to inject a non-service value via a custom injection token named task status options, provide it with use value, and render its options dynamically in Angular components.

Explore how Angular modules (NgModule) use dependency injection by configuring a providers array in app and feature modules, bootstrapping with bootstrapModule, and merging module injectors for scalable, lazy-loaded architectures.

Learn how to manage data without signals using a non-signal approach with modules or standalone components; use a simple tasks array, a getter for safe copies, and standard dependency injection.

Explore Angular's change detection mechanism, including the OnPush strategy, the role of ZoneJS, and the impact of signals, with a theory-focused look using a dummy app to improve performance.

Explore how Angular change detection runs across a dummy project with interactive components, a counter, a message box, and logs, and learn to control and optimize performance.

Discover how Angular's default change detection traverses the component tree via zone.js, reevaluates template bindings, updates the DOM, and logs each binding check, with tips to avoid expensive getters.

Learn to write efficient template bindings by keeping expressions simple, avoiding costly calculations in templates, and leveraging cached pipes and selective function calls to optimize angular change detection.

Enable the OnPush change detection strategy per component to reduce change checks and boost performance in Angular apps. See how MessagesComponent and MessagesListComponent behave under OnPush compared to the default.

Enable on push change detection to limit reevaluation to events inside a component and its children, optimize performance, and selectively apply to nested components like messages and counter.

Discover how the OnPush strategy interacts with signals in Angular 17, triggering reevaluation of a component and its children when signals change. See how shared services across OnPush components can reveal edge cases.

Explore sharing data across Angular components using signals with OnPush, injecting a MessagesService to add and read messages via a read-only signal, and considerations when migrating to non-signal services.

Discover how angular's async pipe automatically subscribes to a subject or observable, updates the template with new values, triggers change detection, and unsubscribes when the component is inactive.

Explore how signals replace zone.js for change detection in Angular 18, enabling zoneless change detection with signals and event bindings, reducing bundle size and fine-grained updates.