angular__angular/aio/content/navigation.json

{
  "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/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/universal",
          "title": "Server-side rendering",
          "tooltip": "Render HTML server-side with Angular Universal."
        },
        {
          "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/signals",
              "title": "Signals",
              "tooltip": "Angular signals for optimized change detection"
            },
            {
              "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-modules",
                  "title": "Intro to modules",
                  "tooltip": "About NgModules."
                },
                {
                  "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/architecture-next-steps",
                  "title": "Next steps",
                  "tooltip": "Beyond the basics."
                },
                {
                  "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."
                }
              ]
            },
            {
              "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/universal-ngmodule",
                  "title": "Server-side rendering with NgModule applications",
                  "tooltip": "Render HTML server-side with Angular Universal (using NgModule)."
                },
                {
                  "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"
        }
      ]
    }
  ]
}