<docs-decorative-header title="What is Angular?" imgSrc="adev/src/assets/images/globe.svg" gradientBackground="true">
  Angular is a web framework that empowers<br/>
  developers to build fast, reliable applications that users love.
</docs-decorative-header>

<div style="margin: 2em">
  Maintained by a dedicated team at Google, Angular provides a broad suite of tools, APIs, and
  libraries to simplify and streamline your development workflow. Angular gives you
  a solid platform on which to build fast, reliable applications that scale with both the size of
  your team and the size of your codebase. Angular.dev is the official home for Angular documentation.
</div>

<docs-nav-card title="Want to see some code?" iconImgSrc="adev/src/assets/icons/star.svg">
  <docs-nav-link title="Essentials" iconName="docs" href="essentials" iconImgSrc="adev/src/assets/icons/docs.svg">
    An overview of what it's like to use Angular
  </docs-nav-link>
  <docs-nav-link title="Tutorials" iconName="code"  href="tutorials" iconImgSrc="adev/src/assets/icons/tutorials.svg">
    Step-by-step instructions in your browser
  </docs-nav-link>
</docs-nav-card>

<docs-card-container headerTitle="Features that power your development" headerImgSrc="adev/src/assets/images/learn-angular-browser-bw.svg">
  <docs-card title="Components" href="essentials/components" link="Get started with Components" iconImgSrc="adev/src/assets/icons/components.svg">
    Angular components make it easy to split your code into well-encapsulated parts.
  </docs-card>
  <docs-card title="Angular Signals" href="essentials/signals" link="Explore Angular Signals" titleIconName="sensors" iconImgSrc="adev/src/assets/icons/signals.svg">
    Our fine-grained reactivity model, combined with compile-time optimizations, simplifies development and helps build faster apps by default.
  </docs-card>
  <docs-card title="Server-side rendering" href="guide/ssr" link="Read about SSR" iconImgSrc="adev/src/assets/icons/ssr.svg">
    Angular supports both server-side rendering (SSR) and static site generation (SSG) along with full DOM hydration.
  </docs-card>
  <docs-card title="Dependency injection" href="essentials/dependency-injection" link="Explore Dependency Injection" iconImgSrc="adev/src/assets/icons/di.svg">
    Easily share code across components throughout your entire application.
  </docs-card>
  <docs-card title="Angular Routing" href="guide/routing" link="Explore Angular Routing" iconImgSrc="adev/src/assets/icons/routing.svg">
    Provides a feature-rich navigation toolkit, including support for route guards, data resolution, lazy-loading, and much more.
  </docs-card>
  <docs-card title="Forms in Angular" href="guide/forms" link="Explore Forms" iconImgSrc="adev/src/assets/icons/forms.svg">
    Provides a standardized system for form participation and validation.
  </docs-card>
</docs-card-container>

<docs-card-container headerTitle="Develop applications faster than ever" headerImgSrc="adev/src/assets/images/browser-bolt.svg">
  <docs-card title="CLI" href="tools/cli" link="Angular CLI" iconImgSrc="adev/src/assets/icons/cli.svg">
    Angular CLI gets your project running in under a minute with the commands you need to grow into a deployed production application.
  </docs-card>
  <docs-card title="DevTools" href="tools/devtools" link="Angular DevTools" iconImgSrc="adev/src/assets/icons/dev-tools.svg">
    Angular DevTools sits alongside your browser's developer tools. It helps debug and analyze your app, including a component tree inspector, dependency injection tree view, and custom performance profiling flame chart.
  </docs-card>
  <docs-card title="ng update" href="update" link="ng update" iconImgSrc="adev/src/assets/icons/ng-update.svg">
    Angular CLI's `ng update` runs automated code transformations that automatically handle routine breaking changes, dramatically simplifying major version updates. Keeping up with the latest version keeps your app as fast and secure as possible.
  </docs-card>
  <docs-card title="Language Service" href="tools/language-service" link="Language Service" iconImgSrc="adev/src/assets/icons/language-service.svg">
    Angular's IDE language service powers code completion, navigation, refactoring, and real-time diagnostics in your favorite editor.
  </docs-card>
</docs-card-container>

<docs-card-container headerTitle="Ship with confidence" headerImgSrc="adev/src/assets/images/rocket.svg">
  <docs-card title="Verified commit-by-commit against Google's colossal monorepo" href="https://cacm.acm.org/research/why-google-stores-billions-of-lines-of-code-in-a-single-repository/" link="Learn about Google's monorepo" titleIconName="sensors">
    <p>Every Angular commit is checked against hundreds of thousands of tests in Google's internal code repository, representing countless real-world scenarios.</p>
    <p>Angular is committed to stability for some of Google’s largest products, including Google Cloud. This commitment ensures changes are well-tested, backwards compatible, and include migration tools whenever possible.</p>
  </docs-card>
  <docs-card title="Clear support policies and predictable release schedule" href="reference/releases" link="Versioning & releasing" titleIconName="sensors">
    Angular's predictable, time-based release schedule gives your organization confidence in the stability and backwards compatibility of the framework. Long Term Support (LTS) windows make sure you get critical security fixes when you need them. First-party update tools, guides and automated migration schematics help keep your apps up-to-date with the latest advancements to the framework and the web platform.
  </docs-card>
