{ "TopBar": [ { "url": "docs", "title": "Docs" }, { "url": "resources", "title": "Community" }, { "url": "https://blog.angular.io/", "title": "Blog" } ], "TopBarNarrow": [ { "title": "About Angular", "children": [ { "url": "features", "title": "Features" }, { "url": "resources", "title": "Resources" }, { "url": "events", "title": "Events" }, { "url": "https://blog.angular.io/", "title": "Blog" } ] } ], "SideNav": [ { "url": "docs", "title": "Introduction", "tooltip": "Welcome to the Angular documentation set.", "hidden": false }, { "title": "Getting started", "tooltip": "Set up your environment and learn basic concepts", "children": [ { "url": "guide/what-is-angular", "title": "What is Angular?", "tooltip": "A brief description of the Angular platform." }, { "title": "Try it", "tooltip": "Examine and work with a ready-made sample app, with no setup.", "children": [ { "url": "start", "title": "Getting started", "tooltip": "Take a look at Angular's component model, template syntax, and component communication." }, { "url": "start/start-routing", "title": "Adding navigation", "tooltip": "Navigate among different page views using the browser's URL." }, { "url": "start/start-data", "title": "Managing data", "tooltip": "Use services and access external data via HTTP." }, { "url": "start/start-forms", "title": "Using forms for user input", "tooltip": "Learn about fetching and managing data from users with forms." }, { "url": "start/start-deployment", "title": "Deploying an application", "tooltip": "Move to local development, or deploy your application to Firebase or your own server." } ] }, { "url": "guide/setup-local", "title": "Setup", "tooltip": "Setting up for local development with the Angular CLI." } ] }, { "title": "Understanding Angular", "tooltip": "Learn the essential concepts to become a proficient Angular developer.", "children": [ { "title": "Overview", "url": "guide/understanding-angular-overview", "tooltip": "Learn about the most common parts of an Angular application." }, { "title": "Components", "tooltip": "Learn more about how to use data binding to build dynamic views", "children": [ { "url": "guide/component-overview", "title": "Overview", "tooltip": "Overview of how to create Angular components." }, { "url": "guide/lifecycle-hooks", "title": "Component lifecycle", "tooltip": "Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them." }, { "url": "guide/view-encapsulation", "title": "View encapsulation", "tooltip": "Describes how component CSS styles are encapsulated into a component's view." }, { "url": "guide/component-interaction", "title": "Component interaction", "tooltip": "Share information between different directives and components." }, { "url": "guide/component-styles", "title": "Component styles", "tooltip": "Add CSS styles that are specific to a component." }, { "url": "guide/inputs-outputs", "title": "Sharing data between child and parent directives and components", "tooltip": "Introductory guide to sharing data between parent and child directives or components." }, { "url": "guide/content-projection", "title": "Content projection", "tooltip": "Learn how to create reusable components using Angular's content projection feature." }, { "url": "guide/dynamic-component-loader", "title": "Dynamic components", "tooltip": "Load components dynamically." }, { "url": "guide/elements", "title": "Angular elements", "tooltip": "Convert components to Custom Elements." } ] }, { "title": "Templates", "tooltip": "Syntax to use in templates for binding, expressions, and directives.", "children": [ { "url": "guide/template-overview", "title": "Overview", "tooltip": "Introduction to templates." }, { "url": "guide/template-syntax", "title": "Introduction", "tooltip": "Introduction to writing templates that display data and consume user events with the help of data binding." }, { "url": "guide/interpolation", "title": "Text interpolation", "tooltip": "An introduction to interpolation and expressions in HTML." }, { "url": "guide/template-statements", "title": "Template statements", "tooltip": "Introductory guide to statements in templates that respond to events that components, directives, or elements raise." }, { "title": "Binding", "tooltip": "A binding connects a template and a component.", "children": [ { "url": "guide/binding-overview", "title": "Understanding binding", "tooltip": "Introductory guide to binding." }, { "url": "guide/property-binding", "title": "Property binding", "tooltip": "Learn how to use property binding." }, { "url": "guide/attribute-binding", "title": "Attribute binding", "tooltip": "Learn how to use attribute binding." }, { "url": "guide/class-binding", "title": "Class and style binding", "tooltip": "Learn how to use class and style binding." }, { "url": "guide/event-binding", "title": "Event binding", "tooltip": "Learn how to use to event binding." }, { "url": "guide/two-way-binding", "title": "Two-way binding", "tooltip": "Learn how to share data between a class and a template." } ] }, { "title": "Pipes", "tooltip": "Pipes transform displayed values within a template.", "children": [ { "url": "guide/pipes-overview", "title": "Understanding pipes", "tooltip": "Introductory guide to pipes." }, { "url": "guide/pipe-template", "title": "Using a pipe in a template", "tooltip": "Learn how to use a pipe in a template." }, { "url": "guide/pipes-transform-data", "title": "Transforming data with parameters and chained pipes", "tooltip": "Learn how to use a pipe transform data." }, { "url": "guide/pipe-precedence", "title": "Pipe precedence in template expressions", "tooltip": "How to use pipes within a ternary operator expression." } ] }, { "url": "guide/template-reference-variables", "title": "Template reference variables", "tooltip": "Introductory guide to referring to DOM elements within a template." }, { "url": "guide/svg-in-templates", "title": "SVG as templates", "tooltip": "Learn how to use SVGs as templates for Angular applications." } ] }, { "title": "Directives", "tooltip": "Control the behavior of elements and the layout of your pages with directives.", "children": [ { "url": "guide/built-in-directives", "title": "Built-in directives", "tooltip": "Introductory guide to some of the most popular built-in directives." }, { "url": "guide/attribute-directives", "title": "Attribute directives", "tooltip": "Attribute directives attach behavior to elements." }, { "url": "guide/structural-directives", "title": "Structural directives", "tooltip": "Structural directives manipulate the layout of the page." }, { "url": "guide/directive-composition-api", "title": "Directive composition API", "tooltip": "Apply directive to host elements." } ] }, { "title": "Dependency injection", "tooltip": "Dependency injection: creating and injecting services", "children": [ { "url": "guide/dependency-injection-overview", "title": "Dependency injection in Angular", "tooltip": "Dependency injection is a design pattern in which a class requests dependencies from external sources." }, { "url": "guide/dependency-injection", "title": "Understanding dependency injection", "tooltip": "Angular's dependency injection system creates and delivers dependent services to Angular-created classes." }, { "url": "guide/creating-injectable-service", "title": "Creating an injectable service", "tooltip": "Example of creating an injectable service." }, { "url": "guide/dependency-injection-providers", "title": "Defining dependency providers", "tooltip": "A provider factory function is a plain function that Angular can call to create a dependency." }, { "url": "guide/dependency-injection-context", "title": "Injection context", "tooltip": "Dependency injection depends on a runtime context to work." }, { "url": "guide/hierarchical-dependency-injection", "title": "Hierarchical injectors", "tooltip": "Hierarchical dependency injection enables you to share dependencies between different parts of the application only when and if you need to." } ] } ] }, { "title": "Developer guides", "tooltip": "Learn more about how to use Angular to build your applications.", "children": [ { "url": "guide/developer-guide-overview", "title": "Overview", "tooltip": "A list of developer guides for building Angular applications." }, { "title": "Standalone", "tooltip": "Learn about Angular's standalone APIs and how to convert your application to them.", "children": [ { "url": "guide/standalone-components", "title": "Standalone components", "tooltip": "Standalone components, directives, and pipes" }, { "url": "guide/standalone-migration", "title": "Migrating to standalone", "tooltip": "Migrate your application to Angular's standalone APIs" } ] }, { "title": "Change detection", "tooltip": "Learn how Angular updates the view based on data changes and how to keep your application fast", "children": [ { "url": "guide/change-detection", "title": "Overview", "tooltip": "Introduces the basics of Angular's change detection" }, { "url": "guide/change-detection-zone-pollution", "title": "Zone pollution", "tooltip": "Explains how Zone.js works and what are the common pitfalls that can slow an application down" }, { "url": "guide/change-detection-slow-computations", "title": "Slow computations", "tooltip": "Learn how to make your application faster by discovering and optimizing slow calculations" }, { "url": "guide/change-detection-skipping-subtrees", "title": "Skipping component subtrees", "tooltip": "Learn how to skip change detection in component subtrees using OnPush change detection strategy" } ] }, { "title": "Routing and navigation", "tooltip": "Learn how to use Angular Router to build in-app navigation between views.", "children": [ { "url": "guide/routing-overview", "title": "Overview", "tooltip": "Introduces the Angular Router and lists topics that teach you how to add the router to your applications." }, { "url": "guide/router", "title": "Common routing tasks", "tooltip": "Task-based content on many of the common tasks associated with Angular routing, such as defining routs, setting up wildcard routes, and redirects." }, { "url": "guide/router-tutorial", "title": "Tutorial: routing in single-page applications", "tooltip": "A tutorial that covers many patterns associated with Angular routing." }, { "url": "guide/routing-with-urlmatcher", "title": "Tutorial: creating custom route matches", "tooltip": "Learn how to create a custom URL matcher with the Angular router." }, { "url": "guide/router-tutorial-toh", "title": "Tutorial: adding routing to Tour of Heroes", "tooltip": "Explore how to use Angular's router. Based on the Tour of Heroes example." }, { "url": "guide/router-reference", "title": "Router reference", "tooltip": "Describes highlight some core router API concepts." } ] }, { "title": "Forms", "tooltip": "Forms creates a cohesive, effective, and compelling data entry experience.", "children": [ { "url": "guide/forms-overview", "title": "Introduction", "tooltip": "An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors." }, { "url": "guide/reactive-forms", "title": "Reactive forms", "tooltip": "Create a reactive form using FormBuilder, groups, and arrays." }, { "url": "guide/typed-forms", "title": "Strictly typed reactive forms in depth", "tooltip": "A deep-dive into the reactive forms types." }, { "url": "guide/form-validation", "title": "Validate form input", "tooltip": "Validate user's form entries." }, { "url": "guide/dynamic-form", "title": "Building dynamic forms", "tooltip": "Create dynamic form templates using FormGroup." } ] }, { "url": "guide/esbuild", "title": "esbuild-based Builds", "tooltip": "Getting started with the CLI's esbuild-based build system." }, { "title": "HTTP client", "tooltip": "Use HTTP to talk to a remote server.", "children": [ { "url": "guide/understanding-communicating-with-http", "title": "Understanding HTTP", "tooltip": "Understanding communicating with backend services using HTTP" }, { "url": "guide/http-setup-server-communication", "title": "Setup for server communication", "tooltip": "Setup a server communication for HTTP" }, { "url": "guide/http-request-data-from-server", "title": "Request data from a server", "tooltip": "Learn how to request data from the server via the HTTP client" }, { "url": "guide/http-make-jsonp-request", "title": "Make a JSONP request", "tooltip": "Make a cross-origin request via JSONP" }, { "url": "guide/http-handle-request-errors", "title": "Handle request errors", "tooltip": "Error handling" }, { "url": "guide/http-send-data-to-server", "title": "Send data to a server", "tooltip": "Learn how to send data to a server via the HTTP client" }, { "url": "guide/http-configure-http-url-parameters", "title": "Configure URL parameters", "tooltip": "Learn how to configure parameters of the URL when sending requests over HTTP" }, { "url": "guide/http-intercept-requests-and-responses", "title": "Intercept requests and responses", "tooltip": "Learn how to use HTTP interceptors to transform requests and responses" }, { "url": "guide/http-interceptor-use-cases", "title": "Interceptor use-cases", "tooltip": "Learn when to use HTTP interceptors" }, { "url": "guide/http-pass-metadata-to-interceptors", "title": "Pass metadata to interceptors", "tooltip": "Learn how to pass metadata to interceptors" }, { "url": "guide/http-track-show-request-progress", "title": "Track and show request progress", "tooltip": "Learn how to track and show progress when sending HTTP requests" }, { "url": "guide/http-optimize-server-interaction", "title": "Optimize server communication", "tooltip": "Learn how to use debouncing to optimize server interaction" }, { "url": "guide/http-security-xsrf-protection", "title": "Cross-Site Request Forgery (XSRF) protection", "tooltip": "Learn how to secure your website against Cross-Site Request Forgery" }, { "url": "guide/http-test-requests", "title": "Test requests", "tooltip": "Learn how to test logic that uses the HTTP client" } ] }, { "url": "guide/hydration", "title": "Hydration", "tooltip": "How to enable hydration on your server rendered applications." }, { "url": "guide/defer", "title": "Deferrable views", "tooltip": "How to defer load components, directives, and pipes." }, { "url": "guide/image-directive", "title": "Image optimization", "tooltip": "Performant images with the Angular image directive." }, { "title": "Testing", "tooltip": "Testing your Angular apps.", "children": [ { "url": "guide/testing", "title": "Intro to testing", "tooltip": "Introduction to testing an Angular app." }, { "url": "guide/testing-code-coverage", "title": "Code coverage", "tooltip": "Determine how much of your code is tested." }, { "url": "guide/testing-services", "title": "Testing services", "tooltip": "How to test services." }, { "url": "guide/testing-components-basics", "title": "Basics of testing components", "tooltip": "The fundamentals of how to test components." }, { "url": "guide/testing-components-scenarios", "title": "Component testing scenarios", "tooltip": "Use cases for testing components." }, { "url": "guide/testing-attribute-directives", "title": "Testing attribute directives", "tooltip": "How to test attribute directives." }, { "url": "guide/testing-pipes", "title": "Testing pipes", "tooltip": "Writing tests for pipes." }, { "url": "guide/test-debugging", "title": "Debugging tests", "tooltip": "How to debug tests." }, { "url": "guide/testing-utility-apis", "title": "Testing utility APIs", "tooltip": "Features of the Angular testing utilities." } ] }, { "title": "Internationalization", "tooltip": "Translate the text of your application text into multiple languages", "children": [ { "url": "guide/i18n-overview", "title": "Overview", "tooltip": "Introduces the Angular internationalization and lists topics that teach you how to localize your applications" }, { "title": "Common internationalization tasks", "tooltip": "Task-based content on many of the common tasks associated with Angular internationalization, such as adding the locale package and formatting data for a locale", "children": [ { "url": "guide/i18n-common-overview", "title": "Overview", "tooltip": "Introduces the common Angular internationalization tasks and lists topics that teach you how to localize your applications" }, { "url": "guide/i18n-common-add-package", "title": "Add the localize package", "tooltip": "Add the Angular localize package" }, { "url": "guide/i18n-common-locale-id", "title": "Refer to locales by ID", "tooltip": "Reference using locale IDs" }, { "url": "guide/i18n-common-format-data-locale", "title": "Format data based on locale", "tooltip": "Format data based on locale" }, { "url": "guide/i18n-common-prepare", "title": "Prepare component for translation", "tooltip": "Prepare component for translation" }, { "url": "guide/i18n-common-translation-files", "title": "Work with translation files", "tooltip": "Work with translation files" }, { "url": "guide/i18n-common-merge", "title": "Merge translations into the app", "tooltip": "Merge translations into your app" }, { "url": "guide/i18n-common-deploy", "title": "Deploy multiple locales", "tooltip": "Deploy multiple locale for your app" } ] }, { "url": "guide/i18n-example", "title": "Example Angular application", "tooltip": "Example of a translated Angular application" }, { "title": "Optional internationalization practices", "tooltip": "Task-based content on many of the optional pratices associated with Angular internationalization", "children": [ { "url": "guide/i18n-optional-overview", "title": "Overview", "tooltip": "Introduces the optional Angular internationalization tasks and lists topics that teach you how to manually configure localization settings for your applications" }, { "url": "guide/i18n-optional-import-global-variants", "title": "Import global variants of the locale data", "tooltip": "Import global variants of the locale data" }, { "url": "guide/i18n-optional-manage-marked-text", "title": "Manage marked text with custom IDs", "tooltip": "Manage marked text with custom IDs" } ] } ] }, { "title": "Animations", "tooltip": "Enhance the user experience with animation.", "children": [ { "url": "guide/animations", "title": "Introduction", "tooltip": "Basic techniques in Angular animations." }, { "url": "guide/transition-and-triggers", "title": "Transition and Triggers", "tooltip": "Advanced techniques in transition and triggers." }, { "url": "guide/complex-animation-sequences", "title": "Complex Sequences", "tooltip": "Complex Angular animation sequences." }, { "url": "guide/reusable-animations", "title": "Reusable Animations", "tooltip": "Creating reusable animations." }, { "url": "guide/route-animations", "title": "Route transition animations", "tooltip": "Animate route transitions." } ] }, { "title": "Service Workers & PWA", "tooltip": "Angular service workers: Controlling caching of application resources.", "children": [ { "url": "guide/service-worker-intro", "title": "Introduction", "tooltip": "Angular's implementation of service workers improves user experience with slow or unreliable network connectivity." }, { "url": "guide/service-worker-getting-started", "title": "Getting started", "tooltip": "Enabling the service worker in a CLI project and observing behavior in the browser." }, { "url": "guide/service-worker-communications", "title": "Service worker communication", "tooltip": "Services that enable you to interact with an Angular service worker." }, { "url": "guide/service-worker-notifications", "title": "Service worker notifications", "tooltip": "Configuring service worker notification behavior." }, { "url": "guide/service-worker-devops", "title": "Service worker in production", "tooltip": "Running apps with service workers, managing app update, debugging, and killing apps." }, { "url": "guide/service-worker-config", "title": "Service worker configuration", "tooltip": "Configuring service worker caching behavior." }, { "url": "guide/app-shell", "title": "App shell", "tooltip": "Render a portion of your app quickly to improve the startup experience." } ] }, { "url": "guide/web-worker", "title": "Web workers", "tooltip": "Using web workers for background processing." }, { "url": "guide/ssr", "title": "Server-side rendering", "tooltip": "Render HTML server-side." }, { "url": "guide/prerendering", "title": "Prerendering", "tooltip": "Prerender HTML server-side with Angular Universal." }, { "title": "Angular Libraries", "tooltip": "Extending Angular with shared libraries.", "children": [ { "url": "guide/libraries", "title": "Libraries overview", "tooltip": "Understand how and when to use or create libraries." }, { "url": "guide/using-libraries", "title": "Using published libraries", "tooltip": "Integrate published libraries into an app." }, { "url": "guide/creating-libraries", "title": "Creating libraries", "tooltip": "Extend Angular by creating, publishing, and using your own libraries." }, { "url": "guide/angular-package-format", "title": "Angular package format", "tooltip": "Information about the Angular Package Format." } ] }, { "title": "Feature preview", "tooltip": "Angular preview features and APIs", "children": [ { "url": "guide/control_flow", "title": "Built-in control flow", "tooltip": "Angular built-in control flow: if, for and switch" }, { "url": "guide/signals", "title": "Signals", "tooltip": "Angular signals for optimized change detection" }, { "url": "guide/signal-inputs", "title": "Signal inputs", "tooltip": "Signal inputs to optimize change detection and developer experience." }, { "url": "guide/model-inputs", "title": "Model inputs", "tooltip": "Model inputs define inputs that emit a changed event when updated." }, { "url": "guide/signal-queries", "title": "Signal queries", "tooltip": "Signal queries exposing results as a reactive signal primitive." }, { "url": "guide/rxjs-interop", "title": "RxJS Interop for Signals", "tooltip": "Angular signals and Observable interop" } ] } ] }, { "title": "Best practices", "tooltip": "Learn how to build robust, scalable applications.", "children": [ { "url": "guide/security", "title": "Security", "tooltip": "Developing for content security in Angular applications." }, { "url": "guide/accessibility", "title": "Accessibility", "tooltip": "Design apps to be accessible to all users." }, { "url": "guide/updating", "title": "Keeping up-to-date", "tooltip": "Information about updating Angular applications and libraries to the latest version." }, { "url": "guide/property-binding-best-practices", "title": "Property binding best practices", "tooltip": "Use property binding efficiently." }, { "url": "guide/lazy-loading-ngmodules", "title": "Lazy loading feature modules", "tooltip": "Lazy load modules to speed up your apps." }, { "url": "guide/lightweight-injection-tokens", "title": "Lightweight injection tokens for libraries", "tooltip": "Optimize client app size by designing library services with lightweight injection tokens." } ] }, { "title": "Angular tools", "tooltip": "Tools to help you build your Angular applications.", "children": [ { "title": "Development workflow", "tooltip": "Build, and deployment information.", "children": [ { "url": "guide/deployment", "title": "Deploying applications", "tooltip": "Learn how to deploy your Angular app." }, { "title": "AOT compiler", "tooltip": "Understanding ahead-of-time compilation.", "children": [ { "url": "guide/aot-compiler", "title": "Ahead-of-Time compilation", "tooltip": "Learn why and how to use the Ahead-of-Time (AOT) compiler." }, { "url": "guide/angular-compiler-options", "title": "Angular compiler options", "tooltip": "Configuring AOT compilation." }, { "url": "guide/aot-metadata-errors", "title": "AOT metadata errors", "tooltip": "Troubleshooting AOT compilation." }, { "url": "guide/template-typecheck", "title": "Template type-checking", "tooltip": "Template type-checking in Angular." } ] }, { "url": "guide/build", "title": "Building & serving", "tooltip": "Building and serving Angular apps." } ] }, { "url": "guide/cli-builder", "title": "CLI builders", "tooltip": "Using builders to customize Angular CLI." }, { "url": "guide/language-service", "title": "Language service", "tooltip": "Use Angular Language Service to speed up dev time." }, { "title": "DevTools", "tooltip": "DevTools", "url": "guide/devtools" }, { "title": "Schematics", "tooltip": "Understanding schematics.", "children": [ { "url": "guide/schematics", "title": "Schematics Overview", "tooltip": "Extending CLI generation capabilities." }, { "url": "guide/schematics-authoring", "title": "Authoring schematics", "tooltip": "Understand the structure of a schematic." }, { "url": "guide/schematics-for-libraries", "title": "Schematics for libraries", "tooltip": "Use schematics to integrate your library with the Angular CLI." } ] } ] }, { "title": "Tutorials", "tooltip": "End-to-end tutorials for learning Angular concepts and patterns.", "children": [ { "title": "Tutorial: Your first Angular app", "tooltip": "Learn how to get started in Angular by building an Angular app", "children": [ { "url": "tutorial/first-app", "title": "Introduction", "tooltip": "Introduction to the first Angular app and tutorial" }, { "url": "tutorial/first-app/first-app-lesson-01", "title": "Hello world", "tooltip": "Start coding in Angular with Hello World" }, { "url": "tutorial/first-app/first-app-lesson-02", "title": "Create home component", "tooltip": "Create the app's HomeComponent" }, { "url": "tutorial/first-app/first-app-lesson-03", "title": "Create housing location component", "tooltip": "Create the app's HousingLocation" }, { "url": "tutorial/first-app/first-app-lesson-04", "title": "Create an interface", "tooltip": "Create an interface for your app" }, { "url": "tutorial/first-app/first-app-lesson-05", "title": "Add inputs to components", "tooltip": "Add inputs to components in your app" }, { "url": "tutorial/first-app/first-app-lesson-06", "title": "Add property binding to components", "tooltip": "Add property binding to components in your app" }, { "url": "tutorial/first-app/first-app-lesson-07", "title": "Add dynamic values to templates", "tooltip": "Add dynamic values to your templates in your app" }, { "url": "tutorial/first-app/first-app-lesson-08", "title": "Use *ngFor in templates", "tooltip": "Use *ngFor in your templates in your app" }, { "url": "tutorial/first-app/first-app-lesson-09", "title": "Angular services", "tooltip": "Add an Angular service to your app" }, { "url": "tutorial/first-app/first-app-lesson-10", "title": "Add routing", "tooltip": "Add routing to your app" }, { "url": "tutorial/first-app/first-app-lesson-11", "title": "Customize the details page", "tooltip": "Add styles, links and more to the details page" }, { "url": "tutorial/first-app/first-app-lesson-12", "title": "Integrate Angular forms", "tooltip": "Add an Angular form to your app" }, { "url": "tutorial/first-app/first-app-lesson-13", "title": "Add search functionality", "tooltip": "Add search functionality to your app" }, { "url": "tutorial/first-app/first-app-lesson-14", "title": "Add HTTP communication", "tooltip": "Add HTTP communication to your app" } ] }, { "title": "Tutorial: Tour of Heroes", "tooltip": "The Tour of Heroes app is used as a reference point in many Angular examples.", "children": [ { "url": "tutorial/tour-of-heroes", "title": "Introduction", "tooltip": "Introduction to the Tour of Heroes app and tutorial" }, { "url": "tutorial/tour-of-heroes/toh-pt0", "title": "Create a project", "tooltip": "Creating the application shell" }, { "url": "tutorial/tour-of-heroes/toh-pt1", "title": "1. The hero editor", "tooltip": "Part 1: Build a simple editor" }, { "url": "tutorial/tour-of-heroes/toh-pt2", "title": "2. Display a list", "tooltip": "Part 2: Build a master/detail page with a list of heroes." }, { "url": "tutorial/tour-of-heroes/toh-pt3", "title": "3. Create a feature component", "tooltip": "Part 3: Refactor the master/detail views into separate components." }, { "url": "tutorial/tour-of-heroes/toh-pt4", "title": "4. Add services", "tooltip": "Part 4: Create a reusable service to manage hero data." }, { "url": "tutorial/tour-of-heroes/toh-pt5", "title": "5. Add navigation", "tooltip": "Part 5: Add the Angular router and navigate among the views." }, { "url": "tutorial/tour-of-heroes/toh-pt6", "title": "6. Get data from a server", "tooltip": "Part 6: Use HTTP to retrieve and save hero data." } ] }, { "url": "guide/forms", "title": "Building a template-driven form", "tooltip": "Create a template-driven form using directives and Angular template syntax." } ] }, { "title": "Updates and releases", "tooltip": "Angular release practices, updating, and upgrading.", "children": [ { "url": "guide/update-to-version-16", "title": "Update Angular to the latest version", "tooltip": "Update your Angular application to the latest version." }, { "url": "guide/roadmap", "title": "Roadmap", "tooltip": "Roadmap of the Angular team." }, { "url": "guide/releases", "title": "Release practices", "tooltip": "Angular versioning, release, support, and deprecation policies and practices." }, { "url": "guide/versions", "title": "Version compatibility", "tooltip": "Angular, Node.js, TypeScript, and RxJS version compatibility." }, { "url": "guide/browser-support", "title": "Browser support", "tooltip": "Browser support and polyfills guide." }, { "url": "guide/deprecations", "title": "Deprecations", "tooltip": "Summary of Angular APIs and features that are deprecated." }, { "title": "Upgrading from AngularJS", "tooltip": "Incrementally upgrade an AngularJS application to Angular.", "children": [ { "url": "guide/upgrade", "title": "Upgrade instructions", "tooltip": "Incrementally upgrade an AngularJS application to Angular." }, { "url": "guide/upgrade-setup", "title": "Setup for upgrading from AngularJS", "tooltip": "Use code from the Angular QuickStart seed as part of upgrading from AngularJS." }, { "url": "guide/upgrade-performance", "title": "Upgrading for performance", "tooltip": "Upgrade from AngularJS to Angular in a more flexible way." }, { "url": "guide/ajs-quick-reference", "title": "AngularJS to Angular concepts", "tooltip": "Learn how AngularJS concepts and techniques map to Angular." } ] } ] }, { "title": "Reference", "tooltip": "Reference guides for Angular features and tools.", "children": [ { "title": "Conceptual reference", "tooltip": "Reference documentation that explains how Angular features work.", "children": [ { "title": "Angular concepts", "tooltip": "Introduction to basic concepts for Angular applications.", "children": [ { "url": "guide/architecture", "title": "Intro to basic concepts", "tooltip": "Basic building blocks of Angular applications." }, { "url": "guide/architecture-components", "title": "Intro to components", "tooltip": "About Components, Templates, and Views." }, { "url": "guide/architecture-services", "title": "Intro to services and DI", "tooltip": "About services and dependency injection." }, { "url": "guide/binding-syntax", "title": "Binding syntax", "tooltip": "Introductory guide to coordinating app values." }, { "url": "guide/event-binding-concepts", "title": "How event binding works", "tooltip": "About event binding." }, { "url": "guide/template-reference-variables", "title": "Template variables", "tooltip": "Introductory guide to referring to DOM elements within a template." }, { "url": "guide/architecture-next-steps", "title": "Next steps", "tooltip": "Beyond the basics." } ] }, { "title": "Workspace and project structure", "tooltip": "Workspace and project file structure and configuration.", "children": [ { "url": "guide/file-structure", "title": "Project file structure", "tooltip": "How your Angular workspace looks on your filesystem." }, { "url": "guide/workspace-config", "title": "Workspace configuration", "tooltip": "The \"angular.json\" file contains workspace and project configuration defaults for Angular CLI commands." }, { "url": "guide/npm-packages", "title": "npm dependencies", "tooltip": "Description of npm packages required at development time and at runtime." }, { "url": "guide/typescript-configuration", "title": "TypeScript configuration", "tooltip": "TypeScript configuration for Angular developers." }, { "url": "guide/strict-mode", "title": "Strict mode", "tooltip": "Reference documentation for Angular's strict mode.", "hidden": true } ] }, { "title": "NgModules", "tooltip": "NgModules.", "children": [ { "url": "guide/ngmodules", "title": "NgModules introduction", "tooltip": "Use NgModules to make your apps efficient." }, { "url": "guide/ngmodule-vs-jsmodule", "title": "JS Modules vs NgModules", "tooltip": "Differentiate between JavaScript modules and NgModules." }, { "url": "guide/bootstrapping", "title": "Launching apps with a root module", "tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"." }, { "url": "guide/frequent-ngmodules", "title": "Frequently used NgModules", "tooltip": "Introduction to the most frequently used NgModules." }, { "url": "guide/module-types", "title": "Types of feature modules", "tooltip": "Description of the different types of feature modules." }, { "url": "guide/feature-modules", "title": "Feature modules", "tooltip": "Create feature modules to organize your code." }, { "url": "guide/providers", "title": "Providing dependencies", "tooltip": "Providing dependencies to NgModules." }, { "url": "guide/singleton-services", "title": "Singleton services", "tooltip": "Creating singleton services." }, { "url": "guide/sharing-ngmodules", "title": "Sharing NgModules", "tooltip": "Share NgModules to streamline your apps." }, { "url": "guide/ngmodule-api", "title": "NgModule API", "tooltip": "Understand the details of NgModules." }, { "url": "guide/ngmodule-faq", "title": "NgModule FAQs", "tooltip": "Answers to frequently asked questions about NgModules." } ] }, { "title": "Observables & RxJS", "tooltip": "Using observables for message passing in Angular.", "children": [ { "url": "guide/observables", "title": "Observables overview", "tooltip": "Using observables to pass values synchronously or asynchronously." }, { "url": "guide/rx-library", "title": "The RxJS library", "tooltip": "A library for reactive programming using observables to compose asynchronous or callback-based code." }, { "url": "guide/observables-in-angular", "title": "Observables in Angular", "tooltip": "How Angular subsystems use and expect observables." }, { "url": "guide/practical-observable-usage", "title": "Practical usage", "tooltip": "Domains in which observables are particularly useful." }, { "url": "guide/comparing-observables", "title": "Compare to other techniques", "tooltip": "How observables compare to promises and other message passing techniques." } ] }, { "title": "Dependency injection", "tooltip": "Using dependency injection in Angular.", "children": [ { "url": "guide/dependency-injection-in-action", "title": "DI in action", "tooltip": "Techniques for dependency injection." } ] } ] }, { "title": "CLI Command Reference", "tooltip": "Angular CLI command reference.", "children": [ { "title": "Overview", "tooltip": "An introduction to the CLI tool, commands, and syntax.", "url": "cli" } ] }, { "title": "API reference", "tooltip": "Details of the Angular packages, classes, interfaces, and other types.", "url": "api" }, { "title": "Error reference", "tooltip": "Details of the errors that can be thrown by Angular.", "children": [ { "title": "Overview", "url": "errors", "hidden": true } ] }, { "title": "Extended diagnostic reference", "tooltip": "Details of extended diagnostics that can be emitted by the Angular compiler", "children": [ { "url": "extended-diagnostics", "title": "Extended Diagnostics Overview", "tooltip": "Overview of extended diagnostics, what they are, and how to configure them." } ] }, { "title": "Example applications", "tooltip": "List of all of the example applications in the Angular documentation.", "url": "guide/example-apps-list" }, { "url": "guide/glossary", "title": "Angular glossary", "tooltip": "Brief definitions of the most important words in the Angular vocabulary." }, { "title": "Angular coding style", "tooltip": "Summaries of Angular syntax, coding, and doc styles.", "children": [ { "url": "guide/cheatsheet", "title": "Quick reference", "tooltip": "A quick guide to common Angular coding techniques." }, { "url": "guide/styleguide", "title": "Coding style guide", "tooltip": "Guidelines for writing Angular code." } ] } ] }, { "title": "Documentation contributors guide", "tooltip": "Describes how to contribute to the Angular documentation.", "children": [ { "url": "guide/contributors-guide-overview", "title": "Overview", "tooltip": "Provides an overview of how to contribute to Angular's documentation." }, { "title": "Common documentation maintenance tasks", "tooltip": "Describes the Angular documentation maintenance tasks.", "children": [ { "url": "guide/doc-tasks", "title": "Overview", "tooltip": "Overview of common tasks used to maintain angular.io." }, { "url": "guide/reviewing-content", "title": "Review documentation", "tooltip": "Keep Angular content up-to-date by reviewing topics for accuracy." }, { "url": "guide/updating-search-keywords", "title": "Update search keywords", "tooltip": "Help users find the content they need by adding additional search keywords." } ] }, { "title": "Documentation editing workflow", "tooltip": "Describes the documentation editing processes in detail.", "children": [ { "url": "guide/doc-update-overview", "title": "Overview", "tooltip": "An overview of documentation authoring process." }, { "url": "guide/doc-prepare-to-edit", "title": "Prepare to edit documentation", "tooltip": "Set up your development system to edit angular.io." }, { "url": "guide/doc-select-issue", "title": "Select a documentation issue", "tooltip": "The procedures used to identify and select a documentation issue." }, { "url": "guide/doc-update-start", "title": "Start to edit a documentation topic", "tooltip": "The procedures used to start editing a documentation topic." }, { "url": "guide/doc-editing", "title": "Make and save changes to a documentation topic", "tooltip": "Making and saving changes to a documentation topic." }, { "url": "guide/docs-lint-errors", "title": "Resolve documentation linter messages", "tooltip": "More information about documentation lint errors." }, { "url": "guide/doc-build-test", "title": "Build and test documentation", "tooltip": "Building and testing documentation." }, { "url": "guide/doc-pr-prep", "title": "Prepare documentation for a pull request", "tooltip": "Preparing documentation for a pull request." }, { "url": "guide/doc-pr-open", "title": "Open a documentation pull request", "tooltip": "Opening a documentation pull request." }, { "url": "guide/doc-pr-update", "title": "Update a documentation pull request in progress", "tooltip": "Updating a documentation pull request in progress." }, { "url": "guide/doc-edit-finish", "title": "Finish up a documentation pull request", "tooltip": "Finishing up a documentation pull request." } ] }, { "url": "guide/docs-style-guide", "title": "Documentation style guide", "tooltip": "Style guide for documentation authors." }, { "url": "guide/localizing-angular", "title": "Angular doc localization guidelines", "tooltip": "Learn about the guidelines for localizing Angular documentation." }, { "url": "guide/localized-documentation", "title": "Localized documentation", "tooltip": "A list of localized versions of the Angular documentation", "hidden": true } ] } ], "Footer": [ { "title": "Resources", "children": [ { "url": "about", "title": "About", "tooltip": "Angular contributors." }, { "url": "resources", "title": "Resource listing", "tooltip": "Angular tools, training, and blogs from around the web." }, { "url": "presskit", "title": "Press kit", "tooltip": "Press contacts, logos, and branding." }, { "url": "https://blog.angular.io/", "title": "Blog", "tooltip": "Angular Blog" } ] }, { "title": "Help", "children": [ { "url": "https://stackoverflow.com/questions/tagged/angular", "title": "Stack Overflow", "tooltip": "Stack Overflow: where the community answers your technical Angular questions." }, { "url": "https://discord.gg/angular", "title": "Join Discord", "tooltip": "Join the discussions at Angular Community Discord server." }, { "url": "https://gitter.im/angular/angular", "title": "Gitter", "tooltip": "Chat about Angular with other birds of a feather." }, { "url": "https://github.com/angular/angular/issues", "title": "Report Issues", "tooltip": "Post issues and suggestions on GitHub." }, { "url": "https://github.com/angular/code-of-conduct/blob/main/CODE_OF_CONDUCT.md", "title": "Code of Conduct", "tooltip": "Treating each other with respect." }, { "url": "https://policies.google.com/privacy", "title": "Privacy Policy", "tooltip": "Learn about Google's privacy policy." } ] }, { "title": "Community", "children": [ { "url": "events", "title": "Events", "tooltip": "Angular events around the world." }, { "url": "https://www.meetup.com/topics/angularjs/", "title": "Meetups", "tooltip": "Attend a meetup and learn from fellow developers." }, { "url": "https://twitter.com/angular", "title": "Twitter", "tooltip": "Twitter" }, { "url": "https://github.com/angular/angular", "title": "GitHub", "tooltip": "GitHub" }, { "url": "contribute", "title": "Contribute", "tooltip": "Contribute to Angular" } ] }, { "title": "Languages", "children": [ { "title": "简体中文版", "url": "https://angular.cn/" }, { "title": "正體中文版", "url": "https://angular.tw/" }, { "title": "日本語版", "url": "https://angular.jp/" }, { "title": "한국어", "url": "https://angular.kr/" }, { "title": "Complete language list", "url": "guide/localized-documentation" } ] } ] }