> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/angular/angular/llms.txt
> Use this file to discover all available pages before exploring further.

# Angular Documentation

> Build modern web applications with confidence using Angular's powerful development platform

<div className="relative overflow-hidden dark:bg-[#0f1117] bg-white py-20">
  <div className="max-w-7xl mx-auto px-6 lg:px-8">
    <div className="lg:grid lg:grid-cols-12 lg:gap-8 items-center">
      <div className="lg:col-span-7">
        <h1 className="text-5xl sm:text-6xl font-bold dark:text-gray-100 text-gray-900 mb-6">
          Build the web of tomorrow with Angular
        </h1>

        <p className="text-lg sm:text-xl dark:text-gray-400 text-gray-600 max-w-2xl mb-8">
          Angular is a modern web development platform for building fast, scalable applications with TypeScript. Ship production-ready apps with confidence using a complete framework built by Google.
        </p>

        <div className="flex flex-wrap gap-4">
          <a href="/quickstart" className="inline-flex items-center px-6 py-3 rounded-lg bg-[#f20c5d] text-white font-semibold hover:bg-[#d10a4e] transition-colors no-underline">
            Get Started

            <svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
          </a>

          <a href="/api/core/overview" className="inline-flex items-center px-6 py-3 rounded-lg border dark:border-[#27272a] border-gray-200 dark:bg-[#1a1d27] bg-gray-50 dark:text-gray-100 text-gray-900 font-semibold dark:hover:border-[#f20c5d] hover:border-[#f20c5d] transition-colors no-underline">
            API Reference
          </a>
        </div>
      </div>

      <div className="hidden lg:block lg:col-span-5">
        <img src="https://media.brand.dev/12ad83da-c97b-46cb-9c0f-bd6b98a37a84.svg" alt="Angular logo" noZoom className="w-full h-auto max-w-md mx-auto" />
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-semibold dark:text-white text-gray-900 mb-4">Quick start</h2>
  <p className="text-base dark:text-gray-400 text-gray-600 mb-8">Get up and running with Angular in minutes</p>

  <Steps>
    <Step title="Install the Angular CLI">
      Install the Angular CLI globally to scaffold and manage Angular projects:

      <CodeGroup>
        ```bash npm theme={null}
        npm install -g @angular/cli
        ```

        ```bash yarn theme={null}
        yarn global add @angular/cli
        ```

        ```bash pnpm theme={null}
        pnpm add -g @angular/cli
        ```
      </CodeGroup>
    </Step>

    <Step title="Create a new workspace">
      Use the CLI to create a new Angular workspace and application:

      ```bash theme={null}
      ng new my-app
      cd my-app
      ```

      <Note>The CLI will prompt you to select routing and stylesheet format options.</Note>
    </Step>

    <Step title="Start the development server">
      Launch your application in development mode:

      ```bash theme={null}
      ng serve
      ```

      Navigate to `http://localhost:4200/` in your browser. The application will automatically reload when you make changes to source files.
    </Step>

    <Step title="Create your first component">
      Generate a new component using the CLI:

      ```bash theme={null}
      ng generate component my-component
      ```

      This creates the component files and updates your module automatically. Start building your application by editing the component template and logic.
    </Step>
  </Steps>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-semibold dark:text-white text-gray-900 mb-4">Explore by topic</h2>
  <p className="text-base dark:text-gray-400 text-gray-600 mb-8">Learn Angular from the ground up or dive into specific features</p>

  <CardGroup cols={2}>
    <Card title="Core Concepts" icon="cube" href="/concepts/architecture">
      Master components, dependency injection, templates, and the Angular architecture
    </Card>

    <Card title="Routing" icon="route" href="/routing/router-overview">
      Build single-page applications with Angular's powerful router and navigation
    </Card>

    <Card title="Forms" icon="rectangle-list" href="/forms/overview">
      Create reactive and template-driven forms with built-in validation
    </Card>

    <Card title="HTTP Client" icon="globe" href="/http/http-client">
      Make HTTP requests and interact with REST APIs using Angular's HttpClient
    </Card>

    <Card title="Signals" icon="signal" href="/advanced/signals">
      Use Angular's reactive primitives for fine-grained reactivity and better performance
    </Card>

    <Card title="Server-Side Rendering" icon="server" href="/advanced/ssr">
      Improve performance and SEO with server-side rendering and hydration
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-semibold dark:text-white text-gray-900 mb-4">Key features</h2>
  <p className="text-base dark:text-gray-400 text-gray-600 mb-8">Everything you need to build modern web applications</p>

  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div className="dark:bg-[#1a1d27] bg-gray-50 rounded-lg p-6 border dark:border-[#27272a] border-gray-200">
      <div className="flex items-start">
        <div className="flex-shrink-0">
          <svg className="w-6 h-6 text-[#f20c5d]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>

        <div className="ml-4">
          <h3 className="text-lg font-semibold dark:text-white text-gray-900">TypeScript-First</h3>

          <p className="mt-2 text-sm dark:text-gray-400 text-gray-600">
            Built with TypeScript for enhanced developer experience, better tooling, and type safety throughout your application.
          </p>
        </div>
      </div>
    </div>

    <div className="dark:bg-[#1a1d27] bg-gray-50 rounded-lg p-6 border dark:border-[#27272a] border-gray-200">
      <div className="flex items-start">
        <div className="flex-shrink-0">
          <svg className="w-6 h-6 text-[#f20c5d]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>

        <div className="ml-4">
          <h3 className="text-lg font-semibold dark:text-white text-gray-900">High Performance</h3>

          <p className="mt-2 text-sm dark:text-gray-400 text-gray-600">
            Optimized change detection, ahead-of-time compilation, and tree-shaking ensure your apps are fast and efficient.
          </p>
        </div>
      </div>
    </div>

    <div className="dark:bg-[#1a1d27] bg-gray-50 rounded-lg p-6 border dark:border-[#27272a] border-gray-200">
      <div className="flex items-start">
        <div className="flex-shrink-0">
          <svg className="w-6 h-6 text-[#f20c5d]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
          </svg>
        </div>

        <div className="ml-4">
          <h3 className="text-lg font-semibold dark:text-white text-gray-900">Component Architecture</h3>

          <p className="mt-2 text-sm dark:text-gray-400 text-gray-600">
            Build reusable, maintainable UI components with a clear separation of concerns and encapsulated styles.
          </p>
        </div>
      </div>
    </div>

    <div className="dark:bg-[#1a1d27] bg-gray-50 rounded-lg p-6 border dark:border-[#27272a] border-gray-200">
      <div className="flex items-start">
        <div className="flex-shrink-0">
          <svg className="w-6 h-6 text-[#f20c5d]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
          </svg>
        </div>

        <div className="ml-4">
          <h3 className="text-lg font-semibold dark:text-white text-gray-900">Powerful CLI</h3>

          <p className="mt-2 text-sm dark:text-gray-400 text-gray-600">
            Scaffold projects, generate components, and build optimized production bundles with Angular's comprehensive CLI.
          </p>
        </div>
      </div>
    </div>

    <div className="dark:bg-[#1a1d27] bg-gray-50 rounded-lg p-6 border dark:border-[#27272a] border-gray-200">
      <div className="flex items-start">
        <div className="flex-shrink-0">
          <svg className="w-6 h-6 text-[#f20c5d]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
          </svg>
        </div>

        <div className="ml-4">
          <h3 className="text-lg font-semibold dark:text-white text-gray-900">Built-in Security</h3>

          <p className="mt-2 text-sm dark:text-gray-400 text-gray-600">
            Protection against XSS, CSRF, and other common web vulnerabilities with Angular's built-in sanitization.
          </p>
        </div>
      </div>
    </div>

    <div className="dark:bg-[#1a1d27] bg-gray-50 rounded-lg p-6 border dark:border-[#27272a] border-gray-200">
      <div className="flex items-start">
        <div className="flex-shrink-0">
          <svg className="w-6 h-6 text-[#f20c5d]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
          </svg>
        </div>

        <div className="ml-4">
          <h3 className="text-lg font-semibold dark:text-white text-gray-900">Testing Tools</h3>

          <p className="mt-2 text-sm dark:text-gray-400 text-gray-600">
            Comprehensive testing utilities and integration with popular testing frameworks like Jasmine and Karma.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-semibold dark:text-white text-gray-900 mb-4">Resources</h2>
  <p className="text-base dark:text-gray-400 text-gray-600 mb-8">Tools and resources for Angular developers</p>

  <CardGroup cols={3}>
    <Card title="Angular CLI" icon="terminal" href="/cli/overview">
      Command-line interface for Angular development
    </Card>

    <Card title="Style Guide" icon="book-open" href="/best-practices/style-guide">
      Best practices and coding conventions
    </Card>

    <Card title="Testing Guide" icon="flask" href="/advanced/testing">
      Learn how to test Angular applications
    </Card>
  </CardGroup>
</div>

<div className="mt-20 mb-16 max-w-5xl mx-auto px-6">
  <div className="dark:bg-[#1a1d27] bg-gray-50 rounded-2xl p-8 md:p-12 border dark:border-[#27272a] border-gray-200">
    <div className="max-w-3xl">
      <h2 className="text-3xl font-semibold dark:text-white text-gray-900 mb-4">Ready to start building?</h2>

      <p className="text-lg dark:text-gray-400 text-gray-600 mb-6">
        Join millions of developers using Angular to build fast, reliable web applications. Get started in minutes with our comprehensive guides and tutorials.
      </p>

      <a href="/quickstart" className="inline-flex items-center px-6 py-3 rounded-lg bg-[#f20c5d] text-white font-semibold hover:bg-[#d10a4e] transition-colors no-underline">
        Start Building Now

        <svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
        </svg>
      </a>
    </div>
  </div>
</div>