</docs-card-container>

<docs-card-container headerTitle="Works at any scale" headerImgSrc="adev/src/assets/images/servers.svg">
  <docs-card title="Reach users everywhere with internationalization support" href="guide/i18n" link="Internationalization" titleIconName="sensors">
    Angular's internationalization features handle message translations and formatting, including
    support for unicode standard ICU syntax.
  </docs-card>
  <docs-card title="Protect your users with security by default" href="best-practices/security" link="Security" titleIconName="sensors">
    In collaboration with Google's world-class security engineers, Angular aims to make development
    safe by default. Built-in security features, including HTML sanitization and
    trusted type support, help protect your users from common vulnerabilities like
    cross-site scripting and cross-site request forgery.
  </docs-card>
  <docs-card title="Keep large teams productive with Vite and esbuild" href="tools/cli/build-system-migration" link="ESBuild and Vite" titleIconName="sensors">
    Angular CLI includes a fast, modern build pipeline using Vite and ESBuild. Developers report
    building projects with hundreds of thousands of lines of code in less than a minute.
  </docs-card>
  <docs-card title="Proven in some of Google's largest web apps" titleIconName="sensors">
    Large Google products build on top of Angular's architecture and help develop new features that
    further improve Angular's scalability, from [Google Fonts](https://fonts.google.com/) to [Google Cloud](https://console.cloud.google.com).
  </docs-card>
</docs-card-container>

<docs-card-container headerTitle="Open-source first" headerImgSrc="adev/src/assets/images/open-source.svg">
  <docs-card title="Made in the open on GitHub" href="https://github.com/angular/angular" link="Star our GitHub" titleIconName="sensors">
    Curious what we’re working on? Every PR and commit is available on our GitHub. Run into an issue or bug? We triage GitHub issues regularly to ensure we’re responsive and engaged with our community, and solving the real world problems you’re facing.
  </docs-card>
  <docs-card title="Built with transparency" href="roadmap" link="Read our public roadmap" titleIconName="sensors">
    Our team publishes a public roadmap of our current and future work and values your feedback. We publish Request for Comments (RFCs) to collect feedback on larger feature changes and ensure the community voice is heard while shaping the future direction of Angular.
  </docs-card>
</docs-card-container>

<docs-card-container headerTitle="A thriving community" headerImgSrc="adev/src/assets/images/community.svg">
  <docs-card title="Courses, blogs and resources" href="https://devlibrary.withgoogle.com/products/angular?sort=added" link="Check out DevLibrary" titleIconName="sensors">
    Our community is composed of talented developers, writers, instructors, podcasters, and more. The Google for Developers library is just a sample of the high quality resources available for new and experienced developers to continue developing.
  </docs-card>
  <docs-card title="Open Source" href="https://github.com/angular/angular/blob/main/CONTRIBUTING.md" link="Contribute to Angular" titleIconName="sensors">
    We are thankful for the open source contributors who make Angular a better framework for everyone. From fixing a typo in the docs, to adding major features, we encourage anyone interested to get started on our GitHub.
  </docs-card>
  <docs-card title="Community partnerships" href="https://developers.google.com/community/experts/directory?specialization=angular" link="Meet the Angular GDEs" titleIconName="sensors">
    Our team partners with individuals, educators, and enterprises to ensure we consistently are supporting developers. Angular Google Developer Experts (GDEs) represent community leaders around the world educating, organizing, and developing with Angular. Enterprise partnerships help ensure that Angular scales well for technology industry leaders.
  </docs-card>
  <docs-card title="Partnering with other Google technologies" titleIconName="sensors">
    <p>Angular partners closely with other Google technologies and teams to improve the web.</p>
    <p>Our ongoing partnership with Chrome’s Aurora actively explores improvements to user experience across the web, developing built-in performance optimizations like <code>NgOptimizedImage</code> and improvements to Angular’s Core Web Vitals.</p>
    <p>We are also working with <a href="https://firebase.google.com/" target="_blank">Firebase</a>, <a href="https://www.tensorflow.org/" target="_blank">Tensorflow</a>, <a href="https://flutter.dev/" target="_blank">Flutter</a>, <a href="https://m3.material.io/" target="_blank">Material Design</a>, and <a href="https://cloud.google.com/" target="_blank">Google Cloud</a> to ensure we provide meaningful integrations across the developer workflow.</p>
  </docs-card>
</docs-card-container>

<docs-callout title="Join the momentum!">
  <docs-pill-row>
    <docs-pill href="roadmap" title="Read Angular's roadmap"/>
    <docs-pill href="playground" title="Try out our playground"/>
    <docs-pill href="tutorials" title="Learn with tutorials"/>
    <docs-pill href="https://youtube.com/playlist?list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF" title="Watch our YouTube course"/>
    <docs-pill href="api" title="Reference our APIs"/>
  </docs-pill-row>
</docs-callout>
