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.

Split the UI into components and build a header component from three files. Create header.component.ts, export HeaderComponent, and apply the component decorator, noting Angular 20 naming conventions and TypeScript usage.

Configure a custom header component in angular by defining a selector like app-header, wiring an external header.component.html with templateUrl, and enabling standalone true for modern components.

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.

Organize components in feature folders and generate new ones with ng generate component, creating html, ts, css, and spec files with a selector and standalone true.

Prepare dummy user data and assets, then render a randomly selected user’s name and image in an Angular component using dynamic content techniques.

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.

Decorate a property with @Output and use an EventEmitter to emit a user id to a parent component, then handle it via $event in the template.

Learn how the output function replaces the @Output decorator by creating an event emitter with a TypeScript type, and how to emit and listen to custom outputs in templates.

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

Practice creating a configurable Angular component by building a TasksComponent that receives the selected user name via input, passes it to the app, and dynamically displays it.

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.

Replace the dummy data with a real tasks array in the tasks component, defining id, title, summary, dueDate, and userId, then render a per-user task list by the selected user.

Pass a task object into the task component via input. Define a task interface with id, user ID, title, summary, due date, and display the title, due date, and summary.

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.

Open the new task dialog and close it by emitting a cancel event from the new-task component, toggling isAddingTask in the tasks component, and removing the dialog from the DOM.

Explore how to integrate signals with two-way binding in Angular, including importing signal from @angular/core, wrapping initial values, and using ngModel to sync inputs, with caveats.

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.

Reuse a tasks service in Angular by using the inject function as an alternative to constructor injection, pass the user ID, and handle close events to add tasks.

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.

Learn to persist Angular task data using browser localStorage, initializing from a 'tasks' key, parsing JSON, and saving updates with a private saveTasks method.

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.

Explore how Angular modules differ from standalone components and why modules persist for historic reasons. Learn to declare, export, and share components across multiple modules to structure and combine functionality.

Explore how Angular modules (NgModule) group related components into modules, replacing per-component imports. Learn the migration from standalone components, and the trade-offs of extra module creation and mixing approaches.

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 how to declare and integrate components in Angular by using the imports or declarations arrays, mixing standalone and module-based components, and ensuring BrowserModule is imported for app bootstrap.

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.

Practice Angular essentials by building an investment calculator with a header, a user input section featuring two-way binding, and a results table, exploring standalone and module-based components, with optional services.

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.

Create a new Angular user-input component to collect investment data with a form, using two-way binding and accessible labels, and prepare a calculate button to log input to the console.

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 a reusable investment input data model with an interface or type, export it, and import it across app components to make the code leaner and surface data.

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.

Explore essential Angular features demonstrated in a practical demo app, with ample practice opportunities throughout the course. Revisit earlier lectures to solidify concepts before diving into more advanced topics.

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.

Learn how to install and use the Angular DevTools browser extension to inspect components, tweak inputs, and explore the profiler and injector tree for practical debugging and performance analysis.

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.

Configure a reusable dashboard item component by exposing image, image alt, and title as required inputs, via @Input or the input() function, for flexible reuse across contexts.

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.

Explore advanced content projection in Angular by using ngProjectAs to project content with an element selector, reducing markup duplication and keeping ng-content flexible.

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.

Learn to interact with a component's host element using the host property and decorators @HostBinding and @HostListener to bind properties and respond to click events.

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 dynamic class binding in Angular by conditionally applying status classes to a server status component, and simulate status changes from online to offline or unknown with class binding syntax.

Explore dynamic binding of multiple CSS classes by using an object of key-value pairs, conditionally applying classes like status-online or status-offline, and handling dash-named properties with quotes.

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.

Move initialization work from the constructor to ngOnInit, aligning with the Angular component lifecycle. The ngOnInit hook runs after inputs are initialized, keeping constructors lean and setup reliable.

Implement lifecycle interfaces with the implements keyword and the OnInit interface from @angular/core to enforce correct ngOnInit and catch typos before they break server status changes.

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.

Discover how to use ViewChild and ViewChildren in Angular to select single or multiple elements, including the ViewChild function returning a signal of ElementRef.

Access projected content with ContentChild and ContentChildren in Angular, using both decorator and functional forms, to obtain ElementRef of input or text area and interact with ng-content projections.

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.

Define a TypeScript ticket interface, manage tickets in a tickets component, and pass new tickets via a custom event to update an open/closed tickets array.

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.

Revisit two-way binding in Angular using ngModel to bind entered title and entered text in the new ticket component, and enable custom two-way binding to clear these inputs after submission.

Set up a custom two-way binding in Angular by combining input and output for a size property, enabling the app component to sync rectangle width and height.

Use Angular 17.2+ model function to create a two-way bindable size property with a ModelSignal, simplifying binding and automatic template updates via signals.

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.

Implement an attribute directive that uses host bindings to handle anchor click events, prompts with window confirm, and prevents the default navigation when the user declines.

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 building structural and attribute directives, implement a log directive that captures host element clicks via ElementRef, and compose directives with host directives to reuse features across components.

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.

Explore how centralized services enable sharing logic and data across Angular components, directives, and other services by building a tasks service in the starting project.

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.

Learn how to inject a tasks service in the tasks list component using the alternative inject syntax, expose a read-only allTasks signal, and enforce separation between data management and usage.

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.

Inject services into services using the Angular CLI to generate a logging service, then inject it into another service and log tasks activity with timestamps to the console.

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.

Explore how Angular registers services with custom injection tokens, using provider objects and tokens like tasks-service-token, and apply the inject decorator for non-service values.

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.

Learn to avoid zone pollution by using NgZone and runOutsideAngular to wrap non-ui timers, enabling opt out of change detection and reducing unnecessary cycles.

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.