# Table of Contents - [What is Angular? • Angular](#what-is-angular-angular) - [Home • Angular](#home-angular) - [Get Started • Angular](#get-started-angular) - [Angular AI Tutor • Angular](#angular-ai-tutor-angular) - [Design Patterns • Angular](#design-patterns-angular) - [LLM prompts and AI IDE setup • Angular](#llm-prompts-and-ai-ide-setup-angular) - [Angular CLI MCP Server setup • Angular](#angular-cli-mcp-server-setup-angular) - [AUTO_STYLE • Angular](#auto-style-angular) - [AnimateChildOptions • Angular](#animatechildoptions-angular) - [AnimateTimings • Angular](#animatetimings-angular) - [AnimationAnimateChildMetadata • Angular](#animationanimatechildmetadata-angular) - [AnimationFactory • Angular](#animationfactory-angular) - [AnimationAnimateRefMetadata • Angular](#animationanimaterefmetadata-angular) - [AnimationAnimateMetadata • Angular](#animationanimatemetadata-angular) - [AnimationDriver • Angular](#animationdriver-angular) - [MockAnimationPlayer • Angular](#mockanimationplayer-angular) - [NoopAnimationDriver • Angular](#noopanimationdriver-angular) - [AnimationBuilder • Angular](#animationbuilder-angular) - [MockAnimationDriver • Angular](#mockanimationdriver-angular) - [AnimationEvent • Angular](#animationevent-angular) - [AccordionContent • Angular](#accordioncontent-angular) - [AccordionPanel • Angular](#accordionpanel-angular) - [AccordionTrigger • Angular](#accordiontrigger-angular) - [AccordionGroup • Angular](#accordiongroup-angular) - [ComboboxDialog • Angular](#comboboxdialog-angular) - [ComboboxInput • Angular](#comboboxinput-angular) - [ComboboxPopup • Angular](#comboboxpopup-angular) - [AnimationGroupMetadata • Angular](#animationgroupmetadata-angular) - [ComboboxPopupContainer • Angular](#comboboxpopupcontainer-angular) - [Combobox • Angular](#combobox-angular) - [GridRow • Angular](#gridrow-angular) - [Option • Angular](#option-angular) - [ToolbarWidgetGroup • Angular](#toolbarwidgetgroup-angular) - [AnimationKeyframesSequenceMetadata • Angular](#animationkeyframessequencemetadata-angular) - [MenuContent • Angular](#menucontent-angular) - [GridCell • Angular](#gridcell-angular) - [Grid • Angular](#grid-angular) - [Listbox • Angular](#listbox-angular) - [AnimationMetadata • Angular](#animationmetadata-angular) - [TabContent • Angular](#tabcontent-angular) - [MenuBar • Angular](#menubar-angular) - [Tabs • Angular](#tabs-angular) - [ToolbarWidget • Angular](#toolbarwidget-angular) - [Toolbar • Angular](#toolbar-angular) - [GridCellWidget • Angular](#gridcellwidget-angular) - [Tree • Angular](#tree-angular) - [AnimationMetadataType • Angular](#animationmetadatatype-angular) - [Tab • Angular](#tab-angular) - [TabPanel • Angular](#tabpanel-angular) - [Menu • Angular](#menu-angular) - [MenuItem • Angular](#menuitem-angular) - [MenuTrigger • Angular](#menutrigger-angular) - [TreeItem • Angular](#treeitem-angular) - [TreeItemGroup • Angular](#treeitemgroup-angular) - [AnimationOptions • Angular](#animationoptions-angular) - [AnimationQueryMetadata • Angular](#animationquerymetadata-angular) - [TabList • Angular](#tablist-angular) - [AnimationReferenceMetadata • Angular](#animationreferencemetadata-angular) - [AnimationQueryOptions • Angular](#animationqueryoptions-angular) - [AnimationStaggerMetadata • Angular](#animationstaggermetadata-angular) - [AnimationPlayer • Angular](#animationplayer-angular) - [AnimationSequenceMetadata • Angular](#animationsequencemetadata-angular) - [AnimationStateMetadata • Angular](#animationstatemetadata-angular) - [AnimationTriggerMetadata • Angular](#animationtriggermetadata-angular) - [AnimationTransitionMetadata • Angular](#animationtransitionmetadata-angular) - [AnimationStyleMetadata • Angular](#animationstylemetadata-angular) - [animate • Angular](#animate-angular) - [animation • Angular](#animation-angular) - [animateChild • Angular](#animatechild-angular) - [NoopAnimationPlayer • Angular](#noopanimationplayer-angular) - [query • Angular](#query-angular) - [group • Angular](#group-angular) - [ProtractorHarnessEnvironmentOptions • Angular](#protractorharnessenvironmentoptions-angular) - [sequence • Angular](#sequence-angular) - [WebDriverHarnessEnvironmentOptions • Angular](#webdriverharnessenvironmentoptions-angular) - [keyframes • Angular](#keyframes-angular) - [waitForAngularReady • Angular](#waitforangularready-angular) - [ProtractorHarnessEnvironment • Angular](#protractorharnessenvironment-angular) - [TestbedHarnessEnvironmentOptions • Angular](#testbedharnessenvironmentoptions-angular) - [SeleniumWebDriverHarnessEnvironment • Angular](#seleniumwebdriverharnessenvironment-angular) - [state • Angular](#state-angular) - [stagger • Angular](#stagger-angular) - [ProtractorElement • Angular](#protractorelement-angular) - [TestbedHarnessEnvironment • Angular](#testbedharnessenvironment-angular) - [style • Angular](#style-angular) - [SeleniumWebDriverElement • Angular](#seleniumwebdriverelement-angular) - [UnitTestElement • Angular](#unittestelement-angular) - [useAnimation • Angular](#useanimation-angular) - [AsyncPredicate • Angular](#asyncpredicate-angular) - [AsyncOptionPredicate • Angular](#asyncoptionpredicate-angular) - [AutoChangeDetectionStatus • Angular](#autochangedetectionstatus-angular) - [transition • Angular](#transition-angular) - [ComponentHarnessConstructor • Angular](#componentharnessconstructor-angular) - [BaseHarnessFilters • Angular](#baseharnessfilters-angular) - [EventData • Angular](#eventdata-angular) - [HarnessQuery • Angular](#harnessquery-angular) - [ElementDimensions • Angular](#elementdimensions-angular) - [trigger • Angular](#trigger-angular) - [TextOptions • Angular](#textoptions-angular) - [handleAutoChangeDetectionStatus • Angular](#handleautochangedetectionstatus-angular) - [CDK_DRAG_PREVIEW • Angular](#cdk-drag-preview-angular) - [CDK_DROP_LIST • Angular](#cdk-drop-list-angular) - [CDK_DRAG_PLACEHOLDER • Angular](#cdk-drag-placeholder-angular) - [CDK_DRAG_CONFIG • Angular](#cdk-drag-config-angular) - [ModifierKeys • Angular](#modifierkeys-angular) - [CDK_DROP_LIST_GROUP • Angular](#cdk-drop-list-group-angular) - [LocatorFnResult • Angular](#locatorfnresult-angular) - [HarnessLoader • Angular](#harnessloader-angular) - [CdkDragEnter • Angular](#cdkdragenter-angular) - [CDK_DRAG_HANDLE • Angular](#cdk-drag-handle-angular) - [CdkDragExit • Angular](#cdkdragexit-angular) - [DragConstrainPosition • Angular](#dragconstrainposition-angular) - [manualChangeDetection • Angular](#manualchangedetection-angular) - [TestKey • Angular](#testkey-angular) - [ComponentHarness • Angular](#componentharness-angular) - [CdkDragMove • Angular](#cdkdragmove-angular) - [CdkDragDrop • Angular](#cdkdragdrop-angular) - [CdkDragSortEvent • Angular](#cdkdragsortevent-angular) - [CdkDragStart • Angular](#cdkdragstart-angular) - [stopHandlingAutoChangeDetectionStatus • Angular](#stophandlingautochangedetectionstatus-angular) - [HarnessPredicate • Angular](#harnesspredicate-angular) - [CdkDragHandle • Angular](#cdkdraghandle-angular) - [CdkDragPreview • Angular](#cdkdragpreview-angular) - [CdkDropListGroup • Angular](#cdkdroplistgroup-angular) - [DropListOrientation • Angular](#droplistorientation-angular) - [DragDrop • Angular](#dragdrop-angular) - [DragStartDelay • Angular](#dragstartdelay-angular) - [CdkDragRelease • Angular](#cdkdragrelease-angular) - [ContentContainerComponentHarness • Angular](#contentcontainercomponentharness-angular) - [copyArrayItem • Angular](#copyarrayitem-angular) - [Point • Angular](#point-angular) - [DragDropConfig • Angular](#dragdropconfig-angular) - [DragAxis • Angular](#dragaxis-angular) - [CdkDragPlaceholder • Angular](#cdkdragplaceholder-angular) - [createDragRef • Angular](#createdragref-angular) - [DragRefConfig • Angular](#dragrefconfig-angular) - [transferArrayItem • Angular](#transferarrayitem-angular) - [CdkDragEnd • Angular](#cdkdragend-angular) - [DragDropModule • Angular](#dragdropmodule-angular) - [parallel • Angular](#parallel-angular) - [PreviewContainer • Angular](#previewcontainer-angular) - [createDropListRef • Angular](#createdroplistref-angular) - [LocatorFactory • Angular](#locatorfactory-angular) - [TestElement • Angular](#testelement-angular) - [moveItemInArray • Angular](#moveiteminarray-angular) - [HarnessEnvironment • Angular](#harnessenvironment-angular) - [CdkDropList • Angular](#cdkdroplist-angular) - [CdkDrag • Angular](#cdkdrag-angular) - [DropListRef • Angular](#droplistref-angular) - [DragRef • Angular](#dragref-angular) --- # What is Angular? • Angular Skip to main content menu menuDocs * Introduction * [What is Angular?](https://angular.dev/overview) * [Installation](https://angular.dev/installation) * Essentials * [Start coding! 🚀](https://angular.dev/tutorials/learn-angular) * In-depth Guides * Signals Updated * Components * Templates * Directives * Dependency Injection Updated * Routing Updated * Forms Updated * HTTP Client * Server-side & hybrid-rendering * Testing * Angular Aria New * Internationalization * Animations Updated * [Drag and drop](https://angular.dev/guide/drag-drop) * Build with AI New * [Get Started](https://angular.dev/ai) * [LLM prompts and AI IDE setup](https://angular.dev/ai/develop-with-ai) * [Design Patterns](https://angular.dev/ai/design-patterns) * [Angular CLI MCP Server setup](https://angular.dev/ai/mcp) * [Angular AI Tutor](https://angular.dev/ai/ai-tutor) * Developer Tools * Angular CLI * Libraries * DevTools * [Language Service](https://angular.dev/tools/language-service) * Best Practices * [Style Guide Updated](https://angular.dev/style-guide) * [Security](https://angular.dev/best-practices/security) * [Accessibility](https://angular.dev/best-practices/a11y) * [Unhandled errors in Angular](https://angular.dev/best-practices/error-handling) * Performance * [Keeping up-to-date](https://angular.dev/update) * Developer Events * [Angular v21 Release New](https://angular.dev/events/v21) * Extended Ecosystem * [NgModules](https://angular.dev/guide/ngmodules/overview) * Legacy Animations * Using RxJS with Angular * Service Workers & PWAs * [Web workers](https://angular.dev/ecosystem/web-workers) * [Custom build pipeline](https://angular.dev/ecosystem/custom-build-pipeline) * [Tailwind New](https://angular.dev/guide/tailwind) * [Angular Fire](https://github.com/angular/angularfire#readme) * [Google Maps](https://github.com/angular/components/tree/main/src/google-maps#readme) * [Google Pay](https://github.com/google-pay/google-pay-button#angular) * [YouTube player](https://github.com/angular/components/blob/main/src/youtube-player/README.md) * [Angular CDK](https://material.angular.dev/cdk/categories) * [Angular Material](https://material.angular.dev/) What is Angular? ================ Angular is a web framework that empowers developers to build fast, reliable applications that users love. 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. ###### Want to see some code? [### Essentials\ \ An overview of what it's like to use Angular](https://angular.dev/essentials) [### Tutorials\ \ Step-by-step instructions in your browser](https://angular.dev/tutorials) [Features that power your development](https://angular.dev/overview#features-that-power-your-development) ---------------------------------------------------------------------------------------------------------- [### Components\ \ Angular components make it easy to split your code into well-encapsulated parts.\ \ Get started with Components](https://angular.dev/essentials/components) [### Angular Signals\ \ Our fine-grained reactivity model, combined with compile-time optimizations, simplifies development and helps build faster apps by default.\ \ Explore Angular Signals](https://angular.dev/essentials/signals) [### Server-side rendering\ \ Angular supports both server-side rendering (SSR) and static site generation (SSG) along with full DOM hydration.\ \ Read about SSR](https://angular.dev/guide/ssr) [### Dependency injection\ \ Easily share code across components throughout your entire application.\ \ Explore Dependency Injection](https://angular.dev/essentials/dependency-injection) [### Angular Routing\ \ Provides a feature-rich navigation toolkit, including support for route guards, data resolution, lazy-loading, and much more.\ \ Explore Angular Routing](https://angular.dev/guide/routing) [### Forms in Angular\ \ Provides a standardized system for form participation and validation.\ \ Explore Forms](https://angular.dev/guide/forms) [Develop applications faster than ever](https://angular.dev/overview#develop-applications-faster-than-ever) ------------------------------------------------------------------------------------------------------------ [### CLI\ \ Angular CLI gets your project running in under a minute with the commands you need to grow into a deployed production application.\ \ Angular CLI](https://angular.dev/tools/cli) [### DevTools\ \ 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.\ \ Angular DevTools](https://angular.dev/tools/devtools) [### ng update\ \ 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.\ \ ng update](https://angular.dev/update) [### Language Service\ \ Angular's IDE language services powers code completion, navigation, refactoring, and real-time diagnostics in your favorite editor.\ \ Language Service](https://angular.dev/tools/language-service) [Ship with confidence](https://angular.dev/overview#ship-with-confidence) -------------------------------------------------------------------------- [### Verified commit-by-commit against Google's colossal monorepo\ \ Every Angular commit is checked against hundreds of thousands of tests in Google's internal code repository, representing countless real-world scenarios.\ \ 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.\ \ Learn about Google's monorepo](https://cacm.acm.org/research/why-google-stores-billions-of-lines-of-code-in-a-single-repository/) [### Clear support policies and predictable release schedule\ \ 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.\ \ Versioning & releasing](https://angular.dev/reference/releases) [Works at any scale](https://angular.dev/overview#works-at-any-scale) ---------------------------------------------------------------------- [### Reach users everywhere with internationalization support\ \ Angular's internationalization features handle message translations and formatting, including support for unicode standard ICU syntax.\ \ Internationalization](https://angular.dev/guide/i18n) [### Protect your users with security by default\ \ 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.\ \ Security](https://angular.dev/best-practices/security) [### Keep large teams productive with Vite and esbuild\ \ 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.\ \ ESBuild and Vite](https://angular.dev/tools/cli/build-system-migration) ### Proven in some of Google's largest web apps 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/) . [Open-source first](https://angular.dev/overview#open-source-first) -------------------------------------------------------------------- [### Made in the open on GitHub\ \ 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.\ \ Star our GitHub](https://github.com/angular/angular) [### Built with transparency\ \ 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.\ \ Read our public roadmap](https://angular.dev/roadmap) [A thriving community](https://angular.dev/overview#a-thriving-community) -------------------------------------------------------------------------- [### Courses, blogs and resources\ \ 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.\ \ Check out DevLibrary](https://devlibrary.withgoogle.com/products/angular?sort=added) [### Open Source\ \ 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.\ \ Contribute to Angular](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) [### Community partnerships\ \ 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.\ \ Meet the Angular GDEs](https://developers.google.com/community/experts/directory?specialization=angular) ### Partnering with other Google technologies Angular partners closely with other Google technologies and teams to improve the web. Our ongoing partnership with Chrome’s Aurora actively explores improvements to user experience across the web, developing built-in performance optimizations like `NgOptimizedImage` and improvements to Angular’s Core Web Vitals. We are also working with [Firebase](https://firebase.google.com/) , [Tensorflow](https://www.tensorflow.org/) , [Flutter](https://flutter.dev/) , [Material Design](https://m3.material.io/) , and [Google Cloud](https://cloud.google.com/) to ensure we provide meaningful integrations across the developer workflow. ### Join the momentum! --- # Home • Angular Skip to main content menu [Angular v21 is here!\ ====================\ \ 🕹️ Start your adventure](https://angular.dev/events/v21) The framework for building scalable web apps with confidence ------------------------------------------------------------ [Get Started](https://angular.dev/#learn-more) Productivity meets scalability ------------------------------ ### AI-forward Resources and integrations to supercharge your development with AI ### Opinionated & versatile Organized yet modular thanks to Angular components and dependency injection ### Reactive Fast state updates with fine-grained reactivity based on Angular Signals ### Fully featured Everything works together with Angular's first-party modules for forms, routing, and more When performance matters ------------------------ Trusted by millions to build fast, reliable applications that scale with the size of your team [Reactivity with signals makes it a breeze to manage your state\ \ Explore signals](https://angular.dev/guide/signals) [Meet your performance targets with SSR, SSG, hydration, and next generation deferred loading\ \ Learn about rendering strategies](https://angular.dev/guide/routing/rendering-strategies) Want to learn more? ------------------- [### New to Angular?\ \ Try our completely in browser tutorial lessons designed to give you hands on experience with Angular.\ \ Recommended for developers new to Angular looking to dive right into the code\ \ Start coding](https://angular.dev/tutorials/learn-angular) [### More of a reader?\ \ Our essentials guides are designed to help you understand Angular fundamentals in the time it would take to finish a cup of coffee (or tea).\ \ Recommended for developers with framework experience but want quick overview of concepts\ \ Angular concepts](https://angular.dev/essentials) [### Why Angular?\ \ Learn about Angular, its benefits, and if it's right for you.\ \ Recommended for developers seeking to learn more about the Angular framework\ \ About Angular](https://angular.dev/overview) [### Are you an LLM or curious about AI in Angular?\ \ Head over to our AI section to find prompts, strategies, best practices, examples, and more.\ \ Recommended for robots... and developers who want to get the most out of Angular and AI\ \ Angular + AI](https://angular.dev/ai) --- # Get Started • Angular Skip to main content menu menuDocs * Introduction * [What is Angular?](https://angular.dev/overview) * [Installation](https://angular.dev/installation) * Essentials * [Start coding! 🚀](https://angular.dev/tutorials/learn-angular) * In-depth Guides * Signals Updated * Components * Templates * Directives * Dependency Injection Updated * Routing Updated * Forms Updated * HTTP Client * Server-side & hybrid-rendering * Testing * Angular Aria New * Internationalization * Animations Updated * [Drag and drop](https://angular.dev/guide/drag-drop) * Build with AI New * [Get Started](https://angular.dev/ai) * [LLM prompts and AI IDE setup](https://angular.dev/ai/develop-with-ai) * [Design Patterns](https://angular.dev/ai/design-patterns) * [Angular CLI MCP Server setup](https://angular.dev/ai/mcp) * [Angular AI Tutor](https://angular.dev/ai/ai-tutor) * Developer Tools * Angular CLI * Libraries * DevTools * [Language Service](https://angular.dev/tools/language-service) * Best Practices * [Style Guide Updated](https://angular.dev/style-guide) * [Security](https://angular.dev/best-practices/security) * [Accessibility](https://angular.dev/best-practices/a11y) * [Unhandled errors in Angular](https://angular.dev/best-practices/error-handling) * Performance * [Keeping up-to-date](https://angular.dev/update) * Developer Events * [Angular v21 Release New](https://angular.dev/events/v21) * Extended Ecosystem * [NgModules](https://angular.dev/guide/ngmodules/overview) * Legacy Animations * Using RxJS with Angular * Service Workers & PWAs * [Web workers](https://angular.dev/ecosystem/web-workers) * [Custom build pipeline](https://angular.dev/ecosystem/custom-build-pipeline) * [Tailwind New](https://angular.dev/guide/tailwind) * [Angular Fire](https://github.com/angular/angularfire#readme) * [Google Maps](https://github.com/angular/components/tree/main/src/google-maps#readme) * [Google Pay](https://github.com/google-pay/google-pay-button#angular) * [YouTube player](https://github.com/angular/components/blob/main/src/youtube-player/README.md) * [Angular CDK](https://material.angular.dev/cdk/categories) * [Angular Material](https://material.angular.dev/) Build with AI Build with AI ============= Build AI-powered apps. Develop faster with AI. **HELPFUL:** Looking to get started with building in your favorite AI powered IDE? Check out our [prompt rules and best practices](https://angular.dev/ai/develop-with-ai) . Generative AI (GenAI) with large language models (LLMs) enables the creation of sophisticated and engaging application experiences, including personalized content, intelligent recommendations, media generation and comprehension, information summarization, and dynamic functionality. Developing features like these would have previously required deep domain expertise and significant engineering effort. However, new products and SDKs are lowering the barrier to entry. Angular is well-suited for integrating AI into your web application as a result of: * Angular's robust templating APIs enable the creation of dynamic, cleanly composed UIs made from generated content * Strong, signal-based architecture designed to dynamically manage data and state * Angular integrates seamlessly with AI SDKs and APIs This guide demonstrates how you can use [Genkit](https://angular.dev/ai#build-ai-powered-applications-with-genkit-and-angular) , [Firebase AI Logic](https://angular.dev/ai#build-ai-powered-applications-with-firebase-ai-logic-and-angular) , and the [Gemini API](https://angular.dev/ai#build-ai-powered-applications-with-gemini-api-and-angular) to infuse your Angular apps with AI today. This guide will jumpstart your AI-powered web app development journey by explaining how to begin integrating AI into Angular apps. This guide also shares resources, such as starter kits, example code, and recipes for common workflows, you can use to get up to speed quickly. To get started, you should have a basic understanding of Angular. New to Angular? Try our [essentials guide](https://angular.dev/essentials) or our [getting started tutorials](https://angular.dev/tutorials) . **NOTE:** While this page features integrations and examples with Google AI products, tools like Genkit are model agnostic and allow you to choose your own model. In many cases, the examples and code samples are applicable to other third-party solutions. [Getting Started](https://angular.dev/ai#getting-started) ---------------------------------------------------------- Building AI-powered applications is a new and rapidly developing field. It can be challenging to decide where to start and which technologies to choose. The following section provides three options to choose from: 1. _Genkit_ gives you the choice of [supported model and interface with a unified API](https://genkit.dev/) for building full-stack applications. Ideal for applications requiring sophisticated back-end AI logic, such as personalized recommendations. 2. _Firebase AI Logic_ provides a secure client-side API for Google's models to build client-side only applications or mobile apps. Best for interactive AI features directly in the browser, such as real-time text analysis or basic chatbots. 3. _Gemini API_ enables you to build an application that uses the methods and functionality exposed through the API surface directly, best for full-stack applications. Suitable for applications needing direct control over AI models, like custom image generation or deep data processing. ### [Build AI-powered applications with Genkit and Angular](https://angular.dev/ai#build-ai-powered-applications-with-genkit-and-angular) [Genkit](https://genkit.dev/) is an open-source toolkit designed to help you build AI-powered features in web and mobile apps. It offers a unified interface for integrating AI models from Google, OpenAI, Anthropic, Ollama, and more, so you can explore and choose the best models for your needs. As a server-side solution, your web apps need a supported server environment, such as a node-based server in order to integrate with Genkit. Building a full-stack app using Angular SSR gives you the starting server-side code, for example. Here are examples of how to build with Genkit and Angular: * [Agentic Apps with Genkit and Angular starter-kit](https://github.com/angular/examples/tree/main/genkit-angular-starter-kit) — New to building with AI? Start here with a basic app that features an agentic workflow. Perfect place to start for your first AI building experience. * [Use Genkit in an Angular app](https://genkit.dev/docs/frameworks/angular/) — Build a basic application that uses Genkit Flows, Angular and Gemini 2.5 Flash. This step-by-step walkthrough guides you through creating a full-stack Angular application with AI features. * [Dynamic Story Generator app](https://github.com/angular/examples/tree/main/genkit-angular-story-generator) — Learn to build an agentic Angular app powered by Genkit, Gemini and Imagen 3 to dynamically generate a story based on user interaction featuring beautiful image panels to accompany the events that take place. Start here if you'd like to experiment with a more advanced use-case. This example also has an in-depth video walkthrough of the functionality: * [Watch "Building Agentic Apps with Angular and Genkit live!"](https://youtube.com/live/mx7yZoIa2n4?feature=share) * [Watch "Building Agentic Apps with Angular and Genkit live! PT 2"](https://youtube.com/live/YR6LN5_o3B0?feature=share) * [Building Agentic apps with Firebase and Google Cloud (Barista Example)](https://developers.google.com/solutions/learn/agentic-barista) - Learn how to build an agentic coffee ordering app with Firebase and Google Cloud. This example uses both Firebase AI Logic and Genkit. * [Creating Dynamic, Server-Driven UIs](https://github.com/angular/examples/tree/main/dynamic-sdui-app) - Learn to build Agentic Angular apps with UI views that are generated at runtime based on user input. This example also has an in-depth video walkthrough of the functionality: * [Watch "Exploring the future of web apps"](https://www.youtube.com/live/4qargCqOu70?feature=share) ### [Build AI-powered applications with Firebase AI Logic and Angular](https://angular.dev/ai#build-ai-powered-applications-with-firebase-ai-logic-and-angular) [Firebase AI Logic](https://firebase.google.com/products/vertex-ai-in-firebase) provides a secure way to interact with Vertex AI Gemini API or Imagen API directly from your web and mobile apps. This is compelling for Angular developers since apps can be either full-stack or client-side only. If you are developing a client-side only application, Firebase AI Logic is a good fit for incorporating AI into your web apps. Here is an example of how to build with Firebase AI Logic and Angular: * [Firebase AI Logic x Angular Starter Kit](https://github.com/angular/examples/tree/main/vertex-ai-firebase-angular-example) - Use this starter-kit to build an e-commerce application with a chat agent that can perform tasks. Start here if you do not have experience building with Firebase AI Logic and Angular. This example includes an [in-depth video walkthrough explaining the functionality and demonstrates how to add new features](https://youtube.com/live/4vfDz2al_BI) . ### [Build AI-powered applications with Gemini API and Angular](https://angular.dev/ai#build-ai-powered-applications-with-gemini-api-and-angular) The [Gemini API](https://ai.google.dev/gemini-api/docs) provides access to state-of-the-art models from Google that support audio, images, video, and text input. These models that are optimized for specific use cases, [learn more on the Gemini API documentation site](https://ai.google.dev/gemini-api/docs/models) . * [AI Text Editor Angular app template](https://github.com/FirebaseExtended/firebase-framework-tools/tree/main/starters/angular/ai-text-editor) - Use this template to start with a fully functioning text editor with AI-powered features like refining text, expanding text and formalizing text. This is a good starting point to gain experience with calling the Gemini API via HTTP. * [AI Chatbot app template](https://github.com/FirebaseExtended/firebase-framework-tools/tree/main/starters/angular/ai-chatbot) - This template starts with a chatbot user interface that communicates with the Gemini API via HTTP. [Best Practices](https://angular.dev/ai#best-practices) -------------------------------------------------------- ### [Connecting to model providers and keeping your API Credentials Secure](https://angular.dev/ai#connecting-to-model-providers-and-keeping-your-api-credentials-secure) When connecting to model providers, it is important to keep your API secrets safe. _Never put your API key in a file that ships to the client, such as `environments.ts`_. Your application's architecture determines which AI APIs and tools to choose. Specifically, choose based on whether or not your application is client-side or server-side. Tools such as Firebase AI Logic provide a secure connection to the model APIs for client-side code. If you want to use a different API than Firebase AI Logic or prefer to use a different model provider, consider creating a proxy-server or even [Cloud Functions for Firebase](https://firebase.google.com/docs/functions) to serve as a proxy and not expose your API keys. For an example of connecting using a client-side app, see the code: [Firebase AI Logic Angular example repository](https://github.com/angular/examples/tree/main/vertex-ai-firebase-angular-example) . For server-side connections to model APIs that require API keys, prefer using a secrets manager or environment variable, not `environments.ts`. You should follow standard best practices for securing API keys and credentials. Firebase now provides a new secrets manager with the latest updates from Firebase App Hosting. To learn more, [check out the official documentation](https://firebase.google.com/docs/app-hosting/configure) . For a server-side connection example in a full-stack application, see the code: [Angular AI Example (Genkit and Angular Story Generator) repository](https://github.com/angular/examples/tree/main/genkit-angular-story-generator) . ### [Use Tool Calling to enhance apps](https://angular.dev/ai#use-tool-calling-to-enhance-apps) If you want to build agentic workflows, where agents are able to act and use tools to solve problems based on prompts use "tool calling". Tool calling, also known as function calling, is a way to provide LLMs the ability to make requests back to the application that called it. As a developer, you define which tools are available and you are in control of how or when the tools are called. Tool calling further enhances your web apps by expanding your AI integration further than a question and answer style chat bot. In fact, you can empower your model to request function calls using the function calling API of your model provider. The available tools can be used to perform more complex actions within the context of your application. In the [e-commerce example](https://github.com/angular/examples/blob/main/vertex-ai-firebase-angular-example/src/app/ai.service.ts#L88) of the [Angular examples repository](https://github.com/angular/examples) , the LLM requests to make calls to functions for inventory in order to gain the necessary context to perform more complex tasks such as calculating how much a group of items in the store will cost. The scope of the available API is up to you as a developer just as is whether or not to call a function requested by the LLM. You remain in control of the flow of execution. You can expose specific functions of a service for example but not all functions of that service. ### [Handling non-deterministic responses](https://angular.dev/ai#handling-non-deterministic-responses) Because models can return non-deterministic results, your applications should be designed with that in mind. Here are a few strategies that you can use in your application implementation: * Adjust prompts and model parameters (such as [temperature](https://ai.google.dev/gemini-api/docs/prompting-strategies) ) for more or less deterministic responses. You can [find out more in the prompting strategies section](https://ai.google.dev/gemini-api/docs/prompting-strategies) of [ai.google.dev](https://ai.google.dev/) . * Use the "human in the loop" strategy where a human verifies outputs before proceeding in a workflow. Build your application workflows to allow operators (humans or other models) to verify outputs and confirm key decisions. * Employ tool (or function) calling and schema constraints to guide and restrict model responses to predefined formats, increasing response predictability. Even considering these strategies and techniques, sensible fallbacks should be incorporated in your application design. Follow existing standards of application resiliency. For example, it is not acceptable for an application to crash if a resource or API is not available. In that scenario, an error message is displayed to the user and, if applicable, options for next steps are also displayed. Building AI-powered applications requires the same consideration. Confirm that the response is aligned with the expected output and provide a "safe landing" in case it is not aligned by way of [graceful degradation](https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation) . This also applies to API outages for LLM providers. Consider this example: The LLM provider is not responding. A potential strategy to handle the outage is: * Save the response from the user to use in a retry scenario (now or at a later time) * Alert the user to the outage with an appropriate message that doesn't reveal sensitive information * Resume the conversation at a later time once the services are available again. [Next steps](https://angular.dev/ai#next-steps) ------------------------------------------------ To learn about LLM prompts and AI IDE setup, see the following guides: --- # Angular AI Tutor • Angular Skip to main content menu menuDocs * Introduction * [What is Angular?](https://angular.dev/overview) * [Installation](https://angular.dev/installation) * Essentials * [Start coding! 🚀](https://angular.dev/tutorials/learn-angular) * In-depth Guides * Signals Updated * Components * Templates * Directives * Dependency Injection Updated * Routing Updated * Forms Updated * HTTP Client * Server-side & hybrid-rendering * Testing * Angular Aria New * Internationalization * Animations Updated * [Drag and drop](https://angular.dev/guide/drag-drop) * Build with AI New * [Get Started](https://angular.dev/ai) * [LLM prompts and AI IDE setup](https://angular.dev/ai/develop-with-ai) * [Design Patterns](https://angular.dev/ai/design-patterns) * [Angular CLI MCP Server setup](https://angular.dev/ai/mcp) * [Angular AI Tutor](https://angular.dev/ai/ai-tutor) * Developer Tools * Angular CLI * Libraries * DevTools * [Language Service](https://angular.dev/tools/language-service) * Best Practices * [Style Guide Updated](https://angular.dev/style-guide) * [Security](https://angular.dev/best-practices/security) * [Accessibility](https://angular.dev/best-practices/a11y) * [Unhandled errors in Angular](https://angular.dev/best-practices/error-handling) * Performance * [Keeping up-to-date](https://angular.dev/update) * Developer Events * [Angular v21 Release New](https://angular.dev/events/v21) * Extended Ecosystem * [NgModules](https://angular.dev/guide/ngmodules/overview) * Legacy Animations * Using RxJS with Angular * Service Workers & PWAs * [Web workers](https://angular.dev/ecosystem/web-workers) * [Custom build pipeline](https://angular.dev/ecosystem/custom-build-pipeline) * [Tailwind New](https://angular.dev/guide/tailwind) * [Angular Fire](https://github.com/angular/angularfire#readme) * [Google Maps](https://github.com/angular/components/tree/main/src/google-maps#readme) * [Google Pay](https://github.com/google-pay/google-pay-button#angular) * [YouTube player](https://github.com/angular/components/blob/main/src/youtube-player/README.md) * [Angular CDK](https://material.angular.dev/cdk/categories) * [Angular Material](https://material.angular.dev/) The Angular AI Tutor is designed to interactively guide you step-by-step through building a complete, modern Angular application from the ground up. You'll learn the latest patterns and best practices by building a real, tangible project: a **"Smart Recipe Box"** for creating and managing recipes. Our goal is to foster critical thinking and help you retain what you learn. Instead of just giving you code, the tutor will explain concepts, show you examples, and then give you project-specific exercises to solve on your own. [Get Started](https://angular.dev/ai/ai-tutor#get-started) ----------------------------------------------------------- You can access the AI tutor via the [Angular MCP server](https://angular.dev/ai/ai/mcp) . 1. [Install](https://angular.dev/ai/ai/mcp#get-started) the Angular MCP server 2. Create a new Angular project `ng new ` 3. Navigate to your new project (`cd `) in an AI-powered editor or tool, like the [Gemini CLI](https://geminicli.com/) 4. Enter a prompt like `launch the Angular AI tutor` ![A screenshot demonstrating how to launch the Angular AI Tutor in the Gemini CLI.](https://angular.dev/ai/assets/images/launch-ai-tutor.png "Launch the Angular AI Tutor") [Using the AI Tutor](https://angular.dev/ai/ai-tutor#using-the-ai-tutor) ------------------------------------------------------------------------- Each module begins with a brief concept explanation. ![A screenshot of the Angular AI Tutor presenting a brief concept explanation.](https://angular.dev/ai/assets/images/ai-tutor-preview-1.png "Angular AI Tutor explanation") If applicable, the tutor will present a code example to demonstrate the concept. ![A screenshot of the Angular AI Tutor showing a code example.](https://angular.dev/ai/assets/images/ai-tutor-preview-2.png "Angular AI Tutor code example") The tutor will also provide an open-ended exercise to test your understanding. ![A screenshot of the Angular AI Tutor providing an exercise.](https://angular.dev/ai/assets/images/ai-tutor-preview-3.png "Angular AI Tutor exercise") Finally, the tutor will check your work before moving onto the next module. ![A screenshot of the Angular AI Tutor checking the user's work.](https://angular.dev/ai/assets/images/ai-tutor-preview-4.png "Angular AI Tutor check") [How It Works: The Learning Cycle](https://angular.dev/ai/ai-tutor#how-it-works-the-learning-cycle) ---------------------------------------------------------------------------------------------------- For each new topic, you'll follow a learning loop that emphasizes critical thinking to help you better retain what you learn. 1. **Learn the Concept:** The tutor will briefly explain a core Angular feature and show you a generic code example to illustrate it. 2. **Apply Your Knowledge:** You'll immediately get a hands-on exercise. The tutor presents these exercises at a high level with objectives and expected outcomes, encouraging you to think through the solution yourself. 3. **Get Feedback & Support:** When you're ready, let the tutor know. It will **automatically read your project files** to verify your solution is correct. If you get stuck, you are in complete control. You can ask for a **"hint"** for more guidance, or get step-by-step instructions by typing **"detailed guide"** or **"step-by-step instructions."** Once you've succeeded, the tutor will move directly to the next topic. You can also ask the tutor for more information on a topic or ask any related Angular questions at any time. * * * [**Features & Commands**](https://angular.dev/ai/ai-tutor#features--commands) ------------------------------------------------------------------------------ You are in control of your learning experience. Use these features at any time: ### [**Leave and Come Back**](https://angular.dev/ai/ai-tutor#leave-and-come-back) Feel free to take a break. Your progress is tied to your project's code. When you return for a new session, the tutor will automatically analyze your files to determine exactly where you left off, allowing you to seamlessly pick up right where you were. **Pro Tip:** We highly recommend using Git to save your progress. After completing a module, it's a great idea to commit your changes (e.g., `git commit -m "Complete Phase 1, Module 8"`). This acts as a personal checkpoint you can always return to. ### [**Adjust Your Experience Level**](https://angular.dev/ai/ai-tutor#adjust-your-experience-level) You can set your experience level to **Beginner (1-3)**, **Intermediate (4-7)**, or **Experienced (8-10)**. You can change this setting at any time during your session, and the tutor will immediately adapt its teaching style to match. **Example Prompts:** * "Set my experience level to beginner." * "Change my rating to 8." ### [**See the Full Learning Plan**](https://angular.dev/ai/ai-tutor#see-the-full-learning-plan) Want to see the big picture or check how far you've come? Just ask for the table of contents. **Example Prompts:** * "Where are we?" * "Show the table of contents." * "Show the plan." The tutor will display the full learning plan and mark your current location. ### [**A Note on Styling**](https://angular.dev/ai/ai-tutor#a-note-on-styling) The tutor will apply basic styling to your application to keep things looking clean. You are highly encouraged to apply your own styling to make the app your own. ### [**Skip the Current Module**](https://angular.dev/ai/ai-tutor#skip-the-current-module) If you'd rather move on to the next topic in the learning path, you can ask the tutor to skip the current exercise. **Example Prompts:** * "Skip this section." * "Auto-complete this step for me." The tutor will ask for confirmation and then present you with the complete code solution for the current module and attempt to automatically apply any required updates to ensure you can continue smoothly with the next module. ### [**Jump to Any Topic**](https://angular.dev/ai/ai-tutor#jump-to-any-topic) If you want to learn about a specific topic out of order (e.g., jump from the basics to forms), you can. The tutor will provide the necessary code to update your project to the correct starting point for the selected module and attempt to automatically apply any required updates. **Example Prompts:** * "Take me to the forms lesson." * "I want to learn about Route Guards now." * "Jump to the section on Services." * * * [**Troubleshooting**](https://angular.dev/ai/ai-tutor#troubleshooting) ----------------------------------------------------------------------- If the tutor doesn't respond correctly or you suspect an issue with your application, here are a few things to try: 1. **Type "proceed":** This can often nudge the tutor to continue to the next step in the event it gets stuck. 2. **Correct the Tutor:** If the tutor is mistaken about your progress (e.g., it says you're on Module 3 but you've completed Module 8), just tell it. For example: _"I'm actually on Module 8."_ The tutor will re-evaluate your code and adjust. 3. **Verify Your UI:** If you want to confirm what your application's user interface should look like, just ask the tutor. For example: _"What should I see in my UI?"_ 4. **Reload the Browser Window:** A refresh can solve many issues related to your application. 5. **Hard Restart the Browser:** Errors are sometimes only surfaced in the browser's developer console. A hard restart can help clear underlying issues related to the application. 6. **Start a New Chat:** You can always start a new chat to remove the existing history and begin fresh. The tutor will read your files to find the latest step you were on. [**Your Learning Journey: The Phased Path**](https://angular.dev/ai/ai-tutor#your-learning-journey-the-phased-path) -------------------------------------------------------------------------------------------------------------------- You will build your application over a five-phase journey. You can follow this path from start to finish to create a complete, fully-functional Angular application. Each module builds logically upon the last, taking you from the basics to advanced, real-world features. **A Note on Automated Setup:** Some modules require a setup step, like creating interfaces or mock data. In these cases, the tutor will present you with the code and file instructions. You will be responsible for creating and modifying these files as instructed before the exercise begins. ### [**Phase 1: Angular Fundamentals**](https://angular.dev/ai/ai-tutor#phase-1-angular-fundamentals) * **Module 1:** Getting Started * **Module 2:** Dynamic Text with Interpolation * **Module 3:** Event Listeners (`(click)`) ### [**Phase 2: State and Signals**](https://angular.dev/ai/ai-tutor#phase-2-state-and-signals) * **Module 4:** State Management with Writable Signals (Part 1: `set`) * **Module 5:** State Management with Writable Signals (Part 2: `update`) * **Module 6:** Computed Signals ### [**Phase 3: Component Architecture**](https://angular.dev/ai/ai-tutor#phase-3-component-architecture) * **Module 7:** Template Binding (Properties & Attributes) * **Module 8:** Creating & Nesting Components * **Module 9:** Component Inputs with Signals * **Module 10:** Styling Components * **Module 11:** List Rendering with `@for` * **Module 12:** Conditional Rendering with `@if` ### [**Phase 4: Advanced Features & Architecture**](https://angular.dev/ai/ai-tutor#phase-4-advanced-features--architecture) * **Module 13:** Two-Way Binding * **Module 14:** Services & Dependency Injection (DI) * **Module 15:** Basic Routing * **Module 16:** Introduction to Forms * **Module 17:** Intro to Angular Material ### [Phase 5: Experimental Signal Forms (⚠️ WARNING: Subject to Change)">**Phase 5: Experimental Signal Forms (⚠️ WARNING: Subject to Change)**](https://angular.dev/ai/ai-tutor#phase-5-experimental-signal-forms--warning-subject-to-change) **CRITICAL NOTE FOR THIS PHASE:** Signal Forms are currently an [**EXPERIMENTAL** feature](https://angular.dev/reference/releases#experimental) . The API may change significantly in future Angular releases. Please proceed with the understanding that this section demonstrates a cutting-edge feature. * **Module 18**: **Introduction to Signal Forms** * **Module 19**: **Submitting & Resetting** * **Module 20**: **Validation in Signal Forms** * **Module 21**: **Field State & Error Messages** * * * [**A Note on AI & Feedback**](https://angular.dev/ai/ai-tutor#a-note-on-ai--feedback) -------------------------------------------------------------------------------------- This tutor is powered by a Large Language Model (LLM). While we've worked hard to make it an expert, AIs can make mistakes. If you encounter an explanation or code example that seems incorrect, please let us know. You can correct the tutor, and it will use your feedback to adjust its response. For any technical bugs or feature requests, please [submit an issue](https://github.com/angular/angular-cli/issues) . --- # Design Patterns • Angular Skip to main content menu menuDocs * Introduction * [What is Angular?](https://angular.dev/overview) * [Installation](https://angular.dev/installation) * Essentials * [Start coding! 🚀](https://angular.dev/tutorials/learn-angular) * In-depth Guides * Signals Updated * Components * Templates * Directives * Dependency Injection Updated * Routing Updated * Forms Updated * HTTP Client * Server-side & hybrid-rendering * Testing * Angular Aria New * Internationalization * Animations Updated * [Drag and drop](https://angular.dev/guide/drag-drop) * Build with AI New * [Get Started](https://angular.dev/ai) * [LLM prompts and AI IDE setup](https://angular.dev/ai/develop-with-ai) * [Design Patterns](https://angular.dev/ai/design-patterns) * [Angular CLI MCP Server setup](https://angular.dev/ai/mcp) * [Angular AI Tutor](https://angular.dev/ai/ai-tutor) * Developer Tools * Angular CLI * Libraries * DevTools * [Language Service](https://angular.dev/tools/language-service) * Best Practices * [Style Guide Updated](https://angular.dev/style-guide) * [Security](https://angular.dev/best-practices/security) * [Accessibility](https://angular.dev/best-practices/a11y) * [Unhandled errors in Angular](https://angular.dev/best-practices/error-handling) * Performance * [Keeping up-to-date](https://angular.dev/update) * Developer Events * [Angular v21 Release New](https://angular.dev/events/v21) * Extended Ecosystem * [NgModules](https://angular.dev/guide/ngmodules/overview) * Legacy Animations * Using RxJS with Angular * Service Workers & PWAs * [Web workers](https://angular.dev/ecosystem/web-workers) * [Custom build pipeline](https://angular.dev/ecosystem/custom-build-pipeline) * [Tailwind New](https://angular.dev/guide/tailwind) * [Angular Fire](https://github.com/angular/angularfire#readme) * [Google Maps](https://github.com/angular/components/tree/main/src/google-maps#readme) * [Google Pay](https://github.com/google-pay/google-pay-button#angular) * [YouTube player](https://github.com/angular/components/blob/main/src/youtube-player/README.md) * [Angular CDK](https://material.angular.dev/cdk/categories) * [Angular Material](https://material.angular.dev/) Interacting with AI and Large Language Model (LLM) APIs introduces unique challenges, such as managing asynchronous operations, handling streaming data, and designing a responsive user experience for potentially slow or unreliable network requests. Angular [signals](https://angular.dev/ai/guide/signals) and the [](https://angular.dev/ai/guide/signals/resource) [`resource`](https://angular.dev/api/core/resource) API provide powerful tools to solve these problems elegantly. [Triggering requests with signals](https://angular.dev/ai/design-patterns#triggering-requests-with-signals) ------------------------------------------------------------------------------------------------------------ A common pattern when working with user-provided prompts is to separate the user's live input from the submitted value that triggers the API call. 1. Store the user's raw input in one signal as they type 2. When the user submits (e.g., by clicking a button), update a second signal with contents of the first signal. 3. Use the second signal in the **`params`** field of your [`resource`](https://angular.dev/api/core/resource) . This setup ensures the resource's **`loader`** function only runs when the user explicitly submits their prompt, not on every keystroke. You can use additional signal parameters, like a `sessionId` or `userId` (which can be useful for creating persistent LLM sessions), in the `loader` field. This way, the request always uses these parameters' current values without re-triggering the asynchronous function defined in the `loader` field. Many AI SDKs provide helper methods for making API calls. For example, the Genkit client library exposes a `runFlow` method for calling Genkit flows, which you can call from a resource's `loader`. For other APIs, you can use the [](https://angular.dev/ai/guide/signals/resource#reactive-data-fetching-with-httpresource) [`httpResource`](https://angular.dev/api/common/http/httpResource) . The following example shows a [`resource`](https://angular.dev/api/core/resource) that fetches parts of an AI-generated story. The `loader` is triggered only when the `storyInput` signal changes. // A resource that fetches three parts of an AI generated storystoryResource = resource({ // The default value to use before the first request or on error defaultValue: DEFAULT_STORY, // The loader is re-triggered when this signal changes params: () => this.storyInput(), // The async function to fetch data loader: ({params}): Promise => { // The params value is the current value of the storyInput signal const url = this.endpoint(); return runFlow({ url, input: { userInput: params, sessionId: this.storyService.sessionId(), // Read from another signal }, }); },}); [Preparing LLM data for templates](https://angular.dev/ai/design-patterns#preparing-llm-data-for-templates) ------------------------------------------------------------------------------------------------------------ You can configure LLM APIs to return structured data. Strongly typing your [`resource`](https://angular.dev/api/core/resource) to match the expected output from the LLM provides better type safety and editor autocompletion. To manage state derived from a resource, use a [`computed`](https://angular.dev/api/core/computed) signal or [`linkedSignal`](https://angular.dev/api/core/linkedSignal) . Because [`linkedSignal`](https://angular.dev/api/core/linkedSignal) [provides access to prior values](https://angular.dev/ai/guide/signals/linked-signal) , it can serve a variety of AI-related use cases, including * building a chat history * preserving or customizing data that templates display while LLMs generate content In the example below, `storyParts` is a [`linkedSignal`](https://angular.dev/api/core/linkedSignal) that appends the latest story parts returned from `storyResource` to the existing array of story parts. storyParts = linkedSignal({ // The source signal that triggers the computation source: () => this.storyResource.value().storyParts, // The computation function computation: (newStoryParts, previous) => { // Get the previous value of this linkedSignal, or an empty array const existingStoryParts = previous?.value || []; // Return a new array with the old and new parts return [...existingStoryParts, ...newStoryParts]; },}); [Performance and user experience](https://angular.dev/ai/design-patterns#performance-and-user-experience) ---------------------------------------------------------------------------------------------------------- LLM APIs may be slower and more error-prone than conventional, more deterministic APIs. You can use several Angular features to build a performant and user-friendly interface. * **Scoped Loading:** place the [`resource`](https://angular.dev/api/core/resource) in the component that directly uses the data. This helps limit change detection cycles (especially in zoneless applications) and prevents blocking other parts of your application. If data needs to be shared across multiple components, provide the [`resource`](https://angular.dev/api/core/resource) from a service. * **SSR and Hydration:** use Server-Side Rendering (SSR) with incremental hydration to render the initial page content quickly. You can show a placeholder for the AI-generated content and defer fetching the data until the component hydrates on the client. * **Loading State:** use the [`resource`](https://angular.dev/api/core/resource) `LOADING` [status](https://angular.dev/ai/guide/signals/resource#resource-status) to show an indicator, like a spinner, while the request is in flight. This status covers both initial loads and reloads. * **Error Handling and Retries:** use the [`resource`](https://angular.dev/api/core/resource) [**`reload()`**](https://angular.dev/ai/guide/signals/resource#reloading) method as a simple way for users to retry failed requests, may be more prevalent when relying on AI generated content. The following example demonstrates how to create a responsive UI to dynamically display an AI generated image with loading and retry functionality. @if (imgResource.isLoading()) {
} @else if (imgResource.hasValue()) { } @else {

Failed to load image. Click to retry.

} [AI patterns in action: streaming chat responses](https://angular.dev/ai/design-patterns#ai-patterns-in-action-streaming-chat-responses) ----------------------------------------------------------------------------------------------------------------------------------------- Interfaces often display partial results from LLM-based APIs incrementally as response data arrives. Angular's resource API provides the ability to stream responses to support this type of pattern. The `stream` property of [`resource`](https://angular.dev/api/core/resource) accepts an asynchronous function you can use to apply updates to a signal value over time. The signal being updated represents the data being streamed. characters = resource({ stream: async () => { const data = signal>({value: ''}); // Calls a Genkit streaming flow using the streamFlow method // exposed by the Genkit client SDK const response = streamFlow({ url: '/streamCharacters', input: 10, }); (async () => { for await (const chunk of response.stream) { data.update((prev) => { if ('value' in prev) { return {value: `${prev.value} ${chunk}`}; } else { return {error: chunk as unknown as Error}; } }); } })(); return data; },}); The `characters` member is updated asynchronously and can be displayed in the template. @if (characters.isLoading()) {

Loading...

} @else if (characters.hasValue()) {

{{ characters.value() }}

} @else {

{{ characters.error() }}

} On the server side, in `server.ts` for example, the defined endpoint sends the data to be streamed to the client. The following code uses Gemini with the Genkit framework but this technique is applicable to other APIs that support streaming responses from LLMs: import {startFlowServer} from '@genkit-ai/express';import {genkit} from 'genkit/beta';import {googleAI, gemini20Flash} from '@genkit-ai/googleai';const ai = genkit({plugins: [googleAI()]});export const streamCharacters = ai.defineFlow( { name: 'streamCharacters', inputSchema: z.number(), outputSchema: z.string(), streamSchema: z.string(), }, async (count, {sendChunk}) => { const {response, stream} = ai.generateStream({ model: gemini20Flash, config: { temperature: 1, }, prompt: `Generate ${count} different RPG game characters.`, }); (async () => { for await (const chunk of stream) { sendChunk(chunk.content[0].text!); } })(); return (await response).text; },);startFlowServer({ flows: [streamCharacters],}); --- # LLM prompts and AI IDE setup • Angular Skip to main content menu menuDocs * Introduction * [What is Angular?](https://angular.dev/overview) * [Installation](https://angular.dev/installation) * Essentials * [Start coding! 🚀](https://angular.dev/tutorials/learn-angular) * In-depth Guides * Signals Updated * Components * Templates * Directives * Dependency Injection Updated * Routing Updated * Forms Updated * HTTP Client * Server-side & hybrid-rendering * Testing * Angular Aria New * Internationalization * Animations Updated * [Drag and drop](https://angular.dev/guide/drag-drop) * Build with AI New * [Get Started](https://angular.dev/ai) * [LLM prompts and AI IDE setup](https://angular.dev/ai/develop-with-ai) * [Design Patterns](https://angular.dev/ai/design-patterns) * [Angular CLI MCP Server setup](https://angular.dev/ai/mcp) * [Angular AI Tutor](https://angular.dev/ai/ai-tutor) * Developer Tools * Angular CLI * Libraries * DevTools * [Language Service](https://angular.dev/tools/language-service) * Best Practices * [Style Guide Updated](https://angular.dev/style-guide) * [Security](https://angular.dev/best-practices/security) * [Accessibility](https://angular.dev/best-practices/a11y) * [Unhandled errors in Angular](https://angular.dev/best-practices/error-handling) * Performance * [Keeping up-to-date](https://angular.dev/update) * Developer Events * [Angular v21 Release New](https://angular.dev/events/v21) * Extended Ecosystem * [NgModules](https://angular.dev/guide/ngmodules/overview) * Legacy Animations * Using RxJS with Angular * Service Workers & PWAs * [Web workers](https://angular.dev/ecosystem/web-workers) * [Custom build pipeline](https://angular.dev/ecosystem/custom-build-pipeline) * [Tailwind New](https://angular.dev/guide/tailwind) * [Angular Fire](https://github.com/angular/angularfire#readme) * [Google Maps](https://github.com/angular/components/tree/main/src/google-maps#readme) * [Google Pay](https://github.com/google-pay/google-pay-button#angular) * [YouTube player](https://github.com/angular/components/blob/main/src/youtube-player/README.md) * [Angular CDK](https://material.angular.dev/cdk/categories) * [Angular Material](https://material.angular.dev/) Generating code with large language models (LLMs) is a rapidly growing area of interest for developers. While LLMs are often capable of generating working code it can be a challenge to generate code for consistently evolving frameworks like Angular. Advanced instructions and prompting are an emerging standard for supporting modern code generation with domain specific details. This section contains curated content and resources to support more accurate code generation for Angular and LLMs. [Custom Prompts and System Instructions](https://angular.dev/ai/develop-with-ai#custom-prompts-and-system-instructions) ------------------------------------------------------------------------------------------------------------------------ Improve your experience generating code with LLMs by using one of the following custom, domain specific files. **NOTE:** These files will be updated on a regular basis staying up to date with Angular's conventions. Here is a set of instructions to help LLMs generate correct code that follows Angular best practices. This file can be included as system instructions to your AI tooling or included along with your prompt as context. You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.## TypeScript Best Practices- Use strict type checking- Prefer type inference when the type is obvious- Avoid the `any` type; use `unknown` when type is uncertain## Angular Best Practices- Always use standalone components over NgModules- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.- Use signals for state management- Implement lazy loading for feature routes- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead- Use `NgOptimizedImage` for all static images. - `NgOptimizedImage` does not work for inline base64 images.## Accessibility Requirements- It MUST pass all AXE checks.- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.### Components- Keep components small and focused on a single responsibility- Use `input()` and `output()` functions instead of decorators- Use `computed()` for derived state- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator- Prefer inline templates for small components- Prefer Reactive forms instead of Template-driven ones- Do NOT use `ngClass`, use `class` bindings instead- Do NOT use `ngStyle`, use `style` bindings instead- When using external templates/styles, use paths relative to the component TS file.## State Management- Use signals for local component state- Use `computed()` for derived state- Keep state transformations pure and predictable- Do NOT use `mutate` on signals, use `update` or `set` instead## Templates- Keep templates simple and avoid complex logic- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`- Use the async pipe to handle observables- Do not assume globals like (`new Date()`) are available.- Do not write arrow functions in templates (they are not supported).## Services- Design services around a single responsibility- Use the `providedIn: 'root'` option for singleton services- Use the `inject()` function instead of constructor injection [Click here to download the best-practices.md file.](https://angular.dev/assets/context/best-practices.md) [Rules Files](https://angular.dev/ai/develop-with-ai#rules-files) ------------------------------------------------------------------ Several editors, such as [Firebase Studio](https://studio.firebase.google.com/?utm_source=adev&utm_medium=website&utm_campaign=BUILD_WITH_AI_ANGULAR&utm_term=angular_devrel&utm_content=build_with_ai_angular_firebase_studio) have rules files useful for providing critical context to LLMs. | Environment/IDE | Rules File | Installation Instructions | | --- | --- | --- | | Firebase Studio | [airules.md](https://angular.dev/assets/context/airules.md) | [Configure `airules.md`](https://firebase.google.com/docs/studio/set-up-gemini#custom-instructions) | | Copilot powered IDEs | [copilot-instructions.md](https://angular.dev/assets/context/guidelines.md) | [Configure `.github/copilot-instructions.md`](https://code.visualstudio.com/docs/copilot/copilot-customization#_custom-instructions) | | Cursor | [cursor.md](https://angular.dev/assets/context/angular-20.mdc) | [Configure `cursorrules.md`](https://docs.cursor.com/context/rules) | | JetBrains IDEs | [guidelines.md](https://angular.dev/assets/context/guidelines.md) | [Configure `guidelines.md`](https://www.jetbrains.com/help/junie/customize-guidelines.html) | | VS Code | [.instructions.md](https://angular.dev/assets/context/guidelines.md) | [Configure `.instructions.md`](https://code.visualstudio.com/docs/copilot/copilot-customization#_custom-instructions) | | Windsurf | [guidelines.md](https://angular.dev/assets/context/guidelines.md) | [Configure `guidelines.md`](https://docs.windsurf.com/windsurf/cascade/memories#rules) | [Angular CLI MCP Server setup](https://angular.dev/ai/develop-with-ai#angular-cli-mcp-server-setup) ---------------------------------------------------------------------------------------------------- The Angular CLI includes an experimental [Model Context Protocol (MCP) server](https://modelcontextprotocol.io/) that allows AI assistants in your development environment to interact with the Angular CLI. [**Learn how to set up the Angular CLI MCP Server**](https://angular.dev/ai/mcp) [Providing Context with `llms.txt`](https://angular.dev/ai/develop-with-ai#providing-context-with-llmstxt) ----------------------------------------------------------------------------------------------------------- `llms.txt` is a proposed standard for websites designed to help LLMs better understand and process their content. The Angular team has developed two versions of this file to help LLMs and tools that use LLMs for code generation to create better modern Angular code. * [llms.txt](https://angular.dev/llms.txt) - an index file providing links to key files and resources. * [llms-full.txt](https://angular.dev/assets/context/llms-full.txt) - a more robust compiled set of resources describing how Angular works and how to build Angular applications. Be sure [to check out the overview page](https://angular.dev/ai) for more information on how to integrate AI into your Angular applications. [Web Codegen Scorer](https://angular.dev/ai/develop-with-ai#web-codegen-scorer) -------------------------------------------------------------------------------- The Angular team developed and open-sourced the [Web Codegen Scorer](https://github.com/angular/web-codegen-scorer) , a tool to evaluate and score the quality of AI generated web code. You can use this tool to make evidence-based decisions relating to AI-generated code, such as fine-tuning prompts to improve the accuracy of LLM-generated code for Angular. These prompts can be included as system instructions for your AI tooling or as context with your prompt. You can also use this tool to compare the quality of code produced by different models and monitor quality over time as models and agents evolve. --- # Angular CLI MCP Server setup • Angular Skip to main content menu menuDocs * Introduction * [What is Angular?](https://angular.dev/overview) * [Installation](https://angular.dev/installation) * Essentials * [Start coding! 🚀](https://angular.dev/tutorials/learn-angular) * In-depth Guides * Signals Updated * Components * Templates * Directives * Dependency Injection Updated * Routing Updated * Forms Updated * HTTP Client * Server-side & hybrid-rendering * Testing * Angular Aria New * Internationalization * Animations Updated * [Drag and drop](https://angular.dev/guide/drag-drop) * Build with AI New * [Get Started](https://angular.dev/ai) * [LLM prompts and AI IDE setup](https://angular.dev/ai/develop-with-ai) * [Design Patterns](https://angular.dev/ai/design-patterns) * [Angular CLI MCP Server setup](https://angular.dev/ai/mcp) * [Angular AI Tutor](https://angular.dev/ai/ai-tutor) * Developer Tools * Angular CLI * Libraries * DevTools * [Language Service](https://angular.dev/tools/language-service) * Best Practices * [Style Guide Updated](https://angular.dev/style-guide) * [Security](https://angular.dev/best-practices/security) * [Accessibility](https://angular.dev/best-practices/a11y) * [Unhandled errors in Angular](https://angular.dev/best-practices/error-handling) * Performance * [Keeping up-to-date](https://angular.dev/update) * Developer Events * [Angular v21 Release New](https://angular.dev/events/v21) * Extended Ecosystem * [NgModules](https://angular.dev/guide/ngmodules/overview) * Legacy Animations * Using RxJS with Angular * Service Workers & PWAs * [Web workers](https://angular.dev/ecosystem/web-workers) * [Custom build pipeline](https://angular.dev/ecosystem/custom-build-pipeline) * [Tailwind New](https://angular.dev/guide/tailwind) * [Angular Fire](https://github.com/angular/angularfire#readme) * [Google Maps](https://github.com/angular/components/tree/main/src/google-maps#readme) * [Google Pay](https://github.com/google-pay/google-pay-button#angular) * [YouTube player](https://github.com/angular/components/blob/main/src/youtube-player/README.md) * [Angular CDK](https://material.angular.dev/cdk/categories) * [Angular Material](https://material.angular.dev/) The Angular CLI includes an experimental [Model Context Protocol (MCP) server](https://modelcontextprotocol.io/) enabling AI assistants in your development environment to interact with the Angular CLI. We've included support for CLI powered code generation, adding packages, and more. [Available Tools](https://angular.dev/ai/mcp#available-tools) -------------------------------------------------------------- The Angular CLI MCP server provides several tools to assist you in your development workflow. By default, the following tools are enabled: | Name | Description | `local-only` | `read-only` | | --- | --- | --- | --- | | `ai_tutor` | Launches an interactive AI-powered Angular tutor. Recommended to run from a new Angular project using v20 or later. [Learn more](https://angular.dev/ai/ai/ai-tutor)
. | ✅ | ✅ | | `find_examples` | Finds authoritative code examples from a curated database of official, best-practice examples, focusing on **modern, new, and recently updated** Angular features. | ✅ | ✅ | | `get_best_practices` | Retrieves the Angular Best Practices Guide. This guide is essential for ensuring that all code adheres to modern standards, including standalone components, typed forms, and modern control flow. | ✅ | ✅ | | `list_projects` | Lists the names of all applications and libraries defined within an Angular workspace. It reads the `angular.json` configuration file to identify the projects. | ✅ | ✅ | | `onpush_zoneless_migration` | Analyzes Angular code and provides a step-by-step, iterative plan to migrate it to `OnPush` change detection, a prerequisite for a zoneless application. | ✅ | ✅ | | `search_documentation` | Searches the official Angular documentation at [https://angular.dev](https://angular.dev/)
. This tool should be used to answer any questions about Angular, such as for APIs, tutorials, and best practices. | ❌ | ✅ | ### [Experimental Tools](https://angular.dev/ai/mcp#experimental-tools) Some tools are provided in experimental / preview status since they are new or not fully tested. Enable them individually with the [`--experimental-tool`](https://angular.dev/ai/mcp#command-options) option and use them with caution. | Name | Description | `local-only` | `read-only` | | --- | --- | --- | --- | | `build` | Perform a one-off, non-watched build using `ng build`. | ✅ | ❌ | | `devserver.start` | Asynchronously starts a development server that watches the workspace for changes, similar to running `ng serve`. Since this is asynchronous it returns immediately. To manage the resulting server, use the `devserver.stop` and `devserver.wait_for_build` tools. | ✅ | ✅ | | `devserver.stop` | Stops a development server started by `devserver.start`. | ✅ | ✅ | | `devserver.wait_for_build` | Returns the output logs of the most recent build in a running development server started by `devserver.start`. If a build is currently ongoing, it will first wait for that build to complete and then return the logs. | ✅ | ✅ | | `e2e` | Executes the end-to-end tests configured in the project. | ✅ | ✅ | | `modernize` | Performs code migrations and provides further instructions on how to modernize Angular code to align with the latest best practices and syntax. [Learn more](https://angular.dev/reference/migrations) | ✅ | ❌ | | `test` | Runs the project's unit tests. | ✅ | ✅ | [Get Started](https://angular.dev/ai/mcp#get-started) ------------------------------------------------------ To get started, run the following command in your terminal: ng mcp When run from an interactive terminal, this command displays instructions on how to configure a host environment to use the MCP server. The following sections provide example configurations for several popular editors and tools. ### [Cursor](https://angular.dev/ai/mcp#cursor) Create a file named `.cursor/mcp.json` in your project's root and add the following configuration. You can also configure it globally in `~/.cursor/mcp.json`. { "mcpServers": { "angular-cli": { "command": "npx", "args": ["-y", "@angular/cli", "mcp"] } }} ### [Firebase Studio](https://angular.dev/ai/mcp#firebase-studio) Create a file named `.idx/mcp.json` in your project's root and add the following configuration: { "mcpServers": { "angular-cli": { "command": "npx", "args": ["-y", "@angular/cli", "mcp"] } }} ### [Gemini CLI](https://angular.dev/ai/mcp#gemini-cli) Create a file named `.gemini/settings.json` in your project's root and add the following configuration: { "mcpServers": { "angular-cli": { "command": "npx", "args": ["-y", "@angular/cli", "mcp"] } }} ### [JetBrains IDEs](https://angular.dev/ai/mcp#jetbrains-ides) In JetBrains IDEs (like IntelliJ IDEA or WebStorm), after installing the JetBrains AI Assistant plugin, go to `Settings | Tools | AI Assistant | Model Context Protocol (MCP)`. Add a new server (`+`) and select `As JSON`. Then paste the following configuration: { "mcpServers": { "angular-cli": { "command": "npx", "args": ["-y", "@angular/cli", "mcp"] } }} For the most up-to-date instructions on configuring MCP servers, please refer to the JetBrains documentation: [Connect to an MCP server](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server) . ### [VS Code](https://angular.dev/ai/mcp#vs-code) In your project's root, create a file named `.vscode/mcp.json` and add the following configuration. Note the use of the `servers` property. { "servers": { "angular-cli": { "command": "npx", "args": ["-y", "@angular/cli", "mcp"] } }} ### [Other IDEs](https://angular.dev/ai/mcp#other-ides) For other IDEs, check your IDE's documentation for the proper location of the MCP configuration file (often `mcp.json`). The configuration should contain the following snippet. { "mcpServers": { "angular-cli": { "command": "npx", "args": ["-y", "@angular/cli", "mcp"] } }} [Command Options](https://angular.dev/ai/mcp#command-options) -------------------------------------------------------------- The `mcp` command can be configured with the following options passed as arguments in your IDE's MCP configuration: | Option | Type | Description | Default | | --- | --- | --- | --- | | `--read-only` | `boolean` | Only register tools that do not make changes to the project. Your editor or coding agent may still perform edits. | `false` | | `--local-only` | `boolean` | Only register tools that do not require an internet connection. Your editor or coding agent may still send data over the network. | `false` | | `--experimental-tool`
`-E` | `string` | Enable an [experimental tool](https://angular.dev/ai/mcp#experimental-tools)
. Separate multiple options by spaces, e.g. `-E tool_a tool_b`. Enable all `devserver.x` tools by using `-E devserver`. | | For example, to run the server in read-only mode in VS Code, you would update your `mcp.json` like this: { "servers": { "angular-cli": { "command": "npx", "args": ["-y", "@angular/cli", "mcp", "--read-only"] } }} [Feedback and New Ideas](https://angular.dev/ai/mcp#feedback-and-new-ideas) ---------------------------------------------------------------------------- The Angular team welcomes your feedback on the existing MCP capabilities and any ideas you have for new tools or features. Please share your thoughts by opening an issue on the [angular/angular GitHub repository](https://github.com/angular/angular/issues) . --- # AUTO_STYLE • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AUTO_STYLE#api) --------------------------------------------------------- `const [AUTO_STYLE](https://angular.dev/api/animations/AUTO_STYLE) : string;` Jump to details --- # AnimateChildOptions • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimateChildOptions#api) ------------------------------------------------------------------ `interface [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) extends [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) { duration?: string | number | undefined; override delay?: string | number | undefined; override params?: { [name: string]: any; } | undefined;}` Sets a time-delay for initiating an animation action. A number and optional time unit, such as "1s" or "10ms" for one second and 10 milliseconds, respectively.The default unit is milliseconds. Default value is 0, meaning no delay. A set of developer-defined parameters that modify styling and timing when an animation action starts. An array of key-value pairs, where the provided value is used as a default. Jump to details --- # AnimateTimings • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimateTimings#api) ------------------------------------------------------------- ``type [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) = { /** * The full duration of an animation step. A number and optional time unit, * such as "1s" or "10ms" for one second and 10 milliseconds, respectively. * The default unit is milliseconds. */ duration: number; /** * The delay in applying an animation step. A number and optional time unit. * The default unit is milliseconds. */ delay: number; /** * An easing style that controls how an animations step accelerates * and decelerates during its run time. An easing function such as `cubic-bezier()`, * or one of the following constants: * - `ease-in` * - `ease-out` * - `ease-in-and-out` */ easing: string | null;}`` Jump to details --- # AnimationAnimateChildMetadata • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationAnimateChildMetadata#api) ---------------------------------------------------------------------------- `interface [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) extends [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) { options: [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) | null; override type: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) ;}` An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation. Default delay is 0. Jump to details --- # AnimationFactory • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationFactory#api) --------------------------------------------------------------- `abstract class [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) { abstract create(element: any, options?: [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) | undefined): [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) ;}` Creates an [`AnimationPlayer`](https://angular.dev/api/animations/AnimationPlayer) instance for the reusable animation defined by the `[AnimationBuilder.build](https://angular.dev/api/animations/api/animations/AnimationBuilder#build) ()` method that created this factory and attaches the new player a DOM element. @paramelement`any` The DOM element to which to attach the player. @paramoptions`[AnimationOptions](https://angular.dev/api/animations/AnimationOptions) | undefined` A set of options that can include a time delay and additional developer-defined parameters. @returns`[AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) ` Jump to details --- # AnimationAnimateRefMetadata • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationAnimateRefMetadata#api) -------------------------------------------------------------------------- `interface [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) extends [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) { animation: [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) ; options: [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) | null; override type: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) ;}` An animation reference object. An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation. Default delay is 0. Jump to details --- # AnimationAnimateMetadata • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationAnimateMetadata#api) ----------------------------------------------------------------------- `interface [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) extends [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) { timings: string | number | [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) ; styles: [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) | [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) | null; override type: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) ;}` The timing data for the step. A set of styles used in the step. Jump to details --- # AnimationDriver • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations/browser * [AnimationDriver](https://angular.dev/api/animations/browser/AnimationDriver) * [NoopAnimationDriver](https://angular.dev/api/animations/browser/NoopAnimationDriver) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/browser/AnimationDriver#api) ---------------------------------------------------------------------- `abstract class [AnimationDriver](https://angular.dev/api/animations/browser/AnimationDriver) { abstract validateStyleProperty(prop: string): boolean; abstract validateAnimatableStyleProperty?: ((prop: string) => boolean) | undefined; abstract containsElement(elm1: any, elm2: any): boolean; abstract getParentElement(element: unknown): unknown; abstract query(element: any, selector: string, multi: boolean): any[]; abstract computeStyle(element: any, prop: string, defaultValue?: string | undefined): string; abstract animate(element: any, keyframes: Map[], duration: number, delay: number, easing?: string | null | undefined, previousPlayers?: any[] | undefined, scrubberAccessRequested?: boolean | undefined): any; static NOOP: [AnimationDriver](https://angular.dev/api/animations/browser/AnimationDriver) ;}` @paramprop`string` @returns`boolean` @paramelm1`any` @paramelm2`any` @returns`boolean` Obtains the parent element, if any. `null` is returned if the element does not have a parent. @paramelement`unknown` @returns`unknown` @paramelement`any` @paramselector`string` @parammulti`boolean` @returns`any[]` @paramelement`any` @paramprop`string` @paramdefaultValue`string | undefined` @returns`string` @paramelement`any` @paramkeyframes`Map[]` @paramduration`number` @paramdelay`number` @parameasing`string | null | undefined` @parampreviousPlayers`any[] | undefined` @paramscrubberAccessRequested`boolean | undefined` @returns`any` @deprecated Use the NoopAnimationDriver class. Jump to details --- # MockAnimationPlayer • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations/browser/testing * [MockAnimationDriver](https://angular.dev/api/animations/browser/testing/MockAnimationDriver) * [MockAnimationPlayer](https://angular.dev/api/animations/browser/testing/MockAnimationPlayer) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/browser/testing/MockAnimationPlayer#api) ---------------------------------------------------------------------------------- `class [MockAnimationPlayer](https://angular.dev/api/animations/browser/testing/MockAnimationPlayer) extends NoopAnimationPlayer { constructor(element: any, keyframes: ɵStyleDataMap[], duration: number, delay: number, easing: string, previousPlayers: any[]): [MockAnimationPlayer](https://angular.dev/api/animations/browser/testing/MockAnimationPlayer) ; previousStyles: ɵStyleDataMap; currentSnapshot: ɵStyleDataMap; override element: any; override keyframes: ɵStyleDataMap[]; override duration: number; override delay: number; override easing: string; override previousPlayers: any[]; reset(): void; finish(): void; destroy(): void; play(): void; hasStarted(): boolean; beforeDestroy(): void;}` @paramelement`any` @paramkeyframes`ɵStyleDataMap[]` @paramduration`number` @paramdelay`number` @parameasing`string` @parampreviousPlayers`any[]` @returns`[MockAnimationPlayer](https://angular.dev/api/animations/browser/testing/MockAnimationPlayer) ` @returns`void` @returns`void` @returns`void` @returns`void` @returns`boolean` @returns`void` Jump to details --- # NoopAnimationDriver • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations/browser * [AnimationDriver](https://angular.dev/api/animations/browser/AnimationDriver) * [NoopAnimationDriver](https://angular.dev/api/animations/browser/NoopAnimationDriver) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [`AnimationDriver`](https://angular.dev/api/animations/browser/AnimationDriver) implentation for Noop animations [API](https://angular.dev/api/animations/browser/NoopAnimationDriver#api) -------------------------------------------------------------------------- `class [NoopAnimationDriver](https://angular.dev/api/animations/browser/NoopAnimationDriver) implements [AnimationDriver](https://angular.dev/api/animations/browser/AnimationDriver) { validateStyleProperty(prop: string): boolean; containsElement(elm1: any, elm2: any): boolean; getParentElement(element: unknown): unknown; query(element: any, selector: string, multi: boolean): any[]; computeStyle(element: any, prop: string, defaultValue?: string | undefined): string; animate(element: any, keyframes: Map[], duration: number, delay: number, easing: string, previousPlayers?: any[], scrubberAccessRequested?: boolean | undefined): AnimationPlayer;}` @paramprop`string` @returns`boolean` @paramelm1`any` @paramelm2`any` @returns`boolean` @paramelement`unknown` @returns`unknown` @paramelement`any` @paramselector`string` @parammulti`boolean` @returns`any[]` @paramelement`any` @paramprop`string` @paramdefaultValue`string | undefined` @returns`string` @paramelement`any` @paramkeyframes`Map[]` @paramduration`number` @paramdelay`number` @parameasing`string` @parampreviousPlayers`any[]` @paramscrubberAccessRequested`boolean | undefined` @returns`AnimationPlayer` Jump to details --- # AnimationBuilder • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationBuilder#api) --------------------------------------------------------------- `abstract class [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) { abstract build(animation: [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) | [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) []): [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) ;}` Builds a factory for producing a defined animation. @paramanimation`[AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) | [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) []` A reusable animation definition. @returns`[AnimationFactory](https://angular.dev/api/animations/AnimationFactory) ` [Usage Notes](https://angular.dev/api/animations/AnimationBuilder#usage-notes) ------------------------------------------------------------------------------- To use this service, add it to your component or directive as a dependency. The service is instantiated along with your component. Apps do not typically need to create their own animation players, but if you do need to, follow these steps: 1. Use the `[AnimationBuilder.build](https://angular.dev/api/animations/api/animations/AnimationBuilder#build) ()` method to create a programmatic animation. The method returns an [`AnimationFactory`](https://angular.dev/api/animations/AnimationFactory) instance. 2. Use the factory object to create an [`AnimationPlayer`](https://angular.dev/api/animations/AnimationPlayer) and attach it to a DOM element. 3. Use the player object to control the animation programmatically. For example: // import the service from BrowserAnimationsModuleimport {AnimationBuilder} from '@angular/animations';// require the service as a dependencyclass MyCmp { constructor(private _builder: AnimationBuilder) {} makeAnimation(element: any) { // first define a reusable animation const myAnimation = this._builder.build([ style({ width: 0 }), animate(1000, style({ width: '100px' })) ]); // use the returned factory object to create a player const player = myAnimation.create(element); player.play(); }} Jump to details --- # MockAnimationDriver • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations/browser/testing * [MockAnimationDriver](https://angular.dev/api/animations/browser/testing/MockAnimationDriver) * [MockAnimationPlayer](https://angular.dev/api/animations/browser/testing/MockAnimationPlayer) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/browser/testing/MockAnimationDriver#api) ---------------------------------------------------------------------------------- `class [MockAnimationDriver](https://angular.dev/api/animations/browser/testing/MockAnimationDriver) implements AnimationDriver { validateStyleProperty(prop: string): boolean; validateAnimatableStyleProperty(prop: string): boolean; containsElement(elm1: any, elm2: any): boolean; getParentElement(element: unknown): unknown; query(element: any, selector: string, multi: boolean): any[]; computeStyle(element: any, prop: string, defaultValue?: string | undefined): string; animate(element: any, keyframes: ɵStyleDataMap[], duration: number, delay: number, easing: string, previousPlayers?: any[]): [MockAnimationPlayer](https://angular.dev/api/animations/browser/testing/MockAnimationPlayer) ; static log: AnimationPlayer[];}` @paramprop`string` @returns`boolean` @paramprop`string` @returns`boolean` @paramelm1`any` @paramelm2`any` @returns`boolean` @paramelement`unknown` @returns`unknown` @paramelement`any` @paramselector`string` @parammulti`boolean` @returns`any[]` @paramelement`any` @paramprop`string` @paramdefaultValue`string | undefined` @returns`string` @paramelement`any` @paramkeyframes`ɵStyleDataMap[]` @paramduration`number` @paramdelay`number` @parameasing`string` @parampreviousPlayers`any[]` @returns`[MockAnimationPlayer](https://angular.dev/api/animations/browser/testing/MockAnimationPlayer) ` Jump to details --- # AnimationEvent • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationEvent#api) ------------------------------------------------------------- `interface [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) { fromState: string; toState: string; totalTime: number; phaseName: string; element: any; triggerName: string; disabled: boolean;}` The name of the state from which the animation is triggered. The name of the state in which the animation completes. The time it takes the animation to complete, in milliseconds. The animation phase in which the callback was invoked, one of "start" or "done". The element to which the animation is attached. Internal. Internal. [Description](https://angular.dev/api/animations/AnimationEvent#description) ----------------------------------------------------------------------------- An instance of this class is returned as an event parameter when an animation callback is captured for an animation either during the start or done phase. @Component({ host: { '[@myAnimationTrigger]': 'someExpression', '(@myAnimationTrigger.start)': 'captureStartEvent($event)', '(@myAnimationTrigger.done)': 'captureDoneEvent($event)', }, animations: [ trigger("myAnimationTrigger", [ // ... ]) ]})class MyComponent { someExpression: any = false; captureStartEvent(event: AnimationEvent) { // the toState, fromState and totalTime data is accessible from the event variable } captureDoneEvent(event: AnimationEvent) { // the toState, fromState and totalTime data is accessible from the event variable }} Jump to details --- # AccordionContent • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/accordion * [AccordionContent](https://angular.dev/api/aria/accordion/AccordionContent) * [AccordionGroup](https://angular.dev/api/aria/accordion/AccordionGroup) * [AccordionPanel](https://angular.dev/api/aria/accordion/AccordionPanel) * [AccordionTrigger](https://angular.dev/api/aria/accordion/AccordionTrigger) [API](https://angular.dev/api/aria/accordion/AccordionContent#api) ------------------------------------------------------------------- `class [AccordionContent](https://angular.dev/api/aria/accordion/AccordionContent) {}` [Description](https://angular.dev/api/aria/accordion/AccordionContent#description) ----------------------------------------------------------------------------------- A structural directive that provides a mechanism for lazily rendering the content for an `ngAccordionPanel`. This directive should be applied to an `ng-template` inside an `ngAccordionPanel`. It allows the content of the panel to be lazily rendered, improving performance by only creating the content when the panel is first expanded.

This is the content that will be displayed inside the panel.

Jump to details --- # AccordionPanel • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/accordion * [AccordionContent](https://angular.dev/api/aria/accordion/AccordionContent) * [AccordionGroup](https://angular.dev/api/aria/accordion/AccordionGroup) * [AccordionPanel](https://angular.dev/api/aria/accordion/AccordionPanel) * [AccordionTrigger](https://angular.dev/api/aria/accordion/AccordionTrigger) [API](https://angular.dev/api/aria/accordion/AccordionPanel#api) ----------------------------------------------------------------- `class [AccordionPanel](https://angular.dev/api/aria/accordion/AccordionPanel) { readonly id: InputSignal; readonly panelId: InputSignal; readonly visible: Signal; expand(): void; collapse(): void; toggle(): void;}` A global unique identifier for the panel. A local unique identifier for the panel, used to match with its trigger's `panelId`. Whether the accordion panel is visible. True if the associated trigger is expanded. Expands this item. @returns`void` Collapses this item. @returns`void` Toggles the expansion state of this item. @returns`void` [Description](https://angular.dev/api/aria/accordion/AccordionPanel#description) --------------------------------------------------------------------------------- The content panel of an accordion item that is conditionally visible. This directive is a container for the content that is shown or hidden. It requires a `panelId` that must match the `panelId` of its corresponding `ngAccordionTrigger`. The content within the panel should be provided using an `ng-template` with the `ngAccordionContent` directive so that the content is not rendered on the page until the trigger is expanded. It applies `role="region"` for accessibility and uses the `inert` attribute to hide its content from assistive technologies when not visible.

This content is lazily rendered and will be shown when the panel is expanded.

Jump to details --- # AccordionTrigger • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/accordion * [AccordionContent](https://angular.dev/api/aria/accordion/AccordionContent) * [AccordionGroup](https://angular.dev/api/aria/accordion/AccordionGroup) * [AccordionPanel](https://angular.dev/api/aria/accordion/AccordionPanel) * [AccordionTrigger](https://angular.dev/api/aria/accordion/AccordionTrigger) [API](https://angular.dev/api/aria/accordion/AccordionTrigger#api) ------------------------------------------------------------------- `class [AccordionTrigger](https://angular.dev/api/aria/accordion/AccordionTrigger) { readonly element: HTMLElement; readonly @Input() id: InputSignal; readonly @Input() panelId: InputSignal; readonly @Input() disabled: InputSignalWithTransform; readonly @Input() @Output('expandedChange') expanded: ModelSignal; readonly active: Signal; expand(): void; collapse(): void; toggle(): void;}` A reference to the trigger element. A unique identifier for the widget. A local unique identifier for the trigger, used to match with its panel's `panelId`. Whether the trigger is disabled. Whether the corresponding panel is expanded. Whether the trigger is active. Expands this item. @returns`void` Collapses this item. @returns`void` Toggles the expansion state of this item. @returns`void` [Description](https://angular.dev/api/aria/accordion/AccordionTrigger#description) ----------------------------------------------------------------------------------- The trigger that toggles the visibility of its associated `ngAccordionPanel`. This directive requires a `panelId` that must match the `panelId` of the `ngAccordionPanel` it controls. When clicked, it will expand or collapse the panel. It also handles keyboard interactions for navigation within the `ngAccordionGroup`. It applies `role="button"` and manages `aria-expanded`, `aria-controls`, and `aria-disabled` attributes for accessibility. The `disabled` input can be used to disable the trigger. Jump to details --- # AccordionGroup • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/accordion * [AccordionContent](https://angular.dev/api/aria/accordion/AccordionContent) * [AccordionGroup](https://angular.dev/api/aria/accordion/AccordionGroup) * [AccordionPanel](https://angular.dev/api/aria/accordion/AccordionPanel) * [AccordionTrigger](https://angular.dev/api/aria/accordion/AccordionTrigger) [API](https://angular.dev/api/aria/accordion/AccordionGroup#api) ----------------------------------------------------------------- `class [AccordionGroup](https://angular.dev/api/aria/accordion/AccordionGroup) { readonly element: HTMLElement; readonly textDirection: [WritableSignal](https://angular.dev/api/core/WritableSignal) ; readonly @Input() disabled: InputSignalWithTransform; readonly @Input() multiExpandable: InputSignalWithTransform; readonly @Input() softDisabled: InputSignalWithTransform; readonly @Input() wrap: InputSignalWithTransform; expandAll(): void; collapseAll(): void;}` A reference to the group element. The text direction (ltr or rtl). Whether the entire accordion group is disabled. Whether multiple accordion items can be expanded simultaneously. Whether to allow disabled items to receive focus. When `true`, disabled items are focusable but not interactive. When `false`, disabled items are skipped during navigation. Whether keyboard navigation should wrap around from the last item to the first, and vice-versa. Expands all accordion panels if multi-expandable. @returns`void` Collapses all accordion panels. @returns`void` [Description](https://angular.dev/api/aria/accordion/AccordionGroup#description) --------------------------------------------------------------------------------- A container for a group of accordion items. It manages the overall state and interactions of the accordion, such as keyboard navigation and expansion mode. The `ngAccordionGroup` serves as the root of a group of accordion triggers and panels, coordinating the behavior of the `ngAccordionTrigger` and `ngAccordionPanel` elements within it. It supports both single and multiple expansion modes.

Content for Item 1.

Content for Item 2.
Jump to details --- # ComboboxDialog • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/combobox * [Combobox](https://angular.dev/api/aria/combobox/Combobox) * [ComboboxDialog](https://angular.dev/api/aria/combobox/ComboboxDialog) * [ComboboxInput](https://angular.dev/api/aria/combobox/ComboboxInput) * [ComboboxPopup](https://angular.dev/api/aria/combobox/ComboboxPopup) * [ComboboxPopupContainer](https://angular.dev/api/aria/combobox/ComboboxPopupContainer) [API](https://angular.dev/api/aria/combobox/ComboboxDialog#api) ---------------------------------------------------------------- `class [ComboboxDialog](https://angular.dev/api/aria/combobox/ComboboxDialog) { readonly element: HTMLElement; readonly combobox: [Combobox](https://angular.dev/api/aria/combobox/Combobox) ; close(): void;}` A reference to the dialog element. The combobox that the dialog belongs to. @returns`void` [Description](https://angular.dev/api/aria/combobox/ComboboxDialog#description) -------------------------------------------------------------------------------- Integrates a native `` element with the combobox, allowing for a modal or non-modal popup experience. It handles the opening and closing of the dialog based on the combobox's expanded state. Jump to details --- # ComboboxInput • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/combobox * [Combobox](https://angular.dev/api/aria/combobox/Combobox) * [ComboboxDialog](https://angular.dev/api/aria/combobox/ComboboxDialog) * [ComboboxInput](https://angular.dev/api/aria/combobox/ComboboxInput) * [ComboboxPopup](https://angular.dev/api/aria/combobox/ComboboxPopup) * [ComboboxPopupContainer](https://angular.dev/api/aria/combobox/ComboboxPopupContainer) [API](https://angular.dev/api/aria/combobox/ComboboxInput#api) --------------------------------------------------------------- `class [ComboboxInput](https://angular.dev/api/aria/combobox/ComboboxInput) { readonly element: HTMLElement; readonly combobox: [Combobox](https://angular.dev/api/aria/combobox/Combobox) ; @Input() @Output('valueChange') value: ModelSignal;}` A reference to the input element. The combobox that the input belongs to. The value of the input. [Description](https://angular.dev/api/aria/combobox/ComboboxInput#description) ------------------------------------------------------------------------------- An input that is part of a combobox. It is responsible for displaying the current value and handling user input for filtering and selection. This directive should be applied to an `` element within an `ngCombobox` container. It automatically handles keyboard interactions, such as opening the popup and navigating through the options. Jump to details --- # ComboboxPopup • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/combobox * [Combobox](https://angular.dev/api/aria/combobox/Combobox) * [ComboboxDialog](https://angular.dev/api/aria/combobox/ComboboxDialog) * [ComboboxInput](https://angular.dev/api/aria/combobox/ComboboxInput) * [ComboboxPopup](https://angular.dev/api/aria/combobox/ComboboxPopup) * [ComboboxPopupContainer](https://angular.dev/api/aria/combobox/ComboboxPopupContainer) [API](https://angular.dev/api/aria/combobox/ComboboxPopup#api) --------------------------------------------------------------- `class [ComboboxPopup](https://angular.dev/api/aria/combobox/ComboboxPopup) { readonly combobox: [Combobox](https://angular.dev/api/aria/combobox/Combobox) | null;}` The combobox that the popup belongs to. [Description](https://angular.dev/api/aria/combobox/ComboboxPopup#description) ------------------------------------------------------------------------------- Identifies an element as a popup for an `ngCombobox`. This directive acts as a bridge, allowing the `ngCombobox` to discover and interact with the underlying control (e.g., `ngListbox`, `ngTree`, or `ngComboboxDialog`) that manages the options. It's primarily used as a host directive and is responsible for exposing the popup's control pattern to the parent combobox. Jump to details --- # AnimationGroupMetadata • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationGroupMetadata#api) --------------------------------------------------------------------- `interface [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) extends [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) { steps: [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) []; options: [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) | null; override type: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) ;}` One or more animation or style steps that form this group. An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation. Default delay is 0. Jump to details --- # ComboboxPopupContainer • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/combobox * [Combobox](https://angular.dev/api/aria/combobox/Combobox) * [ComboboxDialog](https://angular.dev/api/aria/combobox/ComboboxDialog) * [ComboboxInput](https://angular.dev/api/aria/combobox/ComboboxInput) * [ComboboxPopup](https://angular.dev/api/aria/combobox/ComboboxPopup) * [ComboboxPopupContainer](https://angular.dev/api/aria/combobox/ComboboxPopupContainer) [API](https://angular.dev/api/aria/combobox/ComboboxPopupContainer#api) ------------------------------------------------------------------------ `class [ComboboxPopupContainer](https://angular.dev/api/aria/combobox/ComboboxPopupContainer) {}` [Description](https://angular.dev/api/aria/combobox/ComboboxPopupContainer#description) ---------------------------------------------------------------------------------------- A structural directive that marks the `ng-template` to be used as the popup for a combobox. This content is conditionally rendered. The content of the popup can be a `ngListbox`, `ngTree`, or `role="dialog"`, allowing for flexible and complex combobox implementations. The consumer is responsible for implementing the filtering logic based on the `ngComboboxInput`'s value.
When using CdkOverlay, this directive can be replaced by `cdkConnectedOverlay`.
Jump to details --- # Combobox • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/combobox * [Combobox](https://angular.dev/api/aria/combobox/Combobox) * [ComboboxDialog](https://angular.dev/api/aria/combobox/ComboboxDialog) * [ComboboxInput](https://angular.dev/api/aria/combobox/ComboboxInput) * [ComboboxPopup](https://angular.dev/api/aria/combobox/ComboboxPopup) * [ComboboxPopupContainer](https://angular.dev/api/aria/combobox/ComboboxPopupContainer) [API](https://angular.dev/api/aria/combobox/Combobox#api) ---------------------------------------------------------- `class [Combobox](https://angular.dev/api/aria/combobox/Combobox) { protected textDirection: Signal; readonly element: HTMLElement; readonly popup: Signal<[ComboboxPopup](https://angular.dev/api/aria/combobox/ComboboxPopup) | undefined>; filterMode: InputSignal<"manual" | "auto-select" | "highlight">; readonly disabled: InputSignalWithTransform; readonly readonly: InputSignalWithTransform; readonly firstMatch: InputSignal; readonly expanded: Signal; readonly alwaysExpanded: InputSignalWithTransform; readonly inputElement: Signal; open(): void; close(): void;}` A signal wrapper for directionality. A reference to the combobox element. The combobox popup. The filter mode for the combobox. * `manual`: The consumer is responsible for filtering the options. * `auto-select`: The combobox automatically selects the first matching option. * `highlight`: The combobox highlights matching text in the options without changing selection. Whether the combobox is disabled. Whether the combobox is read-only. The value of the first matching item in the popup. Whether the combobox is expanded. Whether the combobox popup should always be expanded, regardless of user interaction. Input element connected to the combobox, if any. Opens the combobox to the selected item. @returns`void` Closes the combobox. @returns`void` [Description](https://angular.dev/api/aria/combobox/Combobox#description) -------------------------------------------------------------------------- The container element that wraps a combobox input and popup, and orchestrates its behavior. The `ngCombobox` directive is the main entry point for creating a combobox and customizing its behavior. It coordinates the interactions between the `ngComboboxInput` and the popup, which is defined by a `ng-template` with the `ngComboboxPopupContainer` directive. If using the `CdkOverlay`, the `cdkConnectedOverlay` directive takes the place of `ngComboboxPopupContainer`.
@for (option of filteredOptions(); track option) {
{{option}}
}
Jump to details --- # GridRow • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/grid * [Grid](https://angular.dev/api/aria/grid/Grid) * [GridCell](https://angular.dev/api/aria/grid/GridCell) * [GridCellWidget](https://angular.dev/api/aria/grid/GridCellWidget) * [GridRow](https://angular.dev/api/aria/grid/GridRow) [API](https://angular.dev/api/aria/grid/GridRow#api) ----------------------------------------------------- `class [GridRow](https://angular.dev/api/aria/grid/GridRow) { readonly element: HTMLElement; readonly @Input() rowIndex: InputSignal;}` A reference to the host element. The index of this row within the grid. [Description](https://angular.dev/api/aria/grid/GridRow#description) --------------------------------------------------------------------- Represents a row within a grid. It is a container for `ngGridCell` directives. Jump to details --- # Option • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/listbox * [Listbox](https://angular.dev/api/aria/listbox/Listbox) * [Option](https://angular.dev/api/aria/listbox/Option) [API](https://angular.dev/api/aria/listbox/Option#api) ------------------------------------------------------- `class [Option](https://angular.dev/api/aria/listbox/Option) { readonly element: HTMLElement; active: Signal; readonly @Input() id: InputSignal; protected searchTerm: Signal; @Input() value: InputSignal; @Input() disabled: InputSignalWithTransform; @Input() label: InputSignal; readonly selected: Signal;}` A reference to the host element. Whether the option is currently active (focused). A unique identifier for the option. The text used by the typeahead search. The value of the option. Whether an item is disabled. The text used by the typeahead search. Whether the option is selected. [Description](https://angular.dev/api/aria/listbox/Option#description) ----------------------------------------------------------------------- A selectable option in an `ngListbox`. This directive should be applied to an element (e.g., `
  • `, `
    `) within an `ngListbox`. The `value` input is used to identify the option, and the `label` input provides the accessible name for the option.
  • Item Name
    • Jump to details --- # ToolbarWidgetGroup • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/toolbar * [Toolbar](https://angular.dev/api/aria/toolbar/Toolbar) * [ToolbarWidget](https://angular.dev/api/aria/toolbar/ToolbarWidget) * [ToolbarWidgetGroup](https://angular.dev/api/aria/toolbar/ToolbarWidgetGroup) [API](https://angular.dev/api/aria/toolbar/ToolbarWidgetGroup#api) ------------------------------------------------------------------- `class [ToolbarWidgetGroup](https://angular.dev/api/aria/toolbar/ToolbarWidgetGroup) { readonly element: HTMLElement; readonly @Input() disabled: InputSignalWithTransform; readonly @Input() multi: InputSignalWithTransform;}` A reference to the host element. Whether the widget group is disabled. Whether the group allows multiple widgets to be selected. Jump to details --- # AnimationKeyframesSequenceMetadata • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata#api) --------------------------------------------------------------------------------- `interface [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) extends [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) { steps: [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) []; override type: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) ;}` An array of animation styles. Jump to details --- # MenuContent • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/menu * [Menu](https://angular.dev/api/aria/menu/Menu) * [MenuBar](https://angular.dev/api/aria/menu/MenuBar) * [MenuContent](https://angular.dev/api/aria/menu/MenuContent) * [MenuItem](https://angular.dev/api/aria/menu/MenuItem) * [MenuTrigger](https://angular.dev/api/aria/menu/MenuTrigger) [API](https://angular.dev/api/aria/menu/MenuContent#api) --------------------------------------------------------- `class [MenuContent](https://angular.dev/api/aria/menu/MenuContent) {}` [Description](https://angular.dev/api/aria/menu/MenuContent#description) ------------------------------------------------------------------------- Defers the rendering of the menu content. This structural directive should be applied to an `ng-template` within a `ngMenu` or `ngMenuBar` to lazily render its content only when the menu is opened.
    Lazy Item 1
    Lazy Item 2
    Jump to details --- # GridCell • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/grid * [Grid](https://angular.dev/api/aria/grid/Grid) * [GridCell](https://angular.dev/api/aria/grid/GridCell) * [GridCellWidget](https://angular.dev/api/aria/grid/GridCellWidget) * [GridRow](https://angular.dev/api/aria/grid/GridRow) [API](https://angular.dev/api/aria/grid/GridCell#api) ------------------------------------------------------ `class [GridCell](https://angular.dev/api/aria/grid/GridCell) { readonly element: HTMLElement; readonly active: [Signal](https://angular.dev/api/core/Signal) ; readonly textDirection: WritableSignal; readonly @Input() id: InputSignal; readonly @Input() role: InputSignal<"gridcell" | "columnheader" | "rowheader">; readonly @Input() rowSpan: InputSignal; readonly @Input() colSpan: InputSignal; readonly @Input() rowIndex: InputSignal; readonly @Input() colIndex: InputSignal; readonly @Input() disabled: InputSignalWithTransform; readonly @Input() @Output('selectedChange') selected: ModelSignal; readonly @Input() selectable: InputSignal; readonly @Input() orientation: InputSignal<"vertical" | "horizontal">; readonly @Input() wrap: InputSignalWithTransform; readonly @Input() tabindex: InputSignal;}` A reference to the host element. Whether the cell is currently active (focused). Text direction. A unique identifier for the cell. The ARIA role for the cell. The number of rows the cell should span. The number of columns the cell should span. The index of this cell's row within the grid. The index of this cell's column within the grid. Whether the cell is disabled. Whether the cell is selected. Whether the cell is selectable. Orientation of the widgets in the cell. Whether widgets navigation wraps. The tabindex override. [Description](https://angular.dev/api/aria/grid/GridCell#description) ---------------------------------------------------------------------- Represents a cell within a grid row. It is the primary focusable element within the grid. It can be disabled and can have its selection state managed through the `selected` input. Cell Content Jump to details --- # Grid • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/grid * [Grid](https://angular.dev/api/aria/grid/Grid) * [GridCell](https://angular.dev/api/aria/grid/GridCell) * [GridCellWidget](https://angular.dev/api/aria/grid/GridCellWidget) * [GridRow](https://angular.dev/api/aria/grid/GridRow) [API](https://angular.dev/api/aria/grid/Grid#api) -------------------------------------------------- `class [Grid](https://angular.dev/api/aria/grid/Grid) { readonly element: HTMLElement; readonly textDirection: WritableSignal; readonly @Input() enableSelection: InputSignalWithTransform; readonly @Input() disabled: InputSignalWithTransform; readonly @Input() softDisabled: InputSignalWithTransform; readonly @Input() focusMode: InputSignal<"roving" | "activedescendant">; readonly @Input() rowWrap: InputSignal<"continuous" | "loop" | "nowrap">; readonly @Input() colWrap: InputSignal<"continuous" | "loop" | "nowrap">; readonly @Input() multi: InputSignalWithTransform; readonly @Input() selectionMode: InputSignal<"follow" | "explicit">; readonly @Input() enableRangeSelection: InputSignalWithTransform;}` A reference to the host element. Text direction. Whether selection is enabled for the grid. Whether the grid is disabled. Whether to allow disabled items to receive focus. When `true`, disabled items are focusable but not interactive. When `false`, disabled items are skipped during navigation. The focus strategy used by the grid. * `roving`: Focus is moved to the active cell using `tabindex`. * `activedescendant`: Focus remains on the grid container, and `aria-activedescendant` is used to indicate the active cell. The wrapping behavior for keyboard navigation along the row axis. * `continuous`: Navigation wraps from the last row to the first, and vice-versa. * `loop`: Navigation wraps within the current row. * `nowrap`: Navigation stops at the first/last item in the row. The wrapping behavior for keyboard navigation along the column axis. * `continuous`: Navigation wraps from the last column to the first, and vice-versa. * `loop`: Navigation wraps within the current column. * `nowrap`: Navigation stops at the first/last item in the column. Whether multiple cells in the grid can be selected. The selection strategy used by the grid. * `follow`: The focused cell is automatically selected. * `explicit`: Cells are selected explicitly by the user (e.g., via click or spacebar). Whether enable range selections (with modifier keys or dragging). [Description](https://angular.dev/api/aria/grid/Grid#description) ------------------------------------------------------------------ The container for a grid. It provides keyboard navigation and focus management for the grid's rows and cells. It manages the overall behavior of the grid, including focus wrapping, selection, and disabled states. @for (row of gridData; track row) { @for (cell of row; track cell) { } }
    {{cell.value}}
    Jump to details --- # Listbox • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/listbox * [Listbox](https://angular.dev/api/aria/listbox/Listbox) * [Option](https://angular.dev/api/aria/listbox/Option) [API](https://angular.dev/api/aria/listbox/Listbox#api) -------------------------------------------------------- `class [Listbox](https://angular.dev/api/aria/listbox/Listbox) { readonly id: InputSignal; readonly element: HTMLElement; protected textDirection: Signal; protected items: Signal[]>; orientation: InputSignal<"vertical" | "horizontal">; multi: InputSignalWithTransform; wrap: InputSignalWithTransform; softDisabled: InputSignalWithTransform; focusMode: InputSignal<"roving" | "activedescendant">; selectionMode: InputSignal<"follow" | "explicit">; typeaheadDelay: InputSignal; disabled: InputSignalWithTransform; readonly: InputSignalWithTransform; values: ModelSignal; scrollActiveItemIntoView(options?: ScrollIntoViewOptions): void; gotoFirst(): void;}` A unique identifier for the listbox. A reference to the host element. A signal wrapper for directionality. The Option UIPatterns of the child Options. Whether the list is vertically or horizontally oriented. Whether multiple items in the list can be selected at once. Whether focus should wrap when navigating. Whether to allow disabled items to receive focus. When `true`, disabled items are focusable but not interactive. When `false`, disabled items are skipped during navigation. The focus strategy used by the list. * `roving`: Focus is moved to the active item using `tabindex`. * `activedescendant`: Focus remains on the listbox container, and `aria-activedescendant` is used to indicate the active item. The selection strategy used by the list. * `follow`: The focused item is automatically selected. * `explicit`: Items are selected explicitly by the user (e.g., via click or spacebar). The amount of time before the typeahead search is reset. Whether the listbox is disabled. Whether the listbox is readonly. The values of the currently selected items. @paramoptions`ScrollIntoViewOptions` @returns`void` Navigates to the first item in the listbox. @returns`void` [Description](https://angular.dev/api/aria/listbox/Listbox#description) ------------------------------------------------------------------------ Represents a container used to display a list of items for a user to select from. The `ngListbox` is meant to be used in conjunction with `ngOption` directives to create a selectable list. It supports single and multiple selection modes, as well as various focus and orientation strategies.
      @for (item of items; track item.id) {
    • {{item.name}}
      • }
    Jump to details --- # AnimationMetadata • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationMetadata#api) ---------------------------------------------------------------- `interface [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) { type: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) ;}` Jump to details --- # TabContent • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/tabs * [Tab](https://angular.dev/api/aria/tabs/Tab) * [TabContent](https://angular.dev/api/aria/tabs/TabContent) * [TabList](https://angular.dev/api/aria/tabs/TabList) * [TabPanel](https://angular.dev/api/aria/tabs/TabPanel) * [Tabs](https://angular.dev/api/aria/tabs/Tabs) [API](https://angular.dev/api/aria/tabs/TabContent#api) -------------------------------------------------------- `class [TabContent](https://angular.dev/api/aria/tabs/TabContent) {}` [Description](https://angular.dev/api/aria/tabs/TabContent#description) ------------------------------------------------------------------------ A TabContent container for the lazy-loaded content. This structural directive should be applied to an `ng-template` within an `ngTabPanel`. It enables lazy loading of the tab's content, meaning the content is only rendered when the tab is activated for the first time.

    This content will be loaded when 'myTabId' is selected.

    Jump to details --- # MenuBar • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/menu * [Menu](https://angular.dev/api/aria/menu/Menu) * [MenuBar](https://angular.dev/api/aria/menu/MenuBar) * [MenuContent](https://angular.dev/api/aria/menu/MenuContent) * [MenuItem](https://angular.dev/api/aria/menu/MenuItem) * [MenuTrigger](https://angular.dev/api/aria/menu/MenuTrigger) [API](https://angular.dev/api/aria/menu/MenuBar#api) ----------------------------------------------------- `class [MenuBar](https://angular.dev/api/aria/menu/MenuBar) { readonly element: HTMLElement; readonly @Input() disabled: InputSignalWithTransform; readonly @Input() softDisabled: InputSignalWithTransform; readonly textDirection: WritableSignal; readonly @Input() @Output('valuesChange') values: ModelSignal; readonly @Input() wrap: InputSignalWithTransform; readonly @Input() typeaheadDelay: InputSignal; @Output() onSelect: OutputEmitterRef; close(): void;}` A reference to the host element. Whether the menubar is disabled. Whether the menubar is soft disabled. The directionality (LTR / RTL) context for the application (or a subtree of it). The values of the currently selected menu items. Whether the menu should wrap its items. The delay in milliseconds before the typeahead buffer is cleared. A callback function triggered when a menu item is selected. Closes the menubar. @returns`void` [Description](https://angular.dev/api/aria/menu/MenuBar#description) --------------------------------------------------------------------- A menu bar of menu items. Like the `ngMenu`, a `ngMenuBar` is used to offer a list of menu item choices to users. However, a menubar is used to display a persistent, top-level, always-visible set of menu item choices, typically found at the top of an application window.
    New
    Open
    Cut
    Copy
    Jump to details --- # Tabs • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/tabs * [Tab](https://angular.dev/api/aria/tabs/Tab) * [TabContent](https://angular.dev/api/aria/tabs/TabContent) * [TabList](https://angular.dev/api/aria/tabs/TabList) * [TabPanel](https://angular.dev/api/aria/tabs/TabPanel) * [Tabs](https://angular.dev/api/aria/tabs/Tabs) [API](https://angular.dev/api/aria/tabs/Tabs#api) -------------------------------------------------- `class [Tabs](https://angular.dev/api/aria/tabs/Tabs) { readonly element: HTMLElement;}` A reference to the host element. [Description](https://angular.dev/api/aria/tabs/Tabs#description) ------------------------------------------------------------------ A Tabs container. The `ngTabs` directive represents a set of layered sections of content. It acts as the overarching container for a tabbed interface, coordinating the behavior of `ngTabList`, `ngTab`, and `ngTabPanel` directives.
    • Tab 1
    • Tab 2
    • Tab 3
    Content for Tab 1
    Content for Tab 2
    Content for Tab 3
    Jump to details --- # ToolbarWidget • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/toolbar * [Toolbar](https://angular.dev/api/aria/toolbar/Toolbar) * [ToolbarWidget](https://angular.dev/api/aria/toolbar/ToolbarWidget) * [ToolbarWidgetGroup](https://angular.dev/api/aria/toolbar/ToolbarWidgetGroup) [API](https://angular.dev/api/aria/toolbar/ToolbarWidget#api) -------------------------------------------------------------- `class [ToolbarWidget](https://angular.dev/api/aria/toolbar/ToolbarWidget) implements [OnInit](https://angular.dev/api/core/OnInit) ,[OnDestroy](https://angular.dev/api/core/OnDestroy) { readonly element: HTMLElement; readonly @Input() id: InputSignal; readonly @Input() disabled: InputSignalWithTransform; readonly hardDisabled: Signal; readonly @Input() value: InputSignal; readonly active: Signal; readonly selected: () => any;}` A reference to the host element. A unique identifier for the widget. Whether the widget is disabled. Whether the widget is 'hard' disabled, which is different from `aria-disabled`. A hard disabled widget cannot receive focus. The value associated with the widget. Whether the widget is currently active (focused). Whether the widget is selected (only relevant in a selection group). @returns`void` @returns`void` [Description](https://angular.dev/api/aria/toolbar/ToolbarWidget#description) ------------------------------------------------------------------------------ A widget within a toolbar. The `ngToolbarWidget` directive should be applied to any native HTML element that acts as an interactive widget within an `ngToolbar` or `ngToolbarWidgetGroup`. It enables keyboard navigation and selection within the toolbar. Jump to details --- # Toolbar • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/toolbar * [Toolbar](https://angular.dev/api/aria/toolbar/Toolbar) * [ToolbarWidget](https://angular.dev/api/aria/toolbar/ToolbarWidget) * [ToolbarWidgetGroup](https://angular.dev/api/aria/toolbar/ToolbarWidgetGroup) [API](https://angular.dev/api/aria/toolbar/Toolbar#api) -------------------------------------------------------- `class [Toolbar](https://angular.dev/api/aria/toolbar/Toolbar) { readonly element: HTMLElement; readonly textDirection: WritableSignal; readonly @Input() orientation: InputSignal<"vertical" | "horizontal">; @Input() softDisabled: InputSignalWithTransform; readonly @Input() disabled: InputSignalWithTransform; readonly @Input() wrap: InputSignalWithTransform; readonly @Input() @Output('valuesChange') values: ModelSignal;}` A reference to the host element. Text direction. Whether the toolbar is vertically or horizontally oriented. Whether to allow disabled items to receive focus. When `true`, disabled items are focusable but not interactive. When `false`, disabled items are skipped during navigation. Whether the toolbar is disabled. Whether focus should wrap when navigating. The values of the selected widgets within the toolbar. [Description](https://angular.dev/api/aria/toolbar/Toolbar#description) ------------------------------------------------------------------------ A toolbar widget container for a group of interactive widgets, such as buttons or radio groups. It provides a single point of reference for keyboard navigation and focus management. It supports various orientations and disabled states.
    Jump to details --- # GridCellWidget • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/grid * [Grid](https://angular.dev/api/aria/grid/Grid) * [GridCell](https://angular.dev/api/aria/grid/GridCell) * [GridCellWidget](https://angular.dev/api/aria/grid/GridCellWidget) * [GridRow](https://angular.dev/api/aria/grid/GridRow) [API](https://angular.dev/api/aria/grid/GridCellWidget#api) ------------------------------------------------------------ `class [GridCellWidget](https://angular.dev/api/aria/grid/GridCellWidget) { readonly element: HTMLElement; readonly active: [Signal](https://angular.dev/api/core/Signal) ; readonly @Input() id: InputSignal; readonly @Input() widgetType: InputSignal<"simple" | "complex" | "editable">; readonly @Input() disabled: InputSignalWithTransform; readonly @Input() focusTarget: InputSignal | undefined>; readonly @Output() onActivate: OutputEmitterRef; readonly @Output() onDeactivate: OutputEmitterRef; readonly @Input() tabindex: InputSignal; readonly isActivated: [Signal](https://angular.dev/api/core/Signal) ; activate(): void; deactivate(): void;}` A reference to the host element. Whether the widget is currently active (focused). A unique identifier for the widget. The type of widget, which determines how it is activated. Whether the widget is disabled. The target that will receive focus instead of the widget. Emits when the widget is activated. Emits when the widget is deactivated. The tabindex override. Whether the widget is activated. Activates the widget. @returns`void` Deactivates the widget. @returns`void` [Description](https://angular.dev/api/aria/grid/GridCellWidget#description) ---------------------------------------------------------------------------- Represents an interactive element inside a [`GridCell`](https://angular.dev/api/aria/grid/GridCell) . It allows for pausing grid navigation to interact with the widget. When the user interacts with the widget (e.g., by typing in an input or opening a menu), grid navigation is temporarily suspended to allow the widget to handle keyboard events. Jump to details --- # Tree • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/tree * [Tree](https://angular.dev/api/aria/tree/Tree) * [TreeItem](https://angular.dev/api/aria/tree/TreeItem) * [TreeItemGroup](https://angular.dev/api/aria/tree/TreeItemGroup) [API](https://angular.dev/api/aria/tree/Tree#api) -------------------------------------------------- `class [Tree](https://angular.dev/api/aria/tree/Tree) { readonly element: HTMLElement; readonly id: InputSignal; readonly orientation: InputSignal<"vertical" | "horizontal">; readonly multi: InputSignalWithTransform; readonly disabled: InputSignalWithTransform; readonly selectionMode: InputSignal<"explicit" | "follow">; readonly focusMode: InputSignal<"roving" | "activedescendant">; readonly wrap: InputSignalWithTransform; readonly softDisabled: InputSignalWithTransform; readonly typeaheadDelay: InputSignal; readonly values: ModelSignal; readonly textDirection: WritableSignal; readonly nav: InputSignalWithTransform; readonly currentType: InputSignal<"page" | "step" | "location" | "date" | "time" | "true" | "false">; scrollActiveItemIntoView(options?: ScrollIntoViewOptions): void;}` A reference to the host element. A unique identifier for the tree. Orientation of the tree. Whether multi-selection is allowed. Whether the tree is disabled. The selection strategy used by the tree. * `explicit`: Items are selected explicitly by the user (e.g., via click or spacebar). * `follow`: The focused item is automatically selected. The focus strategy used by the tree. * `roving`: Focus is moved to the active item using `tabindex`. * `activedescendant`: Focus remains on the tree container, and `aria-activedescendant` is used to indicate the active item. Whether navigation wraps. Whether to allow disabled items to receive focus. When `true`, disabled items are focusable but not interactive. When `false`, disabled items are skipped during navigation. The delay in seconds before the typeahead search is reset. The values of the currently selected items. Text direction. The `aria-current` type. It can be used in navigation trees to indicate the currently active item. See [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current) for more details. @paramoptions`ScrollIntoViewOptions` @returns`void` [Description](https://angular.dev/api/aria/tree/Tree#description) ------------------------------------------------------------------ A container that transforms nested lists into an accessible, ARIA-compliant tree structure. It manages the overall state of the tree, including selection, expansion, and keyboard navigation.
    @for (node of nodes; track node.name) {
  • {{ node.name }} @if (node.children) {
    }
    • }     Jump to details --- # AnimationMetadataType • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationMetadataType#api) -------------------------------------------------------------------- `enum [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) { State: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) .State; Transition: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) .Transition; Sequence: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) .Sequence; Group: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) .Group; Animate: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) .Animate; Keyframes: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) .Keyframes; Style: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) .Style; Trigger: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) .Trigger; Reference: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) .Reference; AnimateChild: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) .AnimateChild; AnimateRef: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) .AnimateRef; Query: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) .Query; Stagger: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) .Stagger;}` Associates a named animation state with a set of CSS styles. See [](https://angular.dev/api/animations/api/animations/state) [`state()`](https://angular.dev/api/animations/state) Data for a transition from one animation state to another. See [`transition()`](https://angular.dev/api/animations/transition) Contains a set of animation steps. See [`sequence()`](https://angular.dev/api/animations/sequence) Contains a set of animation steps. See `group()` Contains an animation step. See [`animate()`](https://angular.dev/api/animations/animate) Contains a set of animation steps. See [`keyframes()`](https://angular.dev/api/animations/keyframes) Contains a set of CSS property-value pairs into a named style. See [`style()`](https://angular.dev/api/animations/style) Associates an animation with an entry trigger that can be attached to an element. See [`trigger()`](https://angular.dev/api/animations/trigger) Contains a re-usable animation. See [`animation()`](https://angular.dev/api/animations/animation) Contains data to use in executing child animations returned by a query. See [`animateChild()`](https://angular.dev/api/animations/animateChild) Contains animation parameters for a re-usable animation. See [`useAnimation()`](https://angular.dev/api/animations/useAnimation) Contains child-animation query data. See [`query()`](https://angular.dev/api/animations/query) Contains data for staggering an animation sequence. See [`stagger()`](https://angular.dev/api/animations/stagger) [Description](https://angular.dev/api/animations/AnimationMetadataType#description) ------------------------------------------------------------------------------------ Constants for the categories of parameters that can be defined for animations. A corresponding function defines a set of parameters for each category, and collects them into a corresponding [`AnimationMetadata`](https://angular.dev/api/animations/AnimationMetadata) object. Jump to details --- # Tab • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/tabs * [Tab](https://angular.dev/api/aria/tabs/Tab) * [TabContent](https://angular.dev/api/aria/tabs/TabContent) * [TabList](https://angular.dev/api/aria/tabs/TabList) * [TabPanel](https://angular.dev/api/aria/tabs/TabPanel) * [Tabs](https://angular.dev/api/aria/tabs/Tabs) [API](https://angular.dev/api/aria/tabs/Tab#api) ------------------------------------------------- `class [Tab](https://angular.dev/api/aria/tabs/Tab) implements HasElement ,[OnInit](https://angular.dev/api/core/OnInit) ,[OnDestroy](https://angular.dev/api/core/OnDestroy) { readonly element: HTMLElement; readonly @Input() id: InputSignal; readonly @Input() disabled: InputSignalWithTransform; readonly @Input() value: InputSignal; readonly active: Signal; readonly selected: Signal; open(): void;}` A reference to the host element. A unique identifier for the widget. Whether a tab is disabled. The remote tabpanel unique identifier. Whether the tab is active. Whether the tab is selected. Opens this tab panel. @returns`void` @returns`void` @returns`void` [Description](https://angular.dev/api/aria/tabs/Tab#description) ----------------------------------------------------------------- A selectable tab in a TabList. The `ngTab` directive represents an individual tab control within an `ngTabList`. It requires a `value` that uniquely identifies it and links it to a corresponding `ngTabPanel`.
  • My Tab Label
    • Jump to details --- # TabPanel • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/tabs * [Tab](https://angular.dev/api/aria/tabs/Tab) * [TabContent](https://angular.dev/api/aria/tabs/TabContent) * [TabList](https://angular.dev/api/aria/tabs/TabList) * [TabPanel](https://angular.dev/api/aria/tabs/TabPanel) * [Tabs](https://angular.dev/api/aria/tabs/Tabs) [API](https://angular.dev/api/aria/tabs/TabPanel#api) ------------------------------------------------------ `class [TabPanel](https://angular.dev/api/aria/tabs/TabPanel) implements [OnInit](https://angular.dev/api/core/OnInit) ,[OnDestroy](https://angular.dev/api/core/OnDestroy) { readonly element: HTMLElement; readonly id: InputSignal; readonly value: InputSignal; readonly visible: Signal;}` A reference to the host element. A global unique identifier for the tab. A local unique identifier for the tabpanel. Whether the tab panel is visible. @returns`void` @returns`void` [Description](https://angular.dev/api/aria/tabs/TabPanel#description) ---------------------------------------------------------------------- A TabPanel container for the resources of layered content associated with a tab. The `ngTabPanel` directive holds the content for a specific tab. It is linked to an `ngTab` by a matching `value`. If a tab panel is hidden, the `inert` attribute will be applied to remove it from the accessibility tree. Proper styling is required for visual hiding.
    Jump to details --- # Menu • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/menu * [Menu](https://angular.dev/api/aria/menu/Menu) * [MenuBar](https://angular.dev/api/aria/menu/MenuBar) * [MenuContent](https://angular.dev/api/aria/menu/MenuContent) * [MenuItem](https://angular.dev/api/aria/menu/MenuItem) * [MenuTrigger](https://angular.dev/api/aria/menu/MenuTrigger) [API](https://angular.dev/api/aria/menu/Menu#api) -------------------------------------------------- `class [Menu](https://angular.dev/api/aria/menu/Menu) { readonly element: HTMLElement; readonly textDirection: WritableSignal; readonly id: InputSignal; readonly wrap: InputSignalWithTransform; readonly typeaheadDelay: InputSignal; readonly disabled: InputSignalWithTransform; readonly parent: WritableSignal<[MenuTrigger](https://angular.dev/api/aria/menu/MenuTrigger) | [MenuItem](https://angular.dev/api/aria/menu/MenuItem) | undefined>; readonly visible: [Signal](https://angular.dev/api/core/Signal) ; readonly tabIndex: [Signal](https://angular.dev/api/core/Signal) ; onSelect: OutputEmitterRef; readonly expansionDelay: InputSignal; close(): void;}` A reference to the host element. The directionality (LTR / RTL) context for the application (or a subtree of it). The unique ID of the menu. Whether the menu should wrap its items. The delay in milliseconds before the typeahead buffer is cleared. Whether the menu is disabled. A reference to the parent menu item or menu trigger. Whether the menu is visible. The tab index of the menu. A callback function triggered when a menu item is selected. The delay in milliseconds before expanding sub-menus on hover. Closes the menu. @returns`void` [Description](https://angular.dev/api/aria/menu/Menu#description) ------------------------------------------------------------------ A list of menu items. A `ngMenu` is used to offer a list of menu item choices to users. Menus can be nested within other menus to create sub-menus. It works in conjunction with `ngMenuTrigger` and `ngMenuItem` directives.
    Star
    Edit
    More
    Sub Item 1
    Sub Item 2
    Jump to details --- # MenuItem • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/menu * [Menu](https://angular.dev/api/aria/menu/Menu) * [MenuBar](https://angular.dev/api/aria/menu/MenuBar) * [MenuContent](https://angular.dev/api/aria/menu/MenuContent) * [MenuItem](https://angular.dev/api/aria/menu/MenuItem) * [MenuTrigger](https://angular.dev/api/aria/menu/MenuTrigger) [API](https://angular.dev/api/aria/menu/MenuItem#api) ------------------------------------------------------ `class [MenuItem](https://angular.dev/api/aria/menu/MenuItem) { readonly element: HTMLElement; readonly @Input() id: InputSignal; readonly @Input() value: InputSignal; readonly @Input() disabled: InputSignal; readonly @Input() @Output('searchTermChange') searchTerm: ModelSignal; readonly parent: [Menu](https://angular.dev/api/aria/menu/Menu) | [MenuBar](https://angular.dev/api/aria/menu/MenuBar) | null; readonly @Input() submenu: InputSignal<[Menu](https://angular.dev/api/aria/menu/Menu) | undefined>; readonly active: [Signal](https://angular.dev/api/core/Signal) ; readonly expanded: [Signal](https://angular.dev/api/core/Signal) ; readonly hasPopup: [Signal](https://angular.dev/api/core/Signal) ; open(): void; close(): void;}` A reference to the host element. The unique ID of the menu item. The value of the menu item. Whether the menu item is disabled. The search term associated with the menu item. A reference to the parent menu or menubar. The submenu associated with the menu item. Whether the menu item is active. Whether the menu is expanded. Whether the menu item has a popup. Opens the submenu focusing on the first menu item. @returns`void` Closes the submenu. @returns`void` [Description](https://angular.dev/api/aria/menu/MenuItem#description) ---------------------------------------------------------------------- An item in a Menu. `ngMenuItem` directives can be used in `ngMenu` and `ngMenuBar` to represent a choice or action a user can take. They can also act as triggers for sub-menus.
    Action Item
    Submenu Trigger
    Jump to details --- # MenuTrigger • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/menu * [Menu](https://angular.dev/api/aria/menu/Menu) * [MenuBar](https://angular.dev/api/aria/menu/MenuBar) * [MenuContent](https://angular.dev/api/aria/menu/MenuContent) * [MenuItem](https://angular.dev/api/aria/menu/MenuItem) * [MenuTrigger](https://angular.dev/api/aria/menu/MenuTrigger) [API](https://angular.dev/api/aria/menu/MenuTrigger#api) --------------------------------------------------------- `class [MenuTrigger](https://angular.dev/api/aria/menu/MenuTrigger) { readonly element: HTMLElement; readonly textDirection: WritableSignal; @Input() menu: InputSignal<[Menu](https://angular.dev/api/aria/menu/Menu) | undefined>; readonly expanded: [Signal](https://angular.dev/api/core/Signal) ; readonly hasPopup: [Signal](https://angular.dev/api/core/Signal) ; readonly @Input() disabled: InputSignalWithTransform; readonly @Input() softDisabled: InputSignalWithTransform; open(): void; close(): void;}` A reference to the host element. The directionality (LTR / RTL) context for the application (or a subtree of it). The menu associated with the trigger. Whether the menu is expanded. Whether the menu trigger has a popup. Whether the menu trigger is disabled. Whether the menu trigger is soft disabled. Opens the menu focusing on the first menu item. @returns`void` Closes the menu. @returns`void` [Description](https://angular.dev/api/aria/menu/MenuTrigger#description) ------------------------------------------------------------------------- A trigger for a menu. The `ngMenuTrigger` directive is used to open and close menus. It can be applied to any interactive element (e.g., a button) to associate it with a `ngMenu` instance. It also supports linking to sub-menus when applied to a `ngMenuItem`.
    Item 1
    Item 2
    Jump to details --- # TreeItem • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/tree * [Tree](https://angular.dev/api/aria/tree/Tree) * [TreeItem](https://angular.dev/api/aria/tree/TreeItem) * [TreeItemGroup](https://angular.dev/api/aria/tree/TreeItemGroup) [API](https://angular.dev/api/aria/tree/TreeItem#api) ------------------------------------------------------ `class [TreeItem](https://angular.dev/api/aria/tree/TreeItem) extends DeferredContentAware implements [OnInit](https://angular.dev/api/core/OnInit) ,[OnDestroy](https://angular.dev/api/core/OnDestroy) ,HasElement { readonly element: HTMLElement; readonly @Input() id: InputSignal; readonly @Input() value: InputSignal; readonly @Input() parent: InputSignal<[Tree](https://angular.dev/api/aria/tree/Tree) | [TreeItemGroup](https://angular.dev/api/aria/tree/TreeItemGroup) >; readonly @Input() disabled: InputSignalWithTransform; readonly @Input() selectable: InputSignal; readonly @Input() @Output('expandedChange') expanded: ModelSignal; readonly @Input() label: InputSignal; readonly searchTerm: [Signal](https://angular.dev/api/core/Signal) ; readonly tree: [Signal](https://angular.dev/api/core/Signal) <[Tree](https://angular.dev/api/aria/tree/Tree) >; readonly active: [Signal](https://angular.dev/api/core/Signal) ; readonly level: [Signal](https://angular.dev/api/core/Signal) ; readonly selected: [Signal](https://angular.dev/api/core/Signal) ; readonly visible: [Signal](https://angular.dev/api/core/Signal) ;}` A reference to the host element. A unique identifier for the tree item. The value of the tree item. The parent tree root or tree item group. Whether the tree item is disabled. Whether the tree item is selectable. Whether the tree item is expanded. Optional label for typeahead. Defaults to the element's textContent. Search term for typeahead. The tree root. Whether the item is active. The level of the current item in a tree. Whether the item is selected. Whether this item is visible due to all of its parents being expanded. @returns`void` @returns`void` [Description](https://angular.dev/api/aria/tree/TreeItem#description) ---------------------------------------------------------------------- A selectable and expandable item in an `ngTree`. The `ngTreeItem` directive represents an individual node within an `ngTree`. It can be selected, expanded (if it has children), and disabled. The `parent` input establishes the hierarchical relationship within the tree.
  • Item Label
    • Jump to details --- # TreeItemGroup • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/tree * [Tree](https://angular.dev/api/aria/tree/Tree) * [TreeItem](https://angular.dev/api/aria/tree/TreeItem) * [TreeItemGroup](https://angular.dev/api/aria/tree/TreeItemGroup) [API](https://angular.dev/api/aria/tree/TreeItemGroup#api) ----------------------------------------------------------- `class [TreeItemGroup](https://angular.dev/api/aria/tree/TreeItemGroup) implements [OnInit](https://angular.dev/api/core/OnInit) ,[OnDestroy](https://angular.dev/api/core/OnDestroy) { readonly element: HTMLElement; readonly ownedBy: InputSignal<[TreeItem](https://angular.dev/api/aria/tree/TreeItem) >;}` A reference to the host element. Tree item that owns the group. @returns`void` @returns`void` [Description](https://angular.dev/api/aria/tree/TreeItemGroup#description) --------------------------------------------------------------------------- Group that contains children tree items. The `ngTreeItemGroup` structural directive should be applied to an `ng-template` that wraps the child `ngTreeItem` elements. It is used to define a group of children for an expandable `ngTreeItem`. The `ownedBy` input links the group to its parent `ngTreeItem`.
  • Parent Item
    • Child Item
      •
    • Jump to details --- # AnimationOptions • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationOptions#api) --------------------------------------------------------------- `interface [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) { delay?: string | number | undefined; params?: { [name: string]: any; } | undefined;}` Sets a time-delay for initiating an animation action. A number and optional time unit, such as "1s" or "10ms" for one second and 10 milliseconds, respectively.The default unit is milliseconds. Default value is 0, meaning no delay. A set of developer-defined parameters that modify styling and timing when an animation action starts. An array of key-value pairs, where the provided value is used as a default. [Description](https://angular.dev/api/animations/AnimationOptions#description) ------------------------------------------------------------------------------- Options that control animation styling and timing. The following animation functions accept [`AnimationOptions`](https://angular.dev/api/animations/AnimationOptions) data: * [`transition()`](https://angular.dev/api/animations/transition) * [`sequence()`](https://angular.dev/api/animations/sequence) * `group()` * [`query()`](https://angular.dev/api/animations/query) * [`animation()`](https://angular.dev/api/animations/animation) * [`useAnimation()`](https://angular.dev/api/animations/useAnimation) * [`animateChild()`](https://angular.dev/api/animations/animateChild) Programmatic animations built using the [`AnimationBuilder`](https://angular.dev/api/animations/AnimationBuilder) service also make use of [`AnimationOptions`](https://angular.dev/api/animations/AnimationOptions) . Jump to details --- # AnimationQueryMetadata • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationQueryMetadata#api) --------------------------------------------------------------------- `interface [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) extends [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) { selector: string; animation: [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) | [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) []; options: [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) | null; override type: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) ;}` The CSS selector for this query. One or more animation step objects. A query options object. Jump to details --- # TabList • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/aria/tabs * [Tab](https://angular.dev/api/aria/tabs/Tab) * [TabContent](https://angular.dev/api/aria/tabs/TabContent) * [TabList](https://angular.dev/api/aria/tabs/TabList) * [TabPanel](https://angular.dev/api/aria/tabs/TabPanel) * [Tabs](https://angular.dev/api/aria/tabs/Tabs) [API](https://angular.dev/api/aria/tabs/TabList#api) ----------------------------------------------------- `class [TabList](https://angular.dev/api/aria/tabs/TabList) implements [OnInit](https://angular.dev/api/core/OnInit) ,[OnDestroy](https://angular.dev/api/core/OnDestroy) { readonly element: HTMLElement; readonly textDirection: WritableSignal; readonly @Input() orientation: InputSignal<"vertical" | "horizontal">; readonly @Input() wrap: InputSignalWithTransform; readonly @Input() softDisabled: InputSignalWithTransform; readonly @Input() focusMode: InputSignal<"roving" | "activedescendant">; readonly @Input() selectionMode: InputSignal<"follow" | "explicit">; readonly @Input() @Output('selectedTabChange') selectedTab: ModelSignal; readonly @Input() disabled: InputSignalWithTransform; open(value: string): boolean;}` A reference to the host element. Text direction. Whether the tablist is vertically or horizontally oriented. Whether focus should wrap when navigating. Whether to allow disabled items to receive focus. When `true`, disabled items are focusable but not interactive. When `false`, disabled items are skipped during navigation. The focus strategy used by the tablist. * `roving`: Focus is moved to the active tab using `tabindex`. * `activedescendant`: Focus remains on the tablist container, and `aria-activedescendant` is used to indicate the active tab. The selection strategy used by the tablist. * `follow`: The focused tab is automatically selected. * `explicit`: Tabs are selected explicitly by the user (e.g., via click or spacebar). The current selected tab. Whether the tablist is disabled. @returns`void` @returns`void` Opens the tab panel with the specified value. @paramvalue`string` @returns`boolean` [Description](https://angular.dev/api/aria/tabs/TabList#description) --------------------------------------------------------------------- A TabList container. The `ngTabList` directive controls a list of `ngTab` elements. It manages keyboard navigation, selection, and the overall orientation of the tabs. It should be placed within an `ngTabs` container.
    • First Tab
    • Second Tab
    Jump to details --- # AnimationReferenceMetadata • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationReferenceMetadata#api) ------------------------------------------------------------------------- `interface [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) extends [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) { animation: [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) | [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) []; options: [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) | null; override type: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) ;}` One or more animation step objects. An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation. Default delay is 0. Jump to details --- # AnimationQueryOptions • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationQueryOptions#api) -------------------------------------------------------------------- `interface [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) extends [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) { optional?: boolean | undefined; limit?: number | undefined; override delay?: string | number | undefined; override params?: { [name: string]: any; } | undefined;}` True if this query is optional, false if it is required. Default is false. A required query throws an error if no elements are retrieved when the query is executed. An optional query does not. A maximum total number of results to return from the query. If negative, results are limited from the end of the query list towards the beginning. By default, results are not limited. Sets a time-delay for initiating an animation action. A number and optional time unit, such as "1s" or "10ms" for one second and 10 milliseconds, respectively.The default unit is milliseconds. Default value is 0, meaning no delay. A set of developer-defined parameters that modify styling and timing when an animation action starts. An array of key-value pairs, where the provided value is used as a default. Jump to details --- # AnimationStaggerMetadata • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationStaggerMetadata#api) ----------------------------------------------------------------------- `interface [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) extends [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) { timings: string | number; animation: [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) | [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) []; override type: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) ;}` The timing data for the steps. One or more animation steps. Jump to details --- # AnimationPlayer • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationPlayer#api) -------------------------------------------------------------- `interface [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) { onDone(fn: () => void): void; onStart(fn: () => void): void; onDestroy(fn: () => void): void; init(): void; hasStarted(): boolean; play(): void; pause(): void; restart(): void; finish(): void; destroy(): void; reset(): void; setPosition(position: number): void; getPosition(): number; parentPlayer: [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) | null; readonly totalTime: number; beforeDestroy?: (() => any) | undefined;}` Provides a callback to invoke when the animation finishes. @paramfn`() => void` The callback function. @returns`void` Provides a callback to invoke when the animation starts. @paramfn`() => void` The callback function. @returns`void` Provides a callback to invoke after the animation is destroyed. @paramfn`() => void` The callback function. @returns`void` Initializes the animation. @returns`void` Reports whether the animation has started. @returns`boolean` Runs the animation, invoking the `onStart()` callback. @returns`void` Pauses the animation. @returns`void` Restarts the paused animation. @returns`void` Ends the animation, invoking the `onDone()` callback. @returns`void` Destroys the animation, after invoking the `beforeDestroy()` callback. Calls the `onDestroy()` callback when destruction is completed. @returns`void` Resets the animation to its initial state. @returns`void` Sets the position of the animation. @paramposition`number` A fractional value, representing the progress through the animation. @returns`void` Reports the current position of the animation. @returns`number` The parent of this player, if any. The total run time of the animation, in milliseconds. Provides a callback to invoke before the animation is destroyed. Jump to details --- # AnimationSequenceMetadata • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationSequenceMetadata#api) ------------------------------------------------------------------------ `interface [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) extends [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) { steps: [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) []; options: [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) | null; override type: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) ;}` An array of animation step objects. An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation. Default delay is 0. Jump to details --- # AnimationStateMetadata • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationStateMetadata#api) --------------------------------------------------------------------- `interface [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) extends [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) { name: string; styles: [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) ; options?: { params: { [name: string]: any; }; } | undefined; override type: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) ;}` The state name, unique within the component. The CSS styles associated with this state. An options object containing developer-defined parameters that provide styling defaults and can be overridden on invocation. Jump to details --- # AnimationTriggerMetadata • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationTriggerMetadata#api) ----------------------------------------------------------------------- `interface [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) extends [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) { name: string; definitions: [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) []; options: { params?: { [name: string]: any; } | undefined; } | null; override type: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) ;}` The trigger name, used to associate it with an element. Unique within the component. An animation definition object, containing an array of state and transition declarations. An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation. Default delay is 0. Jump to details --- # AnimationTransitionMetadata • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationTransitionMetadata#api) -------------------------------------------------------------------------- `interface [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) extends [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) { expr: string | ((fromState: string, toState: string, element?: any, params?: { [key: string]: any; } | undefined) => boolean); animation: [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) | [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) []; options: [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) | null; override type: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) ;}` An expression that describes a state change. One or more animation objects to which this transition applies. An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation. Default delay is 0. Jump to details --- # AnimationStyleMetadata • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/AnimationStyleMetadata#api) --------------------------------------------------------------------- `interface [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) extends [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) { styles: "*" | { [key: string]: string | number; } | ("*" | { [key: string]: string | number; })[]; offset: number | null; override type: [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) ;}` A set of CSS style properties. A percentage of the total animate time at which the style is to be applied. Jump to details --- # animate • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/animate#api) ------------------------------------------------------ function animate( timings: string | number, styles?: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null,): AnimationAnimateMetadata; [Usage Notes](https://angular.dev/api/animations/animate#usage-notes) ---------------------------------------------------------------------- Call within an animation [`sequence()`](https://angular.dev/api/animations/sequence) , [`group()`](https://angular.dev/api/animations/group) , or [`transition()`](https://angular.dev/api/animations/transition) call to specify an animation step that applies given style data to the parent animation for a given amount of time. ### [Syntax Examples](https://angular.dev/api/animations/animate#syntax-examples) **Timing examples** The following examples show various `timings` specifications. * `animate(500)` : Duration is 500 milliseconds. * `animate("1s")` : Duration is 1000 milliseconds. * `animate("100ms 0.5s")` : Duration is 100 milliseconds, delay is 500 milliseconds. * `animate("5s ease-in")` : Duration is 5000 milliseconds, easing in. * `animate("5s 10ms cubic-bezier(.17,.67,.88,.1)")` : Duration is 5000 milliseconds, delay is 10 milliseconds, easing according to a bezier curve. **Style examples** The following example calls [`style()`](https://angular.dev/api/animations/style) to set a single CSS style. animate(500, style({ background: "red" })) The following example calls [`keyframes()`](https://angular.dev/api/animations/keyframes) to set a CSS style to different values for successive keyframes. animate(500, keyframes( [ style({ background: "blue" }), style({ background: "red" }) ]) Jump to details --- # animation • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/animation#api) -------------------------------------------------------- function animation( steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null,): AnimationReferenceMetadata; [Usage Notes](https://angular.dev/api/animations/animation#usage-notes) ------------------------------------------------------------------------ The following example defines a reusable animation, providing some default parameter values. var fadeAnimation = animation([ style({ opacity: '{{ start }}' }), animate('{{ time }}', style({ opacity: '{{ end }}'})) ], { params: { time: '1000ms', start: 0, end: 1 }}); The following invokes the defined animation with a call to [`useAnimation()`](https://angular.dev/api/animations/useAnimation) , passing in override parameter values. useAnimation(fadeAnimation, { params: { time: '2s', start: 1, end: 0 }}) If any of the passed-in parameter values are missing from this call, the default values are used. If one or more parameter values are missing before a step is animated, [`useAnimation()`](https://angular.dev/api/animations/useAnimation) throws an error. Jump to details --- # animateChild • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/animateChild#api) ----------------------------------------------------------- function animateChild( options?: AnimateChildOptions | null,): AnimationAnimateChildMetadata; [Usage Notes](https://angular.dev/api/animations/animateChild#usage-notes) --------------------------------------------------------------------------- Each time an animation is triggered in Angular, the parent animation has priority and any child animations are blocked. In order for a child animation to run, the parent animation must query each of the elements containing child animations, and run them using this function. Note that this feature is designed to be used with [`query()`](https://angular.dev/api/animations/query) and it will only work with animations that are assigned using the Angular animation library. CSS keyframes and transitions are not handled by this API. Jump to details --- # NoopAnimationPlayer • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/NoopAnimationPlayer#api) ------------------------------------------------------------------ `class [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) implements [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) { constructor(duration?: number, delay?: number): [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) ; parentPlayer: [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) | null; readonly totalTime: number; onStart(fn: () => void): void; onDone(fn: () => void): void; onDestroy(fn: () => void): void; hasStarted(): boolean; init(): void; play(): void; pause(): void; restart(): void; finish(): void; destroy(): void; reset(): void; setPosition(position: number): void; getPosition(): number;}` @paramduration`number` @paramdelay`number` @returns`[NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) ` @paramfn`() => void` @returns`void` @paramfn`() => void` @returns`void` @paramfn`() => void` @returns`void` @returns`boolean` @returns`void` @returns`void` @returns`void` @returns`void` @returns`void` @returns`void` @returns`void` @paramposition`number` @returns`void` @returns`number` Jump to details --- # query • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/query#api) ---------------------------------------------------- function query( selector: string, animation: AnimationMetadata | AnimationMetadata[], options?: AnimationQueryOptions | null,): AnimationQueryMetadata; [Usage Notes](https://angular.dev/api/animations/query#usage-notes) -------------------------------------------------------------------- ### [Multiple Tokens](https://angular.dev/api/animations/query#multiple-tokens) Tokens can be merged into a combined query selector string. For example: query(':self, .record:enter, .record:leave, Jump to details --- # group • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/group#api) ---------------------------------------------------- function group( steps: AnimationMetadata[], options?: AnimationOptions | null,): AnimationGroupMetadata; [Usage Notes](https://angular.dev/api/animations/group#usage-notes) -------------------------------------------------------------------- Grouped animations are useful when a series of styles must be animated at different starting times and closed off at different ending times. When called within a [`sequence()`](https://angular.dev/api/animations/sequence) or a [`transition()`](https://angular.dev/api/animations/transition) call, does not continue to the next instruction until all of the inner animation steps have completed. Jump to details --- # ProtractorHarnessEnvironmentOptions • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing/protractor * [ProtractorElement](https://angular.dev/api/cdk/testing/protractor/ProtractorElement) * [ProtractorHarnessEnvironment](https://angular.dev/api/cdk/testing/protractor/ProtractorHarnessEnvironment) * [ProtractorHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/protractor/ProtractorHarnessEnvironmentOptions) [API](https://angular.dev/api/cdk/testing/protractor/ProtractorHarnessEnvironmentOptions#api) ---------------------------------------------------------------------------------------------- `interface [ProtractorHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/protractor/ProtractorHarnessEnvironmentOptions) { queryFn: (selector: string, root: ElementFinder) => ElementArrayFinder;}` The query function used to find DOM elements. Jump to details --- # sequence • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/sequence#api) ------------------------------------------------------- function sequence( steps: AnimationMetadata[], options?: AnimationOptions | null,): AnimationSequenceMetadata; [Usage Notes](https://angular.dev/api/animations/sequence#usage-notes) ----------------------------------------------------------------------- When you pass an array of steps to a [`transition()`](https://angular.dev/api/animations/transition) call, the steps run sequentially by default. Compare this to the [`group()`](https://angular.dev/api/animations/group) call, which runs animation steps in parallel. When a sequence is used within a [`group()`](https://angular.dev/api/animations/group) or a [`transition()`](https://angular.dev/api/animations/transition) call, execution continues to the next instruction only after each of the inner animation steps have completed. Jump to details --- # WebDriverHarnessEnvironmentOptions • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing/selenium-webdriver * [SeleniumWebDriverElement](https://angular.dev/api/cdk/testing/selenium-webdriver/SeleniumWebDriverElement) * [SeleniumWebDriverHarnessEnvironment](https://angular.dev/api/cdk/testing/selenium-webdriver/SeleniumWebDriverHarnessEnvironment) * [waitForAngularReady](https://angular.dev/api/cdk/testing/selenium-webdriver/waitForAngularReady) * [WebDriverHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/selenium-webdriver/WebDriverHarnessEnvironmentOptions) [API](https://angular.dev/api/cdk/testing/selenium-webdriver/WebDriverHarnessEnvironmentOptions#api) ----------------------------------------------------------------------------------------------------- `interface [WebDriverHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/selenium-webdriver/WebDriverHarnessEnvironmentOptions) { queryFn: (selector: string, root: () => webdriver.WebElement) => Promise;}` The query function used to find DOM elements. Jump to details --- # keyframes • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/keyframes#api) -------------------------------------------------------- function keyframes( steps: AnimationStyleMetadata[],): AnimationKeyframesSequenceMetadata; [Usage Notes](https://angular.dev/api/animations/keyframes#usage-notes) ------------------------------------------------------------------------ Use with the [`animate()`](https://angular.dev/api/animations/animate) call. Instead of applying animations from the current state to the destination state, keyframes describe how each style entry is applied and at what point within the animation arc. Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp) . ### [Usage](https://angular.dev/api/animations/keyframes#usage) In the following example, the offset values describe when each `backgroundColor` value is applied. The color is red at the start, and changes to blue when 20% of the total time has elapsed. // the provided offset valuesanimate("5s", keyframes([ style({ backgroundColor: "red", offset: 0 }), style({ backgroundColor: "blue", offset: 0.2 }), style({ backgroundColor: "orange", offset: 0.3 }), style({ backgroundColor: "black", offset: 1 })])) If there are no `offset` values specified in the style entries, the offsets are calculated automatically. animate("5s", keyframes([ style({ backgroundColor: "red" }) // offset = 0 style({ backgroundColor: "blue" }) // offset = 0.33 style({ backgroundColor: "orange" }) // offset = 0.66 style({ backgroundColor: "black" }) // offset = 1])) Jump to details --- # waitForAngularReady • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing/selenium-webdriver * [SeleniumWebDriverElement](https://angular.dev/api/cdk/testing/selenium-webdriver/SeleniumWebDriverElement) * [SeleniumWebDriverHarnessEnvironment](https://angular.dev/api/cdk/testing/selenium-webdriver/SeleniumWebDriverHarnessEnvironment) * [waitForAngularReady](https://angular.dev/api/cdk/testing/selenium-webdriver/waitForAngularReady) * [WebDriverHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/selenium-webdriver/WebDriverHarnessEnvironmentOptions) [API](https://angular.dev/api/cdk/testing/selenium-webdriver/waitForAngularReady#api) -------------------------------------------------------------------------------------- function waitForAngularReady(wd: webdriver.WebDriver): Promise; Jump to details --- # ProtractorHarnessEnvironment • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing/protractor * [ProtractorElement](https://angular.dev/api/cdk/testing/protractor/ProtractorElement) * [ProtractorHarnessEnvironment](https://angular.dev/api/cdk/testing/protractor/ProtractorHarnessEnvironment) * [ProtractorHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/protractor/ProtractorHarnessEnvironmentOptions) Deprecation warning As of v13.0.0, this environment no longer works, as it is not compatible with the new [Angular Package Format](https://angular.dev/tools/libraries/angular-package-format) . [API](https://angular.dev/api/cdk/testing/protractor/ProtractorHarnessEnvironment#api) --------------------------------------------------------------------------------------- `class [ProtractorHarnessEnvironment](https://angular.dev/api/cdk/testing/protractor/ProtractorHarnessEnvironment) extends HarnessEnvironment { protected constructor(rawRootElement: ElementFinder, options?: [ProtractorHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/protractor/ProtractorHarnessEnvironmentOptions) | undefined): [ProtractorHarnessEnvironment](https://angular.dev/api/cdk/testing/protractor/ProtractorHarnessEnvironment) ; forceStabilize(): Promise; protected getDocumentRoot(): ElementFinder; protected createTestElement(element: ElementFinder): TestElement; protected createEnvironment(element: ElementFinder): HarnessEnvironment; protected getAllRawElements(selector: string): Promise; static loader(options?: [ProtractorHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/protractor/ProtractorHarnessEnvironmentOptions) | undefined): HarnessLoader; static getNativeElement(el: TestElement): ElementFinder;}` @paramrawRootElement`ElementFinder` @paramoptions`[ProtractorHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/protractor/ProtractorHarnessEnvironmentOptions) | undefined` @returns`[ProtractorHarnessEnvironment](https://angular.dev/api/cdk/testing/protractor/ProtractorHarnessEnvironment) ` Flushes change detection and async tasks captured in the Angular zone. In most cases it should not be necessary to call this manually. However, there may be some edge cases where it is needed to fully flush animation events. @returns`Promise` Gets the root element for the document. @returns`ElementFinder` Creates a `TestElement` from a raw element. @paramelement`ElementFinder` @returns`TestElement` Creates a `HarnessLoader` rooted at the given raw element. @paramelement`ElementFinder` @returns`HarnessEnvironment` Gets a list of all elements matching the given selector under this environment's root element. @paramselector`string` @returns`Promise` Creates a `HarnessLoader` rooted at the document root. @paramoptions`[ProtractorHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/protractor/ProtractorHarnessEnvironmentOptions) | undefined` @returns`HarnessLoader` Gets the ElementFinder corresponding to the given TestElement. @paramel`TestElement` @returns`ElementFinder` Jump to details --- # TestbedHarnessEnvironmentOptions • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing/testbed * [TestbedHarnessEnvironment](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironment) * [TestbedHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironmentOptions) * [UnitTestElement](https://angular.dev/api/cdk/testing/testbed/UnitTestElement) [API](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironmentOptions#api) ---------------------------------------------------------------------------------------- `interface [TestbedHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironmentOptions) { queryFn: (selector: string, root: Element) => Iterable | ArrayLike;}` The query function used to find DOM elements. Jump to details --- # SeleniumWebDriverHarnessEnvironment • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing/selenium-webdriver * [SeleniumWebDriverElement](https://angular.dev/api/cdk/testing/selenium-webdriver/SeleniumWebDriverElement) * [SeleniumWebDriverHarnessEnvironment](https://angular.dev/api/cdk/testing/selenium-webdriver/SeleniumWebDriverHarnessEnvironment) * [waitForAngularReady](https://angular.dev/api/cdk/testing/selenium-webdriver/waitForAngularReady) * [WebDriverHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/selenium-webdriver/WebDriverHarnessEnvironmentOptions) [API](https://angular.dev/api/cdk/testing/selenium-webdriver/SeleniumWebDriverHarnessEnvironment#api) ------------------------------------------------------------------------------------------------------ `class [SeleniumWebDriverHarnessEnvironment](https://angular.dev/api/cdk/testing/selenium-webdriver/SeleniumWebDriverHarnessEnvironment) extends HarnessEnvironment< () => webdriver.WebElement> { protected constructor(rawRootElement: () => webdriver.WebElement, options?: [WebDriverHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/selenium-webdriver/WebDriverHarnessEnvironmentOptions) | undefined): [SeleniumWebDriverHarnessEnvironment](https://angular.dev/api/cdk/testing/selenium-webdriver/SeleniumWebDriverHarnessEnvironment) ; forceStabilize(): Promise; protected getDocumentRoot(): () => webdriver.WebElement; protected createTestElement(element: () => webdriver.WebElement): TestElement; protected createEnvironment(element: () => webdriver.WebElement): HarnessEnvironment<() => webdriver.WebElement>; protected getAllRawElements(selector: string): Promise<(() => webdriver.WebElement)[]>; static getNativeElement(el: TestElement): webdriver.WebElement; static loader(driver: webdriver.WebDriver, options?: [WebDriverHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/selenium-webdriver/WebDriverHarnessEnvironmentOptions) | undefined): HarnessLoader;}` @paramrawRootElement`() => webdriver.WebElement` @paramoptions`[WebDriverHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/selenium-webdriver/WebDriverHarnessEnvironmentOptions) | undefined` @returns`[SeleniumWebDriverHarnessEnvironment](https://angular.dev/api/cdk/testing/selenium-webdriver/SeleniumWebDriverHarnessEnvironment) ` Flushes change detection and async tasks captured in the Angular zone. In most cases it should not be necessary to call this manually. However, there may be some edge cases where it is needed to fully flush animation events. @returns`Promise` Gets the root element for the document. @returns`() => webdriver.WebElement` Creates a `TestElement` from a raw element. @paramelement`() => webdriver.WebElement` @returns`TestElement` Creates a `HarnessLoader` rooted at the given raw element. @paramelement`() => webdriver.WebElement` @returns`HarnessEnvironment<() => webdriver.WebElement>` Gets a list of all elements matching the given selector under this environment's root element. @paramselector`string` @returns`Promise<(() => webdriver.WebElement)[]>` Gets the ElementFinder corresponding to the given TestElement. @paramel`TestElement` @returns`webdriver.WebElement` Creates a `HarnessLoader` rooted at the document root. @paramdriver`webdriver.WebDriver` @paramoptions`[WebDriverHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/selenium-webdriver/WebDriverHarnessEnvironmentOptions) | undefined` @returns`HarnessLoader` Jump to details --- # state • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/state#api) ---------------------------------------------------- function state( name: string, styles: AnimationStyleMetadata, options?: { params: { [name: string]: any } } | undefined,): AnimationStateMetadata; [Usage Notes](https://angular.dev/api/animations/state#usage-notes) -------------------------------------------------------------------- Use the [`trigger()`](https://angular.dev/api/animations/trigger) function to register states to an animation trigger. Use the [`transition()`](https://angular.dev/api/animations/transition) function to animate between states. When a state is active within a component, its associated styles persist on the element, even when the animation ends. Jump to details --- # stagger • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/stagger#api) ------------------------------------------------------ function stagger( timings: string | number, animation: AnimationMetadata | AnimationMetadata[],): AnimationStaggerMetadata; [Usage Notes](https://angular.dev/api/animations/stagger#usage-notes) ---------------------------------------------------------------------- In the following example, a container element wraps a list of items stamped out by an `@for` block. The container element contains an animation trigger that will later be set to query for each of the inner items. Each time items are added, the opacity fade-in animation runs, and each removed item is faded out. When either of these animations occur, the stagger effect is applied after each item's animation is started.
    @for(item of items; track $index) {
    {{ item }}
    }
    Here is the component code: import {trigger, transition, style, animate, query, stagger} from '@angular/animations';@Component({ templateUrl: 'list.component.html', animations: [ trigger('listAnimation', [ ... ]) ]})class ListComponent { items = []; showItems() { this.items = [0,1,2,3,4]; } hideItems() { this.items = []; } toggle() { this.items.length ? this.hideItems() : this.showItems(); } } Here is the animation trigger code: trigger('listAnimation', [ transition('* => *', [ // each time the binding value changes query(':leave', [ stagger(100, [ animate('0.5s', style({ opacity: 0 })) ]) ]), query(':enter', [ style({ opacity: 0 }), stagger(100, [ animate('0.5s', style({ opacity: 1 })) ]) ]) ])]) Jump to details --- # ProtractorElement • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing/protractor * [ProtractorElement](https://angular.dev/api/cdk/testing/protractor/ProtractorElement) * [ProtractorHarnessEnvironment](https://angular.dev/api/cdk/testing/protractor/ProtractorHarnessEnvironment) * [ProtractorHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/protractor/ProtractorHarnessEnvironmentOptions) [API](https://angular.dev/api/cdk/testing/protractor/ProtractorElement#api) ---------------------------------------------------------------------------- `class [ProtractorElement](https://angular.dev/api/cdk/testing/protractor/ProtractorElement) implements TestElement { constructor(element: ElementFinder): [ProtractorElement](https://angular.dev/api/cdk/testing/protractor/ProtractorElement) ; blur(): Promise; clear(): Promise; click(modifiers?: any): Promise; click(location: "center", modifiers?: any): Promise; click(relativeX: number, relativeY: number, modifiers?: any): Promise; rightClick(relativeX: number, relativeY: number, modifiers?: any): Promise; focus(): Promise; getCssValue(property: string): Promise; hover(): Promise; mouseAway(): Promise; sendKeys(...keys: any[]): Promise; sendKeys(modifiers: ModifierKeys, ...keys: any[]): Promise; text(options?: any): Promise; setContenteditableValue(value: string): Promise; getAttribute(name: string): Promise; hasClass(name: string): Promise; getDimensions(): Promise; getProperty(name: string): Promise; setInputValue(value: string): Promise; selectOptions(...optionIndexes: number[]): Promise; matchesSelector(selector: string): Promise; isFocused(): Promise; dispatchEvent(name: string, data?: Record | undefined): Promise;}` @paramelement`ElementFinder` @returns`[ProtractorElement](https://angular.dev/api/cdk/testing/protractor/ProtractorElement) ` Blur the element. @returns`Promise` Clear the element's input (for input and textarea elements only). @returns`Promise` Click the element at the default location for the current environment. If you need to guarantee the element is clicked at a specific location, consider using `click('center')` or `click(x, y)` instead. @parammodifiers`any` @returns`Promise` Click the element at the element's center. @paramlocation`"center"` @parammodifiers`any` @returns`Promise` Click the element at the specified coordinates relative to the top-left of the element. @paramrelativeX`number` Coordinate within the element, along the X-axis at which to click. @paramrelativeY`number` Coordinate within the element, along the Y-axis at which to click. @parammodifiers`any` Modifier keys held while clicking @returns`Promise` Right clicks on the element at the specified coordinates relative to the top-left of it. @paramrelativeX`number` Coordinate within the element, along the X-axis at which to click. @paramrelativeY`number` Coordinate within the element, along the Y-axis at which to click. @parammodifiers`any` Modifier keys held while clicking @returns`Promise` Focus the element. @returns`Promise` Get the computed value of the given CSS property for the element. @paramproperty`string` @returns`Promise` Hovers the mouse over the element. @returns`Promise` Moves the mouse away from the element. @returns`Promise` Sends the given string to the input as a series of key presses. Also fires input events and attempts to add the string to the Element's value. @paramkeys`any[]` @returns`Promise` Sends the given string to the input as a series of key presses. Also fires input events and attempts to add the string to the Element's value. @parammodifiers`ModifierKeys` @paramkeys`any[]` @returns`Promise` Gets the text from the element. @paramoptions`any` Options that affect what text is included. @returns`Promise` Sets the value of a `contenteditable` element. @paramvalue`string` Value to be set on the element. @returns`Promise` Gets the value for the given attribute from the element. @paramname`string` @returns`Promise` Checks whether the element has the given class. @paramname`string` @returns`Promise` Gets the dimensions of the element. @returns`Promise` Gets the value of a property of an element. @paramname`string` @returns`Promise` Sets the value of a property of an input. @paramvalue`string` @returns`Promise` Selects the options at the specified indexes inside of a native `select` element. @paramoptionIndexes`number[]` @returns`Promise` Checks whether this element matches the given selector. @paramselector`string` @returns`Promise` Checks whether the element is focused. @returns`Promise` Dispatches an event with a particular name. @paramname`string` Name of the event to be dispatched. @paramdata`Record | undefined` @returns`Promise` Jump to details --- # TestbedHarnessEnvironment • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing/testbed * [TestbedHarnessEnvironment](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironment) * [TestbedHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironmentOptions) * [UnitTestElement](https://angular.dev/api/cdk/testing/testbed/UnitTestElement) [API](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironment#api) --------------------------------------------------------------------------------- `class [TestbedHarnessEnvironment](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironment) extends HarnessEnvironment { protected constructor(rawRootElement: Element, _fixture: [ComponentFixture](https://angular.dev/api/core/testing/ComponentFixture) , options?: [TestbedHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironmentOptions) | undefined): [TestbedHarnessEnvironment](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironment) ; forceStabilize(): Promise; waitForTasksOutsideAngular(): Promise; protected getDocumentRoot(): Element; protected createTestElement(element: Element): TestElement; protected createEnvironment(element: Element): HarnessEnvironment; protected getAllRawElements(selector: string): Promise; static loader(fixture: [ComponentFixture](https://angular.dev/api/core/testing/ComponentFixture) , options?: [TestbedHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironmentOptions) | undefined): HarnessLoader; static documentRootLoader(fixture: [ComponentFixture](https://angular.dev/api/core/testing/ComponentFixture) , options?: [TestbedHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironmentOptions) | undefined): HarnessLoader; static getNativeElement(el: TestElement): Element; static harnessForFixture(fixture: [ComponentFixture](https://angular.dev/api/core/testing/ComponentFixture) , harnessType: ComponentHarnessConstructor, options?: [TestbedHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironmentOptions) | undefined): Promise;}` @paramrawRootElement`Element` @param\_fixture`[ComponentFixture](https://angular.dev/api/core/testing/ComponentFixture) ` @paramoptions`[TestbedHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironmentOptions) | undefined` @returns`[TestbedHarnessEnvironment](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironment) ` Flushes change detection and async tasks captured in the Angular zone. In most cases it should not be necessary to call this manually. However, there may be some edge cases where it is needed to fully flush animation events. @returns`Promise` Waits for all scheduled or running async tasks to complete. This allows harness authors to wait for async tasks outside of the Angular zone. This only works when Zone.js is present _and_ patches are applied to the test framework by `zone.js/testing` (Jasmine and Jest only) or another script. @returns`Promise` Gets the root element for the document. @returns`Element` Creates a `TestElement` from a raw element. @paramelement`Element` @returns`TestElement` Creates a `HarnessLoader` rooted at the given raw element. @paramelement`Element` @returns`HarnessEnvironment` Gets a list of all elements matching the given selector under this environment's root element. @paramselector`string` @returns`Promise` Creates a `HarnessLoader` rooted at the given fixture's root element. @paramfixture`[ComponentFixture](https://angular.dev/api/core/testing/ComponentFixture) ` @paramoptions`[TestbedHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironmentOptions) | undefined` @returns`HarnessLoader` Creates a `HarnessLoader` at the document root. This can be used if harnesses are located outside of a fixture (e.g. overlays appended to the document body). @paramfixture`[ComponentFixture](https://angular.dev/api/core/testing/ComponentFixture) ` @paramoptions`[TestbedHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironmentOptions) | undefined` @returns`HarnessLoader` Gets the native DOM element corresponding to the given TestElement. @paramel`TestElement` @returns`Element` Creates an instance of the given harness type, using the fixture's root element as the harness's host element. This method should be used when creating a harness for the root element of a fixture, as components do not have the correct selector when they are created as the root of the fixture. @paramfixture`[ComponentFixture](https://angular.dev/api/core/testing/ComponentFixture) ` @paramharnessType`ComponentHarnessConstructor` @paramoptions`[TestbedHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironmentOptions) | undefined` @returns`Promise` Jump to details --- # style • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/style#api) ---------------------------------------------------- function style( tokens: | '*' | { [key: string]: string | number } | ('*' | { [key: string]: string | number })[],): AnimationStyleMetadata; [Usage Notes](https://angular.dev/api/animations/style#usage-notes) -------------------------------------------------------------------- The following examples create animation styles that collect a set of CSS property values: // string values for CSS propertiesstyle({ background: "red", color: "blue" })// numerical pixel valuesstyle({ width: 100, height: 0 }) The following example uses auto-styling to allow an element to animate from a height of 0 up to its full height: style({ height: 0 }),animate("1s", style({ height: "*" })) Jump to details --- # SeleniumWebDriverElement • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing/selenium-webdriver * [SeleniumWebDriverElement](https://angular.dev/api/cdk/testing/selenium-webdriver/SeleniumWebDriverElement) * [SeleniumWebDriverHarnessEnvironment](https://angular.dev/api/cdk/testing/selenium-webdriver/SeleniumWebDriverHarnessEnvironment) * [waitForAngularReady](https://angular.dev/api/cdk/testing/selenium-webdriver/waitForAngularReady) * [WebDriverHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/selenium-webdriver/WebDriverHarnessEnvironmentOptions) [API](https://angular.dev/api/cdk/testing/selenium-webdriver/SeleniumWebDriverElement#api) ------------------------------------------------------------------------------------------- `class [SeleniumWebDriverElement](https://angular.dev/api/cdk/testing/selenium-webdriver/SeleniumWebDriverElement) implements TestElement { constructor(element: () => webdriver.WebElement, _stabilize: () => Promise): [SeleniumWebDriverElement](https://angular.dev/api/cdk/testing/selenium-webdriver/SeleniumWebDriverElement) ; blur(): Promise; clear(): Promise; click(modifiers?: any): Promise; click(location: "center", modifiers?: any): Promise; click(relativeX: number, relativeY: number, modifiers?: any): Promise; rightClick(relativeX: number, relativeY: number, modifiers?: any): Promise; focus(): Promise; getCssValue(property: string): Promise; hover(): Promise; mouseAway(): Promise; sendKeys(...keys: any[]): Promise; sendKeys(modifiers: ModifierKeys, ...keys: any[]): Promise; text(options?: any): Promise; setContenteditableValue(value: string): Promise; getAttribute(name: string): Promise; hasClass(name: string): Promise; getDimensions(): Promise; getProperty(name: string): Promise; setInputValue(newValue: string): Promise; selectOptions(...optionIndexes: number[]): Promise; matchesSelector(selector: string): Promise; isFocused(): Promise; dispatchEvent(name: string, data?: Record | undefined): Promise;}` @paramelement`() => webdriver.WebElement` @param\_stabilize`() => Promise` @returns`[SeleniumWebDriverElement](https://angular.dev/api/cdk/testing/selenium-webdriver/SeleniumWebDriverElement) ` Blur the element. @returns`Promise` Clear the element's input (for input and textarea elements only). @returns`Promise` Click the element at the default location for the current environment. If you need to guarantee the element is clicked at a specific location, consider using `click('center')` or `click(x, y)` instead. @parammodifiers`any` @returns`Promise` Click the element at the element's center. @paramlocation`"center"` @parammodifiers`any` @returns`Promise` Click the element at the specified coordinates relative to the top-left of the element. @paramrelativeX`number` Coordinate within the element, along the X-axis at which to click. @paramrelativeY`number` Coordinate within the element, along the Y-axis at which to click. @parammodifiers`any` Modifier keys held while clicking @returns`Promise` Right clicks on the element at the specified coordinates relative to the top-left of it. @paramrelativeX`number` Coordinate within the element, along the X-axis at which to click. @paramrelativeY`number` Coordinate within the element, along the Y-axis at which to click. @parammodifiers`any` Modifier keys held while clicking @returns`Promise` Focus the element. @returns`Promise` Get the computed value of the given CSS property for the element. @paramproperty`string` @returns`Promise` Hovers the mouse over the element. @returns`Promise` Moves the mouse away from the element. @returns`Promise` Sends the given string to the input as a series of key presses. Also fires input events and attempts to add the string to the Element's value. @paramkeys`any[]` @returns`Promise` Sends the given string to the input as a series of key presses. Also fires input events and attempts to add the string to the Element's value. @parammodifiers`ModifierKeys` @paramkeys`any[]` @returns`Promise` Gets the text from the element. @paramoptions`any` Options that affect what text is included. @returns`Promise` Sets the value of a `contenteditable` element. @paramvalue`string` Value to be set on the element. @returns`Promise` Gets the value for the given attribute from the element. @paramname`string` @returns`Promise` Checks whether the element has the given class. @paramname`string` @returns`Promise` Gets the dimensions of the element. @returns`Promise` Gets the value of a property of an element. @paramname`string` @returns`Promise` Sets the value of a property of an input. @paramnewValue`string` @returns`Promise` Selects the options at the specified indexes inside of a native `select` element. @paramoptionIndexes`number[]` @returns`Promise` Checks whether this element matches the given selector. @paramselector`string` @returns`Promise` Checks whether the element is focused. @returns`Promise` Dispatches an event with a particular name. @paramname`string` Name of the event to be dispatched. @paramdata`Record | undefined` @returns`Promise` Jump to details --- # UnitTestElement • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing/testbed * [TestbedHarnessEnvironment](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironment) * [TestbedHarnessEnvironmentOptions](https://angular.dev/api/cdk/testing/testbed/TestbedHarnessEnvironmentOptions) * [UnitTestElement](https://angular.dev/api/cdk/testing/testbed/UnitTestElement) [API](https://angular.dev/api/cdk/testing/testbed/UnitTestElement#api) ----------------------------------------------------------------------- `class [UnitTestElement](https://angular.dev/api/cdk/testing/testbed/UnitTestElement) implements TestElement { constructor(element: Element, _stabilize: () => Promise): [UnitTestElement](https://angular.dev/api/cdk/testing/testbed/UnitTestElement) ; blur(): Promise; clear(): Promise; click(modifiers?: any): Promise; click(location: "center", modifiers?: any): Promise; click(relativeX: number, relativeY: number, modifiers?: any): Promise; rightClick(relativeX: number, relativeY: number, modifiers?: any): Promise; focus(): Promise; getCssValue(property: string): Promise; hover(): Promise; mouseAway(): Promise; sendKeys(...keys: any[]): Promise; sendKeys(modifiers: ModifierKeys, ...keys: any[]): Promise; text(options?: any): Promise; setContenteditableValue(value: string): Promise; getAttribute(name: string): Promise; hasClass(name: string): Promise; getDimensions(): Promise; getProperty(name: string): Promise; setInputValue(value: string): Promise; selectOptions(...optionIndexes: number[]): Promise; matchesSelector(selector: string): Promise; isFocused(): Promise; dispatchEvent(name: string, data?: Record | undefined): Promise;}` @paramelement`Element` @param\_stabilize`() => Promise` @returns`[UnitTestElement](https://angular.dev/api/cdk/testing/testbed/UnitTestElement) ` Blur the element. @returns`Promise` Clear the element's input (for input and textarea elements only). @returns`Promise` Click the element at the default location for the current environment. If you need to guarantee the element is clicked at a specific location, consider using `click('center')` or `click(x, y)` instead. @parammodifiers`any` @returns`Promise` Click the element at the element's center. @paramlocation`"center"` @parammodifiers`any` @returns`Promise` Click the element at the specified coordinates relative to the top-left of the element. @paramrelativeX`number` Coordinate within the element, along the X-axis at which to click. @paramrelativeY`number` Coordinate within the element, along the Y-axis at which to click. @parammodifiers`any` Modifier keys held while clicking @returns`Promise` Right clicks on the element at the specified coordinates relative to the top-left of it. @paramrelativeX`number` Coordinate within the element, along the X-axis at which to click. @paramrelativeY`number` Coordinate within the element, along the Y-axis at which to click. @parammodifiers`any` Modifier keys held while clicking @returns`Promise` Focus the element. @returns`Promise` Get the computed value of the given CSS property for the element. @paramproperty`string` @returns`Promise` Hovers the mouse over the element. @returns`Promise` Moves the mouse away from the element. @returns`Promise` Sends the given string to the input as a series of key presses. Also fires input events and attempts to add the string to the Element's value. Note that this cannot reproduce native browser behavior for keyboard shortcuts such as Tab, Ctrl + A, etc. @paramkeys`any[]` @returns`Promise` Sends the given string to the input as a series of key presses. Also fires input events and attempts to add the string to the Element's value. @parammodifiers`ModifierKeys` @paramkeys`any[]` @returns`Promise` Gets the text from the element. @paramoptions`any` Options that affect what text is included. @returns`Promise` Sets the value of a `contenteditable` element. @paramvalue`string` Value to be set on the element. @returns`Promise` Gets the value for the given attribute from the element. @paramname`string` @returns`Promise` Checks whether the element has the given class. @paramname`string` @returns`Promise` Gets the dimensions of the element. @returns`Promise` Gets the value of a property of an element. @paramname`string` @returns`Promise` Sets the value of a property of an input. @paramvalue`string` @returns`Promise` Selects the options at the specified indexes inside of a native `select` element. @paramoptionIndexes`number[]` @returns`Promise` Checks whether this element matches the given selector. @paramselector`string` @returns`Promise` Checks whether the element is focused. @returns`Promise` Dispatches an event with a particular name. @paramname`string` Name of the event to be dispatched. @paramdata`Record | undefined` @returns`Promise` Jump to details --- # useAnimation • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/useAnimation#api) ----------------------------------------------------------- function useAnimation( animation: AnimationReferenceMetadata, options?: AnimationOptions | null,): AnimationAnimateRefMetadata; Jump to details --- # AsyncPredicate • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/AsyncPredicate#api) -------------------------------------------------------------- `type [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) = (item: T) => Promise` Jump to details --- # AsyncOptionPredicate • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/AsyncOptionPredicate#api) -------------------------------------------------------------------- `type [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) = (item: T, option: O) => Promise` Jump to details --- # AutoChangeDetectionStatus • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus#api) ------------------------------------------------------------------------- `interface [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) { isDisabled: boolean; onDetectChangesNow?: (() => void) | undefined;}` Whether auto change detection is disabled. An optional callback, if present it indicates that change detection should be run immediately, while handling the status change. The callback should then be called as soon as change detection is done. Jump to details --- # transition • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/transition#api) --------------------------------------------------------- function transition( stateChangeExpr: | string | (( fromState: string, toState: string, element?: any, params?: { [key: string]: any } | undefined, ) => boolean), steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null,): AnimationTransitionMetadata; [Usage Notes](https://angular.dev/api/animations/transition#usage-notes) ------------------------------------------------------------------------- ### [State Change Expression](https://angular.dev/api/animations/transition#state-change-expression) The State Change Expression instructs Angular when to run the transition's animations, it can either be * a string with a specific syntax * or a function that compares the previous and current state (value of the expression bound to the element's trigger) and returns `true` if the transition should occur or `false` otherwise The string format can be: * `fromState => toState`, which indicates that the transition's animations should occur then the expression bound to the trigger's element goes from `fromState` to `toState` _Example:_ transition('open => closed', animate('.5s ease-out', style({ height: 0 }) )) * `fromState <=> toState`, which indicates that the transition's animations should occur then the expression bound to the trigger's element goes from `fromState` to `toState` or vice versa _Example:_ transition('enabled <=> disabled', animate('1s cubic-bezier(0.8,0.3,0,1)')) * `:enter`/`:leave`, which indicates that the transition's animations should occur when the element enters or exists the DOM _Example:_ transition(':enter', [ style({ opacity: 0 }), animate('500ms', style({ opacity: 1 })) ]) * `:increment`/`:decrement`, which indicates that the transition's animations should occur when the numerical expression bound to the trigger's element has increased in value or decreased _Example:_ transition(':increment', query('@counter', animateChild())) * a sequence of any of the above divided by commas, which indicates that transition's animations should occur whenever one of the state change expressions matches _Example:_ transition(':increment, * => enabled, :enter', animate('1s ease', keyframes([ style({ transform: 'scale(1)', offset: 0}), style({ transform: 'scale(1.1)', offset: 0.7}), style({ transform: 'scale(1)', offset: 1}) ]))), Also note that in such context: * `void` can be used to indicate the absence of the element * asterisks can be used as wildcards that match any state * (as a consequence of the above, `void => *` is equivalent to `:enter` and `* => void` is equivalent to `:leave`) * `true` and `false` also match expression values of `1` and `0` respectively (but do not match _truthy_ and _falsy_ values) Be careful about entering end leaving elements as their transitions present a common pitfall for developers. Note that when an element with a trigger enters the DOM its `:enter` transition always gets executed, but its `:leave` transition will not be executed if the element is removed alongside its parent (as it will be removed "without warning" before its transition has a chance to be executed, the only way that such transition can occur is if the element is exiting the DOM on its own). ### [Animating to a Final State](https://angular.dev/api/animations/transition#animating-to-a-final-state) If the final step in a transition is a call to [`animate()`](https://angular.dev/api/animations/animate) that uses a timing value with no `style` data, that step is automatically considered the final animation arc, for the element to reach the final state, in such case Angular automatically adds or removes CSS styles to ensure that the element is in the correct final state. ### [Usage Examples](https://angular.dev/api/animations/transition#usage-examples) * Transition animations applied based on the trigger's expression value
    ...
    trigger("myAnimationTrigger", [ ..., // states transition("on => off, open => closed", animate(500)), transition("* <=> error", query('.indicator', animateChild())) ]) * Transition animations applied based on custom logic dependent on the trigger's expression value and provided parameters
    ...
    trigger("myAnimationTrigger", [ ..., // states transition( (fromState, toState, _element, params) => ['firststep', 'laststep'].includes(fromState.toLowerCase()) && toState === params?.['target'], animate('1s') )]) Jump to details --- # ComponentHarnessConstructor • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor#api) --------------------------------------------------------------------------- `interface [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) { hostSelector: string;}` [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) subclasses must specify a static `hostSelector` property that is used to find the host element for the corresponding component. This property should match the selector for the Angular component. Jump to details --- # BaseHarnessFilters • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/BaseHarnessFilters#api) ------------------------------------------------------------------ `interface [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) { selector?: string | undefined; ancestor?: string | undefined;}` Only find instances whose host element matches the given selector. Only find instances that are nested under an element with the given selector. Jump to details --- # EventData • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/EventData#api) --------------------------------------------------------- `type [EventData](https://angular.dev/api/cdk/testing/EventData) = | string | number | boolean | Function | undefined | null | [EventData](https://angular.dev/api/cdk/testing/EventData) [] | {[key: string]: [EventData](https://angular.dev/api/cdk/testing/EventData) }` Jump to details --- # HarnessQuery • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/HarnessQuery#api) ------------------------------------------------------------ `type [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) = | [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) | [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) ` Jump to details --- # ElementDimensions • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/ElementDimensions#api) ----------------------------------------------------------------- `interface [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) { top: number; left: number; width: number; height: number;}` The distance from the top of the viewport in pixels The distance from the left of the viewport in pixels The width of the element in pixels The height of the element in pixels Jump to details --- # trigger • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/animations * [animate](https://angular.dev/api/animations/animate) * [animateChild](https://angular.dev/api/animations/animateChild) * [AnimateChildOptions](https://angular.dev/api/animations/AnimateChildOptions) * [AnimateTimings](https://angular.dev/api/animations/AnimateTimings) * [animation](https://angular.dev/api/animations/animation) * [AnimationAnimateChildMetadata](https://angular.dev/api/animations/AnimationAnimateChildMetadata) * [AnimationAnimateMetadata](https://angular.dev/api/animations/AnimationAnimateMetadata) * [AnimationAnimateRefMetadata](https://angular.dev/api/animations/AnimationAnimateRefMetadata) * [AnimationBuilder](https://angular.dev/api/animations/AnimationBuilder) * [AnimationEvent](https://angular.dev/api/animations/AnimationEvent) * [AnimationFactory](https://angular.dev/api/animations/AnimationFactory) * [AnimationGroupMetadata](https://angular.dev/api/animations/AnimationGroupMetadata) * [AnimationKeyframesSequenceMetadata](https://angular.dev/api/animations/AnimationKeyframesSequenceMetadata) * [AnimationMetadata](https://angular.dev/api/animations/AnimationMetadata) * [AnimationMetadataType](https://angular.dev/api/animations/AnimationMetadataType) * [AnimationOptions](https://angular.dev/api/animations/AnimationOptions) * [AnimationPlayer](https://angular.dev/api/animations/AnimationPlayer) * [AnimationQueryMetadata](https://angular.dev/api/animations/AnimationQueryMetadata) * [AnimationQueryOptions](https://angular.dev/api/animations/AnimationQueryOptions) * [AnimationReferenceMetadata](https://angular.dev/api/animations/AnimationReferenceMetadata) * [AnimationSequenceMetadata](https://angular.dev/api/animations/AnimationSequenceMetadata) * [AnimationStaggerMetadata](https://angular.dev/api/animations/AnimationStaggerMetadata) * [AnimationStateMetadata](https://angular.dev/api/animations/AnimationStateMetadata) * [AnimationStyleMetadata](https://angular.dev/api/animations/AnimationStyleMetadata) * [AnimationTransitionMetadata](https://angular.dev/api/animations/AnimationTransitionMetadata) * [AnimationTriggerMetadata](https://angular.dev/api/animations/AnimationTriggerMetadata) * [AUTO\_STYLE](https://angular.dev/api/animations/AUTO_STYLE) * [group](https://angular.dev/api/animations/group) * [keyframes](https://angular.dev/api/animations/keyframes) * [NoopAnimationPlayer](https://angular.dev/api/animations/NoopAnimationPlayer) * [query](https://angular.dev/api/animations/query) * [sequence](https://angular.dev/api/animations/sequence) * [stagger](https://angular.dev/api/animations/stagger) * [state](https://angular.dev/api/animations/state) * [style](https://angular.dev/api/animations/style) * [transition](https://angular.dev/api/animations/transition) * [trigger](https://angular.dev/api/animations/trigger) * [useAnimation](https://angular.dev/api/animations/useAnimation) Deprecation warning Use `animate.enter` or `animate.leave` instead. Intent to remove in v23 [API](https://angular.dev/api/animations/trigger#api) ------------------------------------------------------ function trigger( name: string, definitions: AnimationMetadata[],): AnimationTriggerMetadata; [Usage Notes](https://angular.dev/api/animations/trigger#usage-notes) ---------------------------------------------------------------------- Define an animation trigger in the `animations` section of `@Component` metadata. In the template, reference the trigger by name and bind it to a trigger expression that evaluates to a defined animation state, using the following format: `[@triggerName]="expression"` Animation trigger bindings convert all values to strings, and then match the previous and current values against any linked transitions. Booleans can be specified as `1` or `true` and `0` or `false`. ### [Usage Example](https://angular.dev/api/animations/trigger#usage-example) The following example creates an animation trigger reference based on the provided name value. The provided animation value is expected to be an array consisting of state and transition declarations. @Component({ selector: "my-component", templateUrl: "my-component-tpl.html", animations: [ trigger("myAnimationTrigger", [ state(...), state(...), transition(...), transition(...) ]) ]})class MyComponent { myStatusExp = "something";} The template associated with this component makes use of the defined trigger by binding to an element within its template code.
    ...
    ### [Using an inline function](https://angular.dev/api/animations/trigger#using-an-inline-function) The `transition` animation method also supports reading an inline function which can decide if its associated animation should be run. // this method is run each time the `myAnimationTrigger` trigger value changes.function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:string]: any}): boolean { // notice that `element` and `params` are also available here return toState == 'yes-please-animate';}@Component({ selector: 'my-component', templateUrl: 'my-component-tpl.html', animations: [ trigger('myAnimationTrigger', [ transition(myInlineMatcherFn, [ // the animation sequence code ]), ]) ]})class MyComponent { myStatusExp = "yes-please-animate";} ### [Disabling Animations](https://angular.dev/api/animations/trigger#disabling-animations) When true, the special animation control binding `@.disabled` binding prevents all animations from rendering. Place the `@.disabled` binding on an element to disable animations on the element itself, as well as any inner animation triggers within the element. The following example shows how to use this feature: @Component({ selector: 'my-component', template: `
    `, animations: [ trigger("childAnimation", [ // ... ]) ]})class MyComponent { isDisabled = true; exp = '...';} When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating, along with any inner animations. ### [Disable animations application-wide](https://angular.dev/api/animations/trigger#disable-animations-application-wide) When an area of the template is set to have animations disabled, **all** inner components have their animations disabled as well. This means that you can disable all animations for an app by placing a host binding set on `@.disabled` on the topmost Angular component. import {Component, HostBinding} from '@angular/core';@Component({ selector: 'app-component', templateUrl: 'app.component.html',})class AppComponent { @HostBinding('@.disabled') public animationsDisabled = true;} ### [Overriding disablement of inner animations](https://angular.dev/api/animations/trigger#overriding-disablement-of-inner-animations) Despite inner animations being disabled, a parent animation can [`query()`](https://angular.dev/api/animations/query) for inner elements located in disabled areas of the template and still animate them if needed. This is also the case for when a sub animation is queried by a parent and then later animated using [`animateChild()`](https://angular.dev/api/animations/animateChild) . ### [Detecting when an animation is disabled](https://angular.dev/api/animations/trigger#detecting-when-an-animation-is-disabled) If a region of the DOM (or the entire application) has its animations disabled, the animation trigger callbacks still fire, but for zero seconds. When the callback fires, it provides an instance of an [`AnimationEvent`](https://angular.dev/api/animations/AnimationEvent) . If animations are disabled, the `.disabled` flag on the event is true. Jump to details --- # TextOptions • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/TextOptions#api) ----------------------------------------------------------- `interface [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) { exclude?: string | undefined;}` Optional selector for elements whose content should be excluded from the text string. Jump to details --- # handleAutoChangeDetectionStatus • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus#api) ------------------------------------------------------------------------------- function handleAutoChangeDetectionStatus( handler: (status: AutoChangeDetectionStatus) => void,): void; Jump to details --- # CDK_DRAG_PREVIEW • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW#api) ------------------------------------------------------------------ `const [CDK_DRAG_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) : any;` Jump to details --- # CDK_DROP_LIST • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST#api) --------------------------------------------------------------- `const [CDK_DROP_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) : any;` Jump to details --- # CDK_DRAG_PLACEHOLDER • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER#api) ---------------------------------------------------------------------- `const [CDK_DRAG_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) : any;` Jump to details --- # CDK_DRAG_CONFIG • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG#api) ----------------------------------------------------------------- `const [CDK_DRAG_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) : any;` Jump to details --- # ModifierKeys • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/ModifierKeys#api) ------------------------------------------------------------ `interface [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) { control?: boolean | undefined; alt?: boolean | undefined; shift?: boolean | undefined; meta?: boolean | undefined;}` Jump to details --- # CDK_DROP_LIST_GROUP • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP#api) --------------------------------------------------------------------- `const [CDK_DROP_LIST_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) : any;` Jump to details --- # LocatorFnResult • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/LocatorFnResult#api) --------------------------------------------------------------- ``type [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) | string)[]> = { [I in keyof T]: T[I] extends new (...args: any[]) => infer C // Map `ComponentHarnessConstructor` to `C`. ? C : // Map `HarnessPredicate` to `C`. T[I] extends {harnessType: new (...args: any[]) => infer C} ? C : // Map `string` to `TestElement`. T[I] extends string ? [TestElement](https://angular.dev/api/cdk/testing/TestElement) : // Map everything else to `never` (should not happen due to the type constraint on `T`). never;}[number]`` [Description](https://angular.dev/api/cdk/testing/LocatorFnResult#description) ------------------------------------------------------------------------------- The result type obtained when searching using a particular list of queries. This type depends on the particular items being queried. * If one of the queries is for a `ComponentHarnessConstructor`, it means that the result might be a harness of type `C1` * If one of the queries is for a `HarnessPredicate`, it means that the result might be a harness of type `C2` * If one of the queries is for a `string`, it means that the result might be a [`TestElement`](https://angular.dev/api/cdk/testing/TestElement) . Since we don't know for sure which query will match, the result type if the union of the types for all possible results. [Usage Notes](https://angular.dev/api/cdk/testing/LocatorFnResult#usage-notes) ------------------------------------------------------------------------------- ### [Example](https://angular.dev/api/cdk/testing/LocatorFnResult#example) The type: LocatorFnResult<[ ComponentHarnessConstructor, HarnessPredicate, string]> is equivalent to: MyHarness | MyOtherHarness | TestElement Jump to details --- # HarnessLoader • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/HarnessLoader#api) ------------------------------------------------------------- `interface [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) { getChildLoader(selector: string): Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) >; getAllChildLoaders(selector: string): Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) []>; getHarness(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ): Promise; getHarnessOrNull(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ): Promise; getHarnessAtIndex(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) , index: number): Promise; getAllHarnesses(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ): Promise; countHarnesses(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ): Promise; hasHarness(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ): Promise;}` Searches for an element with the given selector under the current instances's root element, and returns a [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) rooted at the matching element. If multiple elements match the selector, the first is used. If no elements match, an error is thrown. @paramselector`string` The selector for the root element of the new [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) @returns`Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) >` Searches for all elements with the given selector under the current instances's root element, and returns an array of [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) s, one for each matching element, rooted at that element. @paramselector`string` The selector for the root element of the new [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) @returns`Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) []>` Searches for an instance of the component corresponding to the given harness type under the [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) 's root element, and returns a [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) for that instance. If multiple matching components are found, a harness for the first one is returned. If no matching component is found, an error is thrown. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` A query for a harness to create @returns`Promise` Searches for an instance of the component corresponding to the given harness type under the [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) 's root element, and returns a [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) for that instance. If multiple matching components are found, a harness for the first one is returned. If no matching component is found, null is returned. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` A query for a harness to create @returns`Promise` Searches for an instance of the component corresponding to the given harness type under the [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) 's root element, and returns a [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) for the instance on the page at the given index. If no matching component exists at that index, an error is thrown. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` A query for a harness to create @paramindex`number` The zero-indexed offset of the matching component instance to return @returns`Promise` Searches for all instances of the component corresponding to the given harness type under the [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) 's root element, and returns a list [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) for each instance. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` A query for a harness to create @returns`Promise` Searches for all instances of the component corresponding to the given harness type under the [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) 's root element, and returns the total count of all matching components. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` A query for a harness to create @returns`Promise` Searches for an instance of the component corresponding to the given harness type under the [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) 's root element, and returns a boolean indicating if any were found. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` A query for a harness to create @returns`Promise` Jump to details --- # CdkDragEnter • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CdkDragEnter#api) -------------------------------------------------------------- `interface [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) { container: [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) ; item: [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) ; currentIndex: number;}` Container into which the user has moved the item. Item that was moved into the container. Index at which the item has entered the container. Jump to details --- # CDK_DRAG_HANDLE • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE#api) ----------------------------------------------------------------- `const [CDK_DRAG_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) : any;` Jump to details --- # CdkDragExit • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CdkDragExit#api) ------------------------------------------------------------- `interface [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) { container: [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) ; item: [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) ;}` Container from which the user has a removed an item. Item that was removed from the container. Jump to details --- # DragConstrainPosition • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition#api) ----------------------------------------------------------------------- `type [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) = ( userPointerPosition: [Point](https://angular.dev/api/cdk/drag-drop/Point) , dragRef: [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) , dimensions: DOMRect, pickupPositionInElement: [Point](https://angular.dev/api/cdk/drag-drop/Point) ,) => [Point](https://angular.dev/api/cdk/drag-drop/Point)` Jump to details --- # manualChangeDetection • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/manualChangeDetection#api) --------------------------------------------------------------------- function manualChangeDetection(fn: () => Promise): Promise; Jump to details --- # TestKey • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/TestKey#api) ------------------------------------------------------- `enum [TestKey](https://angular.dev/api/cdk/testing/TestKey) { BACKSPACE: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .BACKSPACE; TAB: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .TAB; ENTER: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .ENTER; SHIFT: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .SHIFT; CONTROL: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .CONTROL; ALT: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .ALT; ESCAPE: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .ESCAPE; PAGE_UP: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .PAGE_UP; PAGE_DOWN: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .PAGE_DOWN; END: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .END; HOME: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .HOME; LEFT_ARROW: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .LEFT_ARROW; UP_ARROW: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .UP_ARROW; RIGHT_ARROW: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .RIGHT_ARROW; DOWN_ARROW: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .DOWN_ARROW; INSERT: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .INSERT; DELETE: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .DELETE; F1: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .F1; F2: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .F2; F3: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .F3; F4: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .F4; F5: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .F5; F6: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .F6; F7: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .F7; F8: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .F8; F9: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .F9; F10: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .F10; F11: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .F11; F12: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .F12; META: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .META; COMMA: [TestKey](https://angular.dev/api/cdk/testing/TestKey) .COMMA;}` Jump to details --- # ComponentHarness • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/ComponentHarness#api) ---------------------------------------------------------------- `abstract class [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) { constructor(locatorFactory: [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) ): [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) ; host(): Promise<[TestElement](https://angular.dev/api/cdk/testing/TestElement) >; protected documentRootLocatorFactory(): [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) ; protected locatorFor | string)[]>(...queries: T): () => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) >; protected locatorForOptional | string)[]>(...queries: T): () => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) | null>; protected locatorForAll | string)[]>(...queries: T): () => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) []>; protected forceStabilize(): Promise; protected waitForTasksOutsideAngular(): Promise;}` @paramlocatorFactory`[LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) ` @returns`[ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) ` Gets a `Promise` for the [`TestElement`](https://angular.dev/api/cdk/testing/TestElement) representing the host element of the component. @returns`Promise<[TestElement](https://angular.dev/api/cdk/testing/TestElement) >` Gets a [`LocatorFactory`](https://angular.dev/api/cdk/testing/LocatorFactory) for the document root element. This factory can be used to create locators for elements that a component creates outside of its own root element. (e.g. by appending to document.body). @returns`[LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) ` Creates an asynchronous locator function that can be used to find a [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instance or element under the host element of this [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) . For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'`
    then we expect: await ch.locatorFor(DivHarness, 'div')() // Gets a `DivHarness` instance for #d1await ch.locatorFor('div', DivHarness)() // Gets a `TestElement` instance for #d1await ch.locatorFor('span')() // Throws because the `Promise` rejects @paramqueries`T` A list of queries specifying which harnesses and elements to search for: * A `string` searches for elements matching the CSS selector specified by the string. * A [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) constructor searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given class. * A [`HarnessPredicate`](https://angular.dev/api/cdk/testing/HarnessPredicate) searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given predicate. @returns`() => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) >` Creates an asynchronous locator function that can be used to find a [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instance or element under the host element of this [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) . For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'`
    then we expect: await ch.locatorForOptional(DivHarness, 'div')() // Gets a `DivHarness` instance for #d1await ch.locatorForOptional('div', DivHarness)() // Gets a `TestElement` instance for #d1await ch.locatorForOptional('span')() // Gets `null` @paramqueries`T` A list of queries specifying which harnesses and elements to search for: * A `string` searches for elements matching the CSS selector specified by the string. * A [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) constructor searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given class. * A [`HarnessPredicate`](https://angular.dev/api/cdk/testing/HarnessPredicate) searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given predicate. @returns`() => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) | null>` Creates an asynchronous locator function that can be used to find [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances or elements under the host element of this [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) . For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'` and `IdIsD1Harness.hostSelector` is `'#d1'`
    then we expect: // Gets [DivHarness for #d1, TestElement for #d1, DivHarness for #d2, TestElement for #d2]await ch.locatorForAll(DivHarness, 'div')()// Gets [TestElement for #d1, TestElement for #d2]await ch.locatorForAll('div', '#d1')()// Gets [DivHarness for #d1, IdIsD1Harness for #d1, DivHarness for #d2]await ch.locatorForAll(DivHarness, IdIsD1Harness)()// Gets []await ch.locatorForAll('span')() @paramqueries`T` A list of queries specifying which harnesses and elements to search for: * A `string` searches for elements matching the CSS selector specified by the string. * A [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) constructor searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given class. * A [`HarnessPredicate`](https://angular.dev/api/cdk/testing/HarnessPredicate) searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given predicate. @returns`() => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) []>` Flushes change detection and async tasks in the Angular zone. In most cases it should not be necessary to call this manually. However, there may be some edge cases where it is needed to fully flush animation events. @returns`Promise` Waits for all scheduled or running async tasks to complete. This allows harness authors to wait for async tasks outside of the Angular zone. @returns`Promise` Jump to details --- # CdkDragMove • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CdkDragMove#api) ------------------------------------------------------------- `interface [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) { source: [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) ; pointerPosition: { x: number; y: number; }; event: MouseEvent | TouchEvent; distance: { x: number; y: number; }; delta: { x: 0 | 1 | -1; y: 0 | 1 | -1; };}` Item that is being dragged. Position of the user's pointer on the page. Native event that is causing the dragging. Distance in pixels that the user has dragged since the drag sequence started. Indicates the direction in which the user is dragging the element along each axis. `1` means that the position is increasing (e.g. the user is moving to the right or downwards), whereas `-1` means that it's decreasing (they're moving to the left or upwards). `0` means that the position hasn't changed. Jump to details --- # CdkDragDrop • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CdkDragDrop#api) ------------------------------------------------------------- `interface [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) { previousIndex: number; currentIndex: number; item: [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) ; container: [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) ; previousContainer: [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) ; isPointerOverContainer: boolean; distance: { x: number; y: number; }; dropPoint: { x: number; y: number; }; event: MouseEvent | TouchEvent;}` Index of the item when it was picked up. Current index of the item. Item that is being dropped. Container in which the item was dropped. Container from which the item was picked up. Can be the same as the `container`. Whether the user's pointer was over the container when the item was dropped. Distance in pixels that the user has dragged since the drag sequence started. Position where the pointer was when the item was dropped Native event that caused the drop event. Jump to details --- # CdkDragSortEvent • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent#api) ------------------------------------------------------------------ `interface [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) { previousIndex: number; currentIndex: number; container: [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) ; item: [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) ;}` Index from which the item was sorted previously. Index that the item is currently in. Container that the item belongs to. Item that is being sorted. Jump to details --- # CdkDragStart • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CdkDragStart#api) -------------------------------------------------------------- `interface [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) { source: [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) ; event: MouseEvent | TouchEvent;}` Draggable that emitted the event. Native event that started the drag sequence. Jump to details --- # stopHandlingAutoChangeDetectionStatus • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus#api) ------------------------------------------------------------------------------------- function stopHandlingAutoChangeDetectionStatus(): void; Jump to details --- # HarnessPredicate • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/HarnessPredicate#api) ---------------------------------------------------------------- `class [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) { constructor(harnessType: [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) , options: [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) ): [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) ; override harnessType: [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) ; add(description: string, predicate: [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) ): this; addOption(name: string, option: O | undefined, predicate: [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) ): this; filter(harnesses: T[]): Promise; evaluate(harness: T): Promise; getDescription(): string; getSelector(): string; static stringMatches(value: string | Promise | null, pattern: string | RegExp | null): Promise;}` @paramharnessType`[ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) ` @paramoptions`[BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) ` @returns`[HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) ` Adds a predicate function to be run against candidate harnesses. @paramdescription`string` A description of this predicate that may be used in error messages. @parampredicate`[AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) ` An async predicate function. @returns`this` Adds a predicate function that depends on an option value to be run against candidate harnesses. If the option value is undefined, the predicate will be ignored. @paramname`string` The name of the option (may be used in error messages). @paramoption`O | undefined` The option value. @parampredicate`[AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) ` The predicate function to run if the option value is not undefined. @returns`this` Filters a list of harnesses on this predicate. @paramharnesses`T[]` The list of harnesses to filter. @returns`Promise` Evaluates whether the given harness satisfies this predicate. @paramharness`T` The harness to check @returns`Promise` Gets a description of this predicate for use in error messages. @returns`string` Gets the selector used to find candidate elements. @returns`string` Checks if the specified nullable string value matches the given pattern. @paramvalue`string | Promise | null` The nullable string value to check, or a Promise resolving to the nullable string value. @parampattern`string | RegExp | null` The pattern the value is expected to match. If `pattern` is a string, `value` is expected to match exactly. If `pattern` is a regex, a partial match is allowed. If `pattern` is `null`, the value is expected to be `null`. @returns`Promise` Jump to details --- # CdkDragHandle • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CdkDragHandle#api) --------------------------------------------------------------- `class [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) implements [AfterViewInit](https://angular.dev/api/core/AfterViewInit) ,[OnDestroy](https://angular.dev/api/core/OnDestroy) { element: any; get disabled(): boolean;}` Whether starting to drag through this handle is disabled. @returns`void` @returns`void` Jump to details --- # CdkDragPreview • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CdkDragPreview#api) ---------------------------------------------------------------- `class [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) implements [OnDestroy](https://angular.dev/api/core/OnDestroy) { templateRef: any; data: T; matchSize: boolean;}` Context data to be added to the preview template instance. Whether the preview should preserve the same size as the item that is being dragged. @returns`void` Jump to details --- # CdkDropListGroup • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup#api) ------------------------------------------------------------------ `class [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) implements [OnDestroy](https://angular.dev/api/core/OnDestroy) { disabled: boolean;}` Whether starting a dragging sequence from inside this group is disabled. @returns`void` Jump to details --- # DropListOrientation • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/DropListOrientation#api) --------------------------------------------------------------------- `type [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) = 'horizontal' | 'vertical' | 'mixed'` Jump to details --- # DragDrop • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) Deprecation warning Use the [`createDragRef`](https://angular.dev/api/cdk/drag-drop/createDragRef) or [`createDropListRef`](https://angular.dev/api/cdk/drag-drop/createDropListRef) function for better tree shaking. Will be removed in v23. [API](https://angular.dev/api/cdk/drag-drop/DragDrop#api) ---------------------------------------------------------- `class [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) { createDrag(element: any, config?: [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) | undefined): [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) ; createDropList(element: any): [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) ;}` Turns an element into a draggable item. @deprecated Use the [`createDragRef`](https://angular.dev/api/cdk/drag-drop/createDragRef) function that provides better tree shaking. @paramelement`any` Element to which to attach the dragging functionality. @paramconfig`[DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) | undefined` Object used to configure the dragging behavior. @returns`[DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) ` Turns an element into a drop list. @deprecated Use the [`createDropListRef`](https://angular.dev/api/cdk/drag-drop/createDropListRef) function that provides better tree shaking. @paramelement`any` Element to which to attach the drop list functionality. @returns`[DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) ` Jump to details --- # DragStartDelay • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/DragStartDelay#api) ---------------------------------------------------------------- `type [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) = number | {touch: number; mouse: number}` Jump to details --- # CdkDragRelease • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CdkDragRelease#api) ---------------------------------------------------------------- `interface [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) { source: [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) ; event: MouseEvent | TouchEvent;}` Draggable that emitted the event. Native event that caused the release event. Jump to details --- # ContentContainerComponentHarness • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness#api) -------------------------------------------------------------------------------- `abstract class [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) extends [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) implements [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) { getChildLoader(selector: S): Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) >; getAllChildLoaders(selector: S): Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) []>; getHarness(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ): Promise; getHarnessOrNull(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ): Promise; getHarnessAtIndex(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) , index: number): Promise; getAllHarnesses(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ): Promise; countHarnesses(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ): Promise; hasHarness(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ): Promise; protected getRootHarnessLoader(): Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) >; override host(): Promise<[TestElement](https://angular.dev/api/cdk/testing/TestElement) >; protected override documentRootLocatorFactory(): [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) ; protected override locatorFor | string)[]>(...queries: T): () => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) >; protected override locatorForOptional | string)[]>(...queries: T): () => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) | null>; protected override locatorForAll | string)[]>(...queries: T): () => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) []>; protected override forceStabilize(): Promise; protected override waitForTasksOutsideAngular(): Promise;}` Gets a [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) that searches for harnesses under the first element matching the given selector within the current harness's content. @paramselector`S` The selector for an element in the component's content. @returns`Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) >` Gets a list of [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) for each element matching the given selector under the current harness's cotnent that searches for harnesses under that element. @paramselector`S` The selector for elements in the component's content. @returns`Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) []>` Gets the first matching harness for the given query within the current harness's content. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` The harness query to search for. @returns`Promise` Gets the first matching harness for the given query within the current harness's content. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` The harness query to search for. @returns`Promise` Gets a matching harness for the given query and index within the current harness's content. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` The harness query to search for. @paramindex`number` The zero-indexed offset of the component to find. @returns`Promise` Gets all matching harnesses for the given query within the current harness's content. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` The harness query to search for. @returns`Promise` Returns the number of matching harnesses for the given query within the current harness's content. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` The harness query to search for. @returns`Promise` Checks whether there is a matching harnesses for the given query within the current harness's content. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` The harness query to search for. @returns`Promise` Gets the root harness loader from which to start searching for content contained by this harness. @returns`Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) >` Gets a `Promise` for the [`TestElement`](https://angular.dev/api/cdk/testing/TestElement) representing the host element of the component. @returns`Promise<[TestElement](https://angular.dev/api/cdk/testing/TestElement) >` Gets a [`LocatorFactory`](https://angular.dev/api/cdk/testing/LocatorFactory) for the document root element. This factory can be used to create locators for elements that a component creates outside of its own root element. (e.g. by appending to document.body). @returns`[LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) ` Creates an asynchronous locator function that can be used to find a [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instance or element under the host element of this [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) . For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'`
    then we expect: await ch.locatorFor(DivHarness, 'div')() // Gets a `DivHarness` instance for #d1await ch.locatorFor('div', DivHarness)() // Gets a `TestElement` instance for #d1await ch.locatorFor('span')() // Throws because the `Promise` rejects @paramqueries`T` A list of queries specifying which harnesses and elements to search for: * A `string` searches for elements matching the CSS selector specified by the string. * A [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) constructor searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given class. * A [`HarnessPredicate`](https://angular.dev/api/cdk/testing/HarnessPredicate) searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given predicate. @returns`() => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) >` Creates an asynchronous locator function that can be used to find a [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instance or element under the host element of this [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) . For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'`
    then we expect: await ch.locatorForOptional(DivHarness, 'div')() // Gets a `DivHarness` instance for #d1await ch.locatorForOptional('div', DivHarness)() // Gets a `TestElement` instance for #d1await ch.locatorForOptional('span')() // Gets `null` @paramqueries`T` A list of queries specifying which harnesses and elements to search for: * A `string` searches for elements matching the CSS selector specified by the string. * A [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) constructor searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given class. * A [`HarnessPredicate`](https://angular.dev/api/cdk/testing/HarnessPredicate) searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given predicate. @returns`() => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) | null>` Creates an asynchronous locator function that can be used to find [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances or elements under the host element of this [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) . For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'` and `IdIsD1Harness.hostSelector` is `'#d1'`
    then we expect: // Gets [DivHarness for #d1, TestElement for #d1, DivHarness for #d2, TestElement for #d2]await ch.locatorForAll(DivHarness, 'div')()// Gets [TestElement for #d1, TestElement for #d2]await ch.locatorForAll('div', '#d1')()// Gets [DivHarness for #d1, IdIsD1Harness for #d1, DivHarness for #d2]await ch.locatorForAll(DivHarness, IdIsD1Harness)()// Gets []await ch.locatorForAll('span')() @paramqueries`T` A list of queries specifying which harnesses and elements to search for: * A `string` searches for elements matching the CSS selector specified by the string. * A [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) constructor searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given class. * A [`HarnessPredicate`](https://angular.dev/api/cdk/testing/HarnessPredicate) searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given predicate. @returns`() => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) []>` Flushes change detection and async tasks in the Angular zone. In most cases it should not be necessary to call this manually. However, there may be some edge cases where it is needed to fully flush animation events. @returns`Promise` Waits for all scheduled or running async tasks to complete. This allows harness authors to wait for async tasks outside of the Angular zone. @returns`Promise` Jump to details --- # copyArrayItem • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/copyArrayItem#api) --------------------------------------------------------------- function copyArrayItem( currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number,): void; Jump to details --- # Point • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/Point#api) ------------------------------------------------------- `interface [Point](https://angular.dev/api/cdk/drag-drop/Point) { x: number; y: number;}` Jump to details --- # DragDropConfig • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/DragDropConfig#api) ---------------------------------------------------------------- `interface [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) extends Partial<[DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) > { lockAxis?: [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) | null | undefined; dragStartDelay?: [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) | undefined; constrainPosition?: [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) | undefined; previewClass?: string | string[] | undefined; boundaryElement?: string | undefined; rootElementSelector?: string | undefined; draggingDisabled?: boolean | undefined; sortingDisabled?: boolean | undefined; listAutoScrollDisabled?: boolean | undefined; listOrientation?: [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) | undefined; zIndex?: number | undefined; previewContainer?: "global" | "parent" | undefined; override dragStartThreshold: number; override pointerDirectionChangeThreshold: number; override parentDragRef?: [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) | undefined;}` Minimum amount of pixels that the user should drag, before the CDK initiates a drag sequence. Amount the pixels the user should drag before the CDK considers them to have changed the drag direction. Ref that the current drag item is nested in. Jump to details --- # DragAxis • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/DragAxis#api) ---------------------------------------------------------- `type [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) = 'x' | 'y'` Jump to details --- # CdkDragPlaceholder • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder#api) -------------------------------------------------------------------- `class [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) implements [OnDestroy](https://angular.dev/api/core/OnDestroy) { templateRef: any; @[Input](https://angular.dev/api/core/Input) () data: T;}` Context data to be added to the placeholder template instance. @returns`void` Jump to details --- # createDragRef • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/createDragRef#api) --------------------------------------------------------------- function createDragRef( injector: Injector, element: any, config?: DragRefConfig,): DragRef; Jump to details --- # DragRefConfig • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/DragRefConfig#api) --------------------------------------------------------------- `interface [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) { dragStartThreshold: number; pointerDirectionChangeThreshold: number; zIndex?: number | undefined; parentDragRef?: [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) | undefined;}` Minimum amount of pixels that the user should drag, before the CDK initiates a drag sequence. Amount the pixels the user should drag before the CDK considers them to have changed the drag direction. `z-index` for the absolutely-positioned elements that are created by the drag item. Ref that the current drag item is nested in. Jump to details --- # transferArrayItem • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/transferArrayItem#api) ------------------------------------------------------------------- function transferArrayItem( currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number,): void; Jump to details --- # CdkDragEnd • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CdkDragEnd#api) ------------------------------------------------------------ `interface [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) { source: [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) ; distance: { x: number; y: number; }; dropPoint: { x: number; y: number; }; event: MouseEvent | TouchEvent;}` Draggable that emitted the event. Distance in pixels that the user has dragged since the drag sequence started. Position where the pointer was when the item was dropped Native event that caused the dragging to stop. Jump to details --- # DragDropModule • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/DragDropModule#api) ---------------------------------------------------------------- `class [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) {}` Jump to details --- # parallel • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/parallel#api) -------------------------------------------------------- function parallel( values: () => [ T1 | PromiseLike, T2 | PromiseLike, T3 | PromiseLike, T4 | PromiseLike, T5 | PromiseLike, ],): Promise<[T1, T2, T3, T4, T5]>;function parallel( values: () => [ T1 | PromiseLike, T2 | PromiseLike, T3 | PromiseLike, T4 | PromiseLike, ],): Promise<[T1, T2, T3, T4]>;function parallel( values: () => [ T1 | PromiseLike, T2 | PromiseLike, T3 | PromiseLike, ],): Promise<[T1, T2, T3]>;function parallel( values: () => [T1 | PromiseLike, T2 | PromiseLike],): Promise<[T1, T2]>;function parallel(values: () => (T | PromiseLike)[]): Promise; Resolves the given list of async values in parallel (i.e. via Promise.all) while batching change detection over the entire operation such that change detection occurs exactly once before resolving the values and once after. @paramvalues`() => [T1 | PromiseLike, T2 | PromiseLike, T3 | PromiseLike, T4 | PromiseLike, T5 | PromiseLike]` A getter for the async values to resolve in parallel with batched change detection. @returns`Promise<[T1, T2, T3, T4, T5]>` Resolves the given list of async values in parallel (i.e. via Promise.all) while batching change detection over the entire operation such that change detection occurs exactly once before resolving the values and once after. @paramvalues`() => [T1 | PromiseLike, T2 | PromiseLike, T3 | PromiseLike, T4 | PromiseLike]` A getter for the async values to resolve in parallel with batched change detection. @returns`Promise<[T1, T2, T3, T4]>` Resolves the given list of async values in parallel (i.e. via Promise.all) while batching change detection over the entire operation such that change detection occurs exactly once before resolving the values and once after. @paramvalues`() => [T1 | PromiseLike, T2 | PromiseLike, T3 | PromiseLike]` A getter for the async values to resolve in parallel with batched change detection. @returns`Promise<[T1, T2, T3]>` Resolves the given list of async values in parallel (i.e. via Promise.all) while batching change detection over the entire operation such that change detection occurs exactly once before resolving the values and once after. @paramvalues`() => [T1 | PromiseLike, T2 | PromiseLike]` A getter for the async values to resolve in parallel with batched change detection. @returns`Promise<[T1, T2]>` Resolves the given list of async values in parallel (i.e. via Promise.all) while batching change detection over the entire operation such that change detection occurs exactly once before resolving the values and once after. @paramvalues`() => (T | PromiseLike)[]` A getter for the async values to resolve in parallel with batched change detection. @returns`Promise` Jump to details --- # PreviewContainer • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/PreviewContainer#api) ------------------------------------------------------------------ `type [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) = 'global' | 'parent' | [ElementRef](https://angular.dev/api/core/ElementRef) | HTMLElement` Jump to details --- # createDropListRef • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/createDropListRef#api) ------------------------------------------------------------------- function createDropListRef( injector: Injector, element: any,): DropListRef; Jump to details --- # LocatorFactory • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/LocatorFactory#api) -------------------------------------------------------------- `interface [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) { documentRootLocatorFactory(): [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) ; rootElement: [TestElement](https://angular.dev/api/cdk/testing/TestElement) ; locatorFor | string)[]>(...queries: T): () => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) >; locatorForOptional | string)[]>(...queries: T): () => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) | null>; locatorForAll | string)[]>(...queries: T): () => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) []>; rootHarnessLoader(): Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) >; harnessLoaderFor(selector: string): Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) >; harnessLoaderForOptional(selector: string): Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) | null>; harnessLoaderForAll(selector: string): Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) []>; forceStabilize(): Promise; waitForTasksOutsideAngular(): Promise;}` Gets a locator factory rooted at the document root. @returns`[LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) ` The root element of this [`LocatorFactory`](https://angular.dev/api/cdk/testing/LocatorFactory) as a [`TestElement`](https://angular.dev/api/cdk/testing/TestElement) . Creates an asynchronous locator function that can be used to find a [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instance or element under the root element of this [`LocatorFactory`](https://angular.dev/api/cdk/testing/LocatorFactory) . For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'`
    then we expect: await lf.locatorFor(DivHarness, 'div')() // Gets a `DivHarness` instance for #d1await lf.locatorFor('div', DivHarness)() // Gets a `TestElement` instance for #d1await lf.locatorFor('span')() // Throws because the `Promise` rejects @paramqueries`T` A list of queries specifying which harnesses and elements to search for: * A `string` searches for elements matching the CSS selector specified by the string. * A [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) constructor searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given class. * A [`HarnessPredicate`](https://angular.dev/api/cdk/testing/HarnessPredicate) searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given predicate. @returns`() => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) >` Creates an asynchronous locator function that can be used to find a [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instance or element under the root element of this [`LocatorFactory`](https://angular.dev/api/cdk/testing/LocatorFactory) . For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'`
    then we expect: await lf.locatorForOptional(DivHarness, 'div')() // Gets a `DivHarness` instance for #d1await lf.locatorForOptional('div', DivHarness)() // Gets a `TestElement` instance for #d1await lf.locatorForOptional('span')() // Gets `null` @paramqueries`T` A list of queries specifying which harnesses and elements to search for: * A `string` searches for elements matching the CSS selector specified by the string. * A [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) constructor searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given class. * A [`HarnessPredicate`](https://angular.dev/api/cdk/testing/HarnessPredicate) searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given predicate. @returns`() => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) | null>` Creates an asynchronous locator function that can be used to find [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances or elements under the root element of this [`LocatorFactory`](https://angular.dev/api/cdk/testing/LocatorFactory) . For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'` and `IdIsD1Harness.hostSelector` is `'#d1'`
    then we expect: // Gets [DivHarness for #d1, TestElement for #d1, DivHarness for #d2, TestElement for #d2]await lf.locatorForAll(DivHarness, 'div')()// Gets [TestElement for #d1, TestElement for #d2]await lf.locatorForAll('div', '#d1')()// Gets [DivHarness for #d1, IdIsD1Harness for #d1, DivHarness for #d2]await lf.locatorForAll(DivHarness, IdIsD1Harness)()// Gets []await lf.locatorForAll('span')() @paramqueries`T` A list of queries specifying which harnesses and elements to search for: * A `string` searches for elements matching the CSS selector specified by the string. * A [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) constructor searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given class. * A [`HarnessPredicate`](https://angular.dev/api/cdk/testing/HarnessPredicate) searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given predicate. @returns`() => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) []>` @returns`Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) >` Gets a [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) instance for an element under the root of this [`LocatorFactory`](https://angular.dev/api/cdk/testing/LocatorFactory) . @paramselector`string` The selector for the root element. @returns`Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) >` Gets a [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) instance for an element under the root of this [`LocatorFactory`](https://angular.dev/api/cdk/testing/LocatorFactory) @paramselector`string` The selector for the root element. @returns`Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) | null>` Gets a list of [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) instances, one for each matching element. @paramselector`string` The selector for the root element. @returns`Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) []>` Flushes change detection and async tasks captured in the Angular zone. In most cases it should not be necessary to call this manually. However, there may be some edge cases where it is needed to fully flush animation events. @returns`Promise` Waits for all scheduled or running async tasks to complete. This allows harness authors to wait for async tasks outside of the Angular zone. @returns`Promise` Jump to details --- # TestElement • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/TestElement#api) ----------------------------------------------------------- `interface [TestElement](https://angular.dev/api/cdk/testing/TestElement) { blur(): Promise; clear(): Promise; click(modifiers?: [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) | undefined): Promise; click(location: "center", modifiers?: [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) | undefined): Promise; click(relativeX: number, relativeY: number, modifiers?: [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) | undefined): Promise; rightClick(relativeX: number, relativeY: number, modifiers?: [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) | undefined): Promise; focus(): Promise; getCssValue(property: string): Promise; hover(): Promise; mouseAway(): Promise; sendKeys(...keys: (string | [TestKey](https://angular.dev/api/cdk/testing/TestKey) )[]): Promise; sendKeys(modifiers: [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) , ...keys: (string | [TestKey](https://angular.dev/api/cdk/testing/TestKey) )[]): Promise; text(options?: [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) | undefined): Promise; setContenteditableValue(value: string): Promise; getAttribute(name: string): Promise; hasClass(name: string): Promise; getDimensions(): Promise<[ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) >; getProperty(name: string): Promise; matchesSelector(selector: string): Promise; isFocused(): Promise; setInputValue(value: string): Promise; selectOptions(...optionIndexes: number[]): Promise; dispatchEvent(name: string, data?: Record | undefined): Promise;}` Blur the element. @returns`Promise` Clear the element's input (for input and textarea elements only). @returns`Promise` Click the element at the default location for the current environment. If you need to guarantee the element is clicked at a specific location, consider using `click('center')` or `click(x, y)` instead. @parammodifiers`[ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) | undefined` @returns`Promise` Click the element at the element's center. @paramlocation`"center"` @parammodifiers`[ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) | undefined` @returns`Promise` Click the element at the specified coordinates relative to the top-left of the element. @paramrelativeX`number` Coordinate within the element, along the X-axis at which to click. @paramrelativeY`number` Coordinate within the element, along the Y-axis at which to click. @parammodifiers`[ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) | undefined` Modifier keys held while clicking @returns`Promise` Right clicks on the element at the specified coordinates relative to the top-left of it. @paramrelativeX`number` Coordinate within the element, along the X-axis at which to click. @paramrelativeY`number` Coordinate within the element, along the Y-axis at which to click. @parammodifiers`[ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) | undefined` Modifier keys held while clicking @returns`Promise` Focus the element. @returns`Promise` Get the computed value of the given CSS property for the element. @paramproperty`string` @returns`Promise` Hovers the mouse over the element. @returns`Promise` Moves the mouse away from the element. @returns`Promise` Sends the given string to the input as a series of key presses. Also fires input events and attempts to add the string to the Element's value. Note that some environments cannot reproduce native browser behavior for keyboard shortcuts such as Tab, Ctrl + A, etc. @paramkeys`(string | [TestKey](https://angular.dev/api/cdk/testing/TestKey) )[]` @returns`Promise` Sends the given string to the input as a series of key presses. Also fires input events and attempts to add the string to the Element's value. @parammodifiers`[ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) ` @paramkeys`(string | [TestKey](https://angular.dev/api/cdk/testing/TestKey) )[]` @returns`Promise` Gets the text from the element. @paramoptions`[TextOptions](https://angular.dev/api/cdk/testing/TextOptions) | undefined` Options that affect what text is included. @returns`Promise` Sets the value of a `contenteditable` element. @paramvalue`string` Value to be set on the element. @returns`Promise` Gets the value for the given attribute from the element. @paramname`string` @returns`Promise` Checks whether the element has the given class. @paramname`string` @returns`Promise` Gets the dimensions of the element. @returns`Promise<[ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) >` Gets the value of a property of an element. @paramname`string` @returns`Promise` Checks whether this element matches the given selector. @paramselector`string` @returns`Promise` Checks whether the element is focused. @returns`Promise` Sets the value of a property of an input. @paramvalue`string` @returns`Promise` Selects the options at the specified indexes inside of a native `select` element. @paramoptionIndexes`number[]` @returns`Promise` Dispatches an event with a particular name. @paramname`string` Name of the event to be dispatched. @paramdata`Record | undefined` @returns`Promise` Jump to details --- # moveItemInArray • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/moveItemInArray#api) ----------------------------------------------------------------- function moveItemInArray( array: T[], fromIndex: number, toIndex: number,): void; Jump to details --- # HarnessEnvironment • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/testing * [AsyncOptionPredicate](https://angular.dev/api/cdk/testing/AsyncOptionPredicate) * [AsyncPredicate](https://angular.dev/api/cdk/testing/AsyncPredicate) * [AutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/AutoChangeDetectionStatus) * [BaseHarnessFilters](https://angular.dev/api/cdk/testing/BaseHarnessFilters) * [ComponentHarness](https://angular.dev/api/cdk/testing/ComponentHarness) * [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) * [ContentContainerComponentHarness](https://angular.dev/api/cdk/testing/ContentContainerComponentHarness) * [ElementDimensions](https://angular.dev/api/cdk/testing/ElementDimensions) * [EventData](https://angular.dev/api/cdk/testing/EventData) * [handleAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/handleAutoChangeDetectionStatus) * [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) * [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) * [HarnessPredicate](https://angular.dev/api/cdk/testing/HarnessPredicate) * [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) * [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) * [LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) * [manualChangeDetection](https://angular.dev/api/cdk/testing/manualChangeDetection) * [ModifierKeys](https://angular.dev/api/cdk/testing/ModifierKeys) * [parallel](https://angular.dev/api/cdk/testing/parallel) * [stopHandlingAutoChangeDetectionStatus](https://angular.dev/api/cdk/testing/stopHandlingAutoChangeDetectionStatus) * [TestElement](https://angular.dev/api/cdk/testing/TestElement) * [TestKey](https://angular.dev/api/cdk/testing/TestKey) * [TextOptions](https://angular.dev/api/cdk/testing/TextOptions) [API](https://angular.dev/api/cdk/testing/HarnessEnvironment#api) ------------------------------------------------------------------ `abstract class [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) implements [HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) ,[LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) { protected constructor(rawRootElement: E): [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) ; get rootElement(): [TestElement](https://angular.dev/api/cdk/testing/TestElement) ; documentRootLocatorFactory(): [LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) ; locatorFor | string)[]>(...queries: T): () => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) >; locatorForOptional | string)[]>(...queries: T): () => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) | null>; locatorForAll | string)[]>(...queries: T): () => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) []>; rootHarnessLoader(): Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) >; harnessLoaderFor(selector: string): Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) >; harnessLoaderForOptional(selector: string): Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) | null>; harnessLoaderForAll(selector: string): Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) []>; getHarness(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ): Promise; getHarnessOrNull(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ): Promise; getHarnessAtIndex(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) , offset: number): Promise; getAllHarnesses(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ): Promise; countHarnesses(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ): Promise; hasHarness(query: [HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ): Promise; getChildLoader(selector: string): Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) >; getAllChildLoaders(selector: string): Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) []>; protected createComponentHarness(harnessType: [ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) , element: E): T; abstract forceStabilize(): Promise; abstract waitForTasksOutsideAngular(): Promise; protected abstract getDocumentRoot(): E; protected abstract createTestElement(element: E): [TestElement](https://angular.dev/api/cdk/testing/TestElement) ; protected abstract createEnvironment(element: E): [HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) ; protected abstract getAllRawElements(selector: string): Promise;}` @paramrawRootElement`E` The native root element of this [`HarnessEnvironment`](https://angular.dev/api/cdk/testing/HarnessEnvironment) . @returns`[HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) ` The root element of this [`HarnessEnvironment`](https://angular.dev/api/cdk/testing/HarnessEnvironment) as a [`TestElement`](https://angular.dev/api/cdk/testing/TestElement) . Gets a locator factory rooted at the document root. @returns`[LocatorFactory](https://angular.dev/api/cdk/testing/LocatorFactory) ` Creates an asynchronous locator function that can be used to find a [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instance or element under the root element of this [`HarnessEnvironment`](https://angular.dev/api/cdk/testing/HarnessEnvironment) . For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'`
    then we expect: await lf.locatorFor(DivHarness, 'div')() // Gets a `DivHarness` instance for #d1await lf.locatorFor('div', DivHarness)() // Gets a `TestElement` instance for #d1await lf.locatorFor('span')() // Throws because the `Promise` rejects @paramqueries`T` A list of queries specifying which harnesses and elements to search for: * A `string` searches for elements matching the CSS selector specified by the string. * A [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) constructor searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given class. * A [`HarnessPredicate`](https://angular.dev/api/cdk/testing/HarnessPredicate) searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given predicate. @returns`() => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) >` Creates an asynchronous locator function that can be used to find a [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instance or element under the root element of this `HarnessEnvironmnet`. For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'`
    then we expect: await lf.locatorForOptional(DivHarness, 'div')() // Gets a `DivHarness` instance for #d1await lf.locatorForOptional('div', DivHarness)() // Gets a `TestElement` instance for #d1await lf.locatorForOptional('span')() // Gets `null` @paramqueries`T` A list of queries specifying which harnesses and elements to search for: * A `string` searches for elements matching the CSS selector specified by the string. * A [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) constructor searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given class. * A [`HarnessPredicate`](https://angular.dev/api/cdk/testing/HarnessPredicate) searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given predicate. @returns`() => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) | null>` Creates an asynchronous locator function that can be used to find [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances or elements under the root element of this [`HarnessEnvironment`](https://angular.dev/api/cdk/testing/HarnessEnvironment) . For example, given the following DOM and assuming `DivHarness.hostSelector` is `'div'` and `IdIsD1Harness.hostSelector` is `'#d1'`
    then we expect: // Gets [DivHarness for #d1, TestElement for #d1, DivHarness for #d2, TestElement for #d2]await lf.locatorForAll(DivHarness, 'div')()// Gets [TestElement for #d1, TestElement for #d2]await lf.locatorForAll('div', '#d1')()// Gets [DivHarness for #d1, IdIsD1Harness for #d1, DivHarness for #d2]await lf.locatorForAll(DivHarness, IdIsD1Harness)()// Gets []await lf.locatorForAll('span')() @paramqueries`T` A list of queries specifying which harnesses and elements to search for: * A `string` searches for elements matching the CSS selector specified by the string. * A [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) constructor searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given class. * A [`HarnessPredicate`](https://angular.dev/api/cdk/testing/HarnessPredicate) searches for [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) instances matching the given predicate. @returns`() => Promise<[LocatorFnResult](https://angular.dev/api/cdk/testing/LocatorFnResult) []>` @returns`Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) >` Gets a [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) instance for an element under the root of this [`HarnessEnvironment`](https://angular.dev/api/cdk/testing/HarnessEnvironment) . @paramselector`string` The selector for the root element. @returns`Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) >` Gets a [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) instance for an element under the root of this [`HarnessEnvironment`](https://angular.dev/api/cdk/testing/HarnessEnvironment) . @paramselector`string` The selector for the root element. @returns`Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) | null>` Gets a list of [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) instances, one for each matching element. @paramselector`string` The selector for the root element. @returns`Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) []>` Searches for an instance of the component corresponding to the given harness type under the [`HarnessEnvironment`](https://angular.dev/api/cdk/testing/HarnessEnvironment) 's root element, and returns a [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) for that instance. If multiple matching components are found, a harness for the first one is returned. If no matching component is found, an error is thrown. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` A query for a harness to create @returns`Promise` Searches for an instance of the component corresponding to the given harness type under the [`HarnessEnvironment`](https://angular.dev/api/cdk/testing/HarnessEnvironment) 's root element, and returns a [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) for that instance. If multiple matching components are found, a harness for the first one is returned. If no matching component is found, null is returned. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` A query for a harness to create @returns`Promise` Searches for an instance of the component corresponding to the given harness type and index under the [`HarnessEnvironment`](https://angular.dev/api/cdk/testing/HarnessEnvironment) 's root element, and returns a [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) for that instance. The index specifies the offset of the component to find. If no matching component is found at that index, an error is thrown. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` A query for a harness to create @paramoffset`number` @returns`Promise` Searches for all instances of the component corresponding to the given harness type under the [`HarnessEnvironment`](https://angular.dev/api/cdk/testing/HarnessEnvironment) 's root element, and returns a list [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) for each instance. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` A query for a harness to create @returns`Promise` Searches for all instance of the component corresponding to the given harness type under the [`HarnessEnvironment`](https://angular.dev/api/cdk/testing/HarnessEnvironment) 's root element, and returns the number that were found. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` A query for a harness to create @returns`Promise` Searches for an instance of the component corresponding to the given harness type under the [`HarnessEnvironment`](https://angular.dev/api/cdk/testing/HarnessEnvironment) 's root element, and returns a boolean indicating if any were found. @paramquery`[HarnessQuery](https://angular.dev/api/cdk/testing/HarnessQuery) ` A query for a harness to create @returns`Promise` Searches for an element with the given selector under the evironment's root element, and returns a [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) rooted at the matching element. If multiple elements match the selector, the first is used. If no elements match, an error is thrown. @paramselector`string` The selector for the root element of the new [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) @returns`Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) >` Searches for all elements with the given selector under the environment's root element, and returns an array of [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) s, one for each matching element, rooted at that element. @paramselector`string` The selector for the root element of the new [`HarnessLoader`](https://angular.dev/api/cdk/testing/HarnessLoader) @returns`Promise<[HarnessLoader](https://angular.dev/api/cdk/testing/HarnessLoader) []>` Creates a [`ComponentHarness`](https://angular.dev/api/cdk/testing/ComponentHarness) for the given harness type with the given raw host element. @paramharnessType`[ComponentHarnessConstructor](https://angular.dev/api/cdk/testing/ComponentHarnessConstructor) ` @paramelement`E` @returns`T` Flushes change detection and async tasks captured in the Angular zone. In most cases it should not be necessary to call this manually. However, there may be some edge cases where it is needed to fully flush animation events. This is an abstrct method that must be implemented by subclasses. @returns`Promise` Waits for all scheduled or running async tasks to complete. This allows harness authors to wait for async tasks outside of the Angular zone. This is an abstrct method that must be implemented by subclasses. @returns`Promise` Gets the root element for the document. @returns`E` Creates a [`TestElement`](https://angular.dev/api/cdk/testing/TestElement) from a raw element. @paramelement`E` @returns`[TestElement](https://angular.dev/api/cdk/testing/TestElement) ` Creates a [`HarnessEnvironment`](https://angular.dev/api/cdk/testing/HarnessEnvironment) rooted at the given raw element. @paramelement`E` @returns`[HarnessEnvironment](https://angular.dev/api/cdk/testing/HarnessEnvironment) ` Gets a list of all elements matching the given selector under this environment's root element. @paramselector`string` @returns`Promise` Jump to details --- # CdkDropList • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CdkDropList#api) ------------------------------------------------------------- `class [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) implements [OnDestroy](https://angular.dev/api/core/OnDestroy) { element: any; connectedTo: string | [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) | (string | [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) )[]; data: T; orientation: [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) ; id: string; lockAxis: [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) | null; get disabled(): boolean; sortingDisabled: boolean; enterPredicate: (drag: [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) , drop: [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) ) => boolean; sortPredicate: (index: number, drag: [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) , drop: [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) ) => boolean; autoScrollDisabled: boolean; autoScrollStep: NumberInput; elementContainerSelector: string | null; hasAnchor: boolean; readonly dropped: [EventEmitter](https://angular.dev/api/core/EventEmitter) <[CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) >; readonly entered: [EventEmitter](https://angular.dev/api/core/EventEmitter) <[CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) >; readonly exited: [EventEmitter](https://angular.dev/api/core/EventEmitter) <[CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) >; readonly sorted: [EventEmitter](https://angular.dev/api/core/EventEmitter) <[CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) >; addItem(item: [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) ): void; removeItem(item: [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) ): void; getSortedItems(): [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) [];}` Other draggable containers that this container is connected to and into which the container's items can be transferred. Can either be references to other drop containers, or their unique IDs. Arbitrary data to attach to this container. Direction in which the list is oriented. Unique ID for the drop zone. Can be used as a reference in the `connectedTo` of another [`CdkDropList`](https://angular.dev/api/cdk/drag-drop/CdkDropList) . Locks the position of the draggable elements inside the container along the specified axis. Whether starting a dragging sequence from this container is disabled. Whether sorting within this drop list is disabled. Function that is used to determine whether an item is allowed to be moved into a drop container. Functions that is used to determine whether an item can be sorted into a particular index. Whether to auto-scroll the view when the user moves their pointer close to the edges. Number of pixels to scroll for each frame when auto-scrolling an element. Selector that will be used to resolve an alternate element container for the drop list. Passing an alternate container is useful for the cases where one might not have control over the parent node of the draggable items within the list (e.g. due to content projection). This allows for usages like:
    By default when an item leaves its initial container, its placeholder will be transferred to the new container. If that's not desirable for your use case, you can enable this option which will clone the placeholder and leave it inside the original container. If the item is returned to the initial container, the anchor element will be removed automatically. The cloned placeholder can be styled by targeting the `cdk-drag-anchor` class. This option is useful in combination with `cdkDropListSortingDisabled` to implement copying behavior in a drop list. Emits when the user drops an item inside the container. Emits when the user has moved a new drag item into this container. Emits when the user removes an item from the container by dragging it into another container. Emits as the user is swapping items while actively dragging. Registers an items with the drop list. @paramitem`[CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) ` @returns`void` Removes an item from the drop list. @paramitem`[CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) ` @returns`void` Gets the registered items in the list, sorted by their position in the DOM. @returns`[CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) []` @returns`void` Jump to details --- # CdkDrag • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/CdkDrag#api) --------------------------------------------------------- `class [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) implements [AfterViewInit](https://angular.dev/api/core/AfterViewInit) ,[OnChanges](https://angular.dev/api/core/OnChanges) ,[OnDestroy](https://angular.dev/api/core/OnDestroy) { element: any; dropContainer: any; data: T; lockAxis: [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) | null; rootElementSelector: string; boundaryElement: any; dragStartDelay: [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) ; freeDragPosition: [Point](https://angular.dev/api/cdk/drag-drop/Point) ; get disabled(): boolean; constrainPosition?: [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) | undefined; previewClass: string | string[]; previewContainer: any; scale: number; readonly started: [EventEmitter](https://angular.dev/api/core/EventEmitter) <[CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) >; readonly released: [EventEmitter](https://angular.dev/api/core/EventEmitter) <[CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) >; readonly ended: [EventEmitter](https://angular.dev/api/core/EventEmitter) <[CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) >; readonly entered: [EventEmitter](https://angular.dev/api/core/EventEmitter) <[CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) >; readonly exited: [EventEmitter](https://angular.dev/api/core/EventEmitter) <[CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) >; readonly dropped: [EventEmitter](https://angular.dev/api/core/EventEmitter) <[CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) >; readonly moved: Observable<[CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) >; getPlaceholderElement(): HTMLElement; getRootElement(): HTMLElement; reset(): void; resetToBoundary(): void; getFreeDragPosition(): Readonly<[Point](https://angular.dev/api/cdk/drag-drop/Point) >; setFreeDragPosition(value: [Point](https://angular.dev/api/cdk/drag-drop/Point) ): void;}` Arbitrary data to attach to this drag instance. Locks the position of the dragged element along the specified axis. Selector that will be used to determine the root draggable element, starting from the `cdkDrag` element and going up the DOM. Passing an alternate root element is useful when trying to enable dragging on an element that you might not have access to. Node or selector that will be used to determine the element to which the draggable's position will be constrained. If a string is passed in, it'll be used as a selector that will be matched starting from the element's parent and going up the DOM until a match has been found. Amount of milliseconds to wait after the user has put their pointer down before starting to drag the element. Sets the position of a [`CdkDrag`](https://angular.dev/api/cdk/drag-drop/CdkDrag) that is outside of a drop container. Can be used to restore the element's position for a returning user. Whether starting to drag this element is disabled. Function that can be used to customize the logic of how the position of the drag item is limited while it's being dragged. Gets called with a point containing the current position of the user's pointer on the page, a reference to the item being dragged and its dimensions. Should return a point describing where the item should be rendered. Class to be added to the preview element. Configures the place into which the preview of the item will be inserted. Can be configured globally through [`CDK_DROP_LIST`](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) . Possible values: * `global` - Preview will be inserted at the bottom of the ``. The advantage is that you don't have to worry about `overflow: hidden` or `z-index`, but the item won't retain its inherited styles. * `parent` - Preview will be inserted into the parent of the drag item. The advantage is that inherited styles will be preserved, but it may be clipped by `overflow: hidden` or not be visible due to `z-index`. Furthermore, the preview is going to have an effect over selectors like `:nth-child` and some flexbox configurations. * `ElementRef | HTMLElement` - Preview will be inserted into a specific element. Same advantages and disadvantages as `parent`. If the parent of the dragged element has a `scale` transform, it can throw off the positioning when the user starts dragging. Use this input to notify the CDK of the scale. Emits when the user starts dragging the item. Emits when the user has released a drag item, before any animations have started. Emits when the user stops dragging an item in the container. Emits when the user has moved the item into a new container. Emits when the user removes the item its container by dragging it into another container. Emits when the user drops the item inside a container. Emits as the user is dragging the item. Use with caution, because this event will fire for every pixel that the user has dragged. Returns the element that is being used as a placeholder while the current element is being dragged. @returns`HTMLElement` Returns the root draggable element. @returns`HTMLElement` Resets a standalone drag item to its initial position. @returns`void` Resets drag item to end of boundary element. @returns`void` Gets the pixel coordinates of the draggable outside of a drop container. @returns`Readonly<[Point](https://angular.dev/api/cdk/drag-drop/Point) >` Sets the current position in pixels the draggable outside of a drop container. @paramvalue`[Point](https://angular.dev/api/cdk/drag-drop/Point) ` New position to be set. @returns`void` @returns`void` @paramchanges`[SimpleChanges](https://angular.dev/api/core/SimpleChanges) ` @returns`void` @returns`void` Jump to details --- # DropListRef • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/DropListRef#api) ------------------------------------------------------------- `class [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) { constructor(element: any, _dragDropRegistry: [DragDropRegistry](https://angular.dev/api/cdk/drag-drop/DragDropRegistry) , _document: any, _ngZone: [NgZone](https://angular.dev/api/core/NgZone) , _viewportRuler: ViewportRuler): [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) ; element: any; disabled: boolean; sortingDisabled: boolean; lockAxis: "x" | "y" | null; autoScrollDisabled: boolean; autoScrollStep: number; hasAnchor: boolean; enterPredicate: (drag: [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) , drop: [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) ) => boolean; sortPredicate: (index: number, drag: [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) , drop: [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) ) => boolean; readonly beforeStarted: any; readonly entered: any; readonly exited: any; readonly dropped: any; readonly sorted: any; readonly receivingStarted: any; readonly receivingStopped: any; data: T; dispose(): void; isDragging(): boolean; start(): void; enter(item: [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) , pointerX: number, pointerY: number, index?: number | undefined): void; exit(item: [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) ): void; drop(item: [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) , currentIndex: number, previousIndex: number, previousContainer: [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) , isPointerOverContainer: boolean, distance: [Point](https://angular.dev/api/cdk/drag-drop/Point) , dropPoint: [Point](https://angular.dev/api/cdk/drag-drop/Point) , event?: MouseEvent | TouchEvent): void; withItems(items: [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) []): this; withDirection(direction: Direction): this; connectedTo(connectedTo: [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) []): this; withOrientation(orientation: [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) ): this; withScrollableParents(elements: HTMLElement[]): this; withElementContainer(container: HTMLElement): this; getScrollableParents(): readonly HTMLElement[]; getItemIndex(item: [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) ): number; getItemAtIndex(index: number): [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) | null; isReceiving(): boolean;}` @paramelement`any` @param\_dragDropRegistry`[DragDropRegistry](https://angular.dev/api/cdk/drag-drop/DragDropRegistry) ` @param\_document`any` @param\_ngZone`[NgZone](https://angular.dev/api/core/NgZone) ` @param\_viewportRuler`ViewportRuler` @returns`[DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) ` Element that the drop list is attached to. Whether starting a dragging sequence from this container is disabled. Whether sorting items within the list is disabled. Locks the position of the draggable elements inside the container along the specified axis. Whether auto-scrolling the view when the user moves their pointer close to the edges is disabled. Number of pixels to scroll for each frame when auto-scrolling an element. Whether the items in the list should leave an anchor node when leaving the initial container. Function that is used to determine whether an item is allowed to be moved into a drop container. Function that is used to determine whether an item can be sorted into a particular index. Emits right before dragging has started. Emits when the user has moved a new drag item into this container. Emits when the user removes an item from the container by dragging it into another container. Emits when the user drops an item inside the container. Emits as the user is swapping items while actively dragging. Emits when a dragging sequence is started in a list connected to the current one. Emits when a dragging sequence is stopped from a list connected to the current one. Arbitrary data that can be attached to the drop list. Removes the drop list functionality from the DOM element. @returns`void` Whether an item from this list is currently being dragged. @returns`boolean` Starts dragging an item. @returns`void` Attempts to move an item into the container. @paramitem`[DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) ` Item that was moved into the container. @parampointerX`number` Position of the item along the X axis. @parampointerY`number` Position of the item along the Y axis. @paramindex`number | undefined` Index at which the item entered. If omitted, the container will try to figure it out automatically. @returns`void` Removes an item from the container after it was dragged into another container by the user. @paramitem`[DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) ` Item that was dragged out. @returns`void` Drops an item into this container. @paramitem`[DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) ` Item being dropped into the container. @paramcurrentIndex`number` Index at which the item should be inserted. @parampreviousIndex`number` Index of the item when dragging started. @parampreviousContainer`[DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) ` Container from which the item got dragged in. @paramisPointerOverContainer`boolean` Whether the user's pointer was over the container when the item was dropped. @paramdistance`[Point](https://angular.dev/api/cdk/drag-drop/Point) ` Distance the user has dragged since the start of the dragging sequence. @paramdropPoint`[Point](https://angular.dev/api/cdk/drag-drop/Point) ` @paramevent`MouseEvent | TouchEvent` Event that triggered the dropping sequence. @returns`void` Sets the draggable items that are a part of this list. @paramitems`[DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) []` Items that are a part of this list. @returns`this` Sets the layout direction of the drop list. @paramdirection`Direction` @returns`this` Sets the containers that are connected to this one. When two or more containers are connected, the user will be allowed to transfer items between them. @paramconnectedTo`[DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) []` Other containers that the current containers should be connected to. @returns`this` Sets the orientation of the container. @paramorientation`[DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) ` New orientation for the container. @returns`this` Sets which parent elements are can be scrolled while the user is dragging. @paramelements`HTMLElement[]` Elements that can be scrolled. @returns`this` Configures the drop list so that a different element is used as the container for the dragged items. This is useful for the cases when one might not have control over the full DOM that sets up the dragging. Note that the alternate container needs to be a descendant of the drop list. @paramcontainer`HTMLElement` New element container to be assigned. @returns`this` Gets the scrollable parents that are registered with this drop container. @returns`readonly HTMLElement[]` Figures out the index of an item in the container. @paramitem`[DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) ` Item whose index should be determined. @returns`number` Gets the item at a specific index. @paramindex`number` Index at which to retrieve the item. @returns`[DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) | null` Whether the list is able to receive the item that is currently being dragged inside a connected drop list. @returns`boolean` Jump to details --- # DragRef • Angular Skip to main content menu menuAPI * [Roadmap](https://angular.dev/roadmap) * [Get involved](https://github.com/angular/angular/blob/main/CONTRIBUTING.md) * API Reference * CLI Reference * Error Encyclopedia * Extended Diagnostics * [Versioning and releases](https://angular.dev/reference/releases) * [Version compatibility](https://angular.dev/reference/versions) * [Update guide](https://angular.dev/update-guide) * Configurations * Migrations * arrow\_back API Reference * [Overview](https://angular.dev/api) * @angular/animations * @angular/animations/browser * @angular/animations/browser/testing * @angular/aria/accordion * @angular/aria/combobox * @angular/aria/grid * @angular/aria/listbox * @angular/aria/menu * @angular/aria/tabs * @angular/aria/toolbar * @angular/aria/tree * @angular/cdk/drag-drop * @angular/cdk/testing * @angular/cdk/testing/protractor * @angular/cdk/testing/selenium-webdriver * @angular/cdk/testing/testbed * @angular/common * @angular/common/http * @angular/common/http/testing * @angular/common/testing * @angular/common/upgrade * @angular/core * @angular/core/rxjs-interop * @angular/core/testing * @angular/elements * @angular/forms * @angular/forms/signals * @angular/forms/signals/compat * @angular/localize * @angular/localize/init * @angular/platform-browser * @angular/platform-browser-dynamic * @angular/platform-browser-dynamic/testing * @angular/platform-browser/animations * @angular/platform-browser/animations/async * @angular/platform-browser/testing * @angular/platform-server * @angular/platform-server/testing * @angular/router * @angular/router/testing * @angular/router/upgrade * @angular/service-worker * @angular/ssr * @angular/ssr/node * @angular/upgrade * @angular/upgrade/static * @angular/upgrade/static/testing * window.ng globals * arrow\_back @angular/cdk/drag-drop * [CDK\_DRAG\_CONFIG](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_CONFIG) * [CDK\_DRAG\_HANDLE](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_HANDLE) * [CDK\_DRAG\_PLACEHOLDER](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER) * [CDK\_DRAG\_PREVIEW](https://angular.dev/api/cdk/drag-drop/CDK_DRAG_PREVIEW) * [CDK\_DROP\_LIST](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST) * [CDK\_DROP\_LIST\_GROUP](https://angular.dev/api/cdk/drag-drop/CDK_DROP_LIST_GROUP) * [CdkDrag](https://angular.dev/api/cdk/drag-drop/CdkDrag) * [CdkDragDrop](https://angular.dev/api/cdk/drag-drop/CdkDragDrop) * [CdkDragEnd](https://angular.dev/api/cdk/drag-drop/CdkDragEnd) * [CdkDragEnter](https://angular.dev/api/cdk/drag-drop/CdkDragEnter) * [CdkDragExit](https://angular.dev/api/cdk/drag-drop/CdkDragExit) * [CdkDragHandle](https://angular.dev/api/cdk/drag-drop/CdkDragHandle) * [CdkDragMove](https://angular.dev/api/cdk/drag-drop/CdkDragMove) * [CdkDragPlaceholder](https://angular.dev/api/cdk/drag-drop/CdkDragPlaceholder) * [CdkDragPreview](https://angular.dev/api/cdk/drag-drop/CdkDragPreview) * [CdkDragRelease](https://angular.dev/api/cdk/drag-drop/CdkDragRelease) * [CdkDragSortEvent](https://angular.dev/api/cdk/drag-drop/CdkDragSortEvent) * [CdkDragStart](https://angular.dev/api/cdk/drag-drop/CdkDragStart) * [CdkDropList](https://angular.dev/api/cdk/drag-drop/CdkDropList) * [CdkDropListGroup](https://angular.dev/api/cdk/drag-drop/CdkDropListGroup) * [copyArrayItem](https://angular.dev/api/cdk/drag-drop/copyArrayItem) * [createDragRef](https://angular.dev/api/cdk/drag-drop/createDragRef) * [createDropListRef](https://angular.dev/api/cdk/drag-drop/createDropListRef) * [DragAxis](https://angular.dev/api/cdk/drag-drop/DragAxis) * [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) * [DragDrop](https://angular.dev/api/cdk/drag-drop/DragDrop) * [DragDropConfig](https://angular.dev/api/cdk/drag-drop/DragDropConfig) * [DragDropModule](https://angular.dev/api/cdk/drag-drop/DragDropModule) * [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) * [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) * [DragStartDelay](https://angular.dev/api/cdk/drag-drop/DragStartDelay) * [DropListOrientation](https://angular.dev/api/cdk/drag-drop/DropListOrientation) * [DropListRef](https://angular.dev/api/cdk/drag-drop/DropListRef) * [moveItemInArray](https://angular.dev/api/cdk/drag-drop/moveItemInArray) * [Point](https://angular.dev/api/cdk/drag-drop/Point) * [PreviewContainer](https://angular.dev/api/cdk/drag-drop/PreviewContainer) * [transferArrayItem](https://angular.dev/api/cdk/drag-drop/transferArrayItem) [API](https://angular.dev/api/cdk/drag-drop/DragRef#api) --------------------------------------------------------- `class [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) { constructor(element: any, _config: [DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) , _document: Document, _ngZone: [NgZone](https://angular.dev/api/core/NgZone) , _viewportRuler: ViewportRuler, _dragDropRegistry: [DragDropRegistry](https://angular.dev/api/cdk/drag-drop/DragDropRegistry) , _renderer: [Renderer2](https://angular.dev/api/core/Renderer2) ): [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) ; lockAxis: "x" | "y" | null; dragStartDelay: number | { touch: number; mouse: number; }; previewClass: string | string[] | undefined; scale: number; get disabled(): boolean; readonly beforeStarted: any; readonly started: any; readonly released: any; readonly ended: any; readonly entered: any; readonly exited: any; readonly dropped: any; readonly moved: Observable<{ source: [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) ; pointerPosition: { x: number; y: number; }; event: MouseEvent | TouchEvent; distance: [Point](https://angular.dev/api/cdk/drag-drop/Point) ; delta: { x: 0 | 1 | -1; y: 0 | 1 | -1; }; }>; data: T; constrainPosition?: [DragConstrainPosition](https://angular.dev/api/cdk/drag-drop/DragConstrainPosition) | undefined; getPlaceholderElement(): HTMLElement; getRootElement(): HTMLElement; getVisibleElement(): HTMLElement; withHandles(handles: any[]): this; withPreviewTemplate(template: DragPreviewTemplate | null): this; withPlaceholderTemplate(template: DragHelperTemplate | null): this; withRootElement(rootElement: any): this; withBoundaryElement(boundaryElement: any): this; withParent(parent: [DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) | null): this; dispose(): void; isDragging(): boolean; reset(): void; resetToBoundary(): void; disableHandle(handle: HTMLElement): void; enableHandle(handle: HTMLElement): void; withDirection(direction: Direction): this; getFreeDragPosition(): Readonly<[Point](https://angular.dev/api/cdk/drag-drop/Point) >; setFreeDragPosition(value: [Point](https://angular.dev/api/cdk/drag-drop/Point) ): this; withPreviewContainer(value: any): this;}` @paramelement`any` @param\_config`[DragRefConfig](https://angular.dev/api/cdk/drag-drop/DragRefConfig) ` @param\_document`Document` @param\_ngZone`[NgZone](https://angular.dev/api/core/NgZone) ` @param\_viewportRuler`ViewportRuler` @param\_dragDropRegistry`[DragDropRegistry](https://angular.dev/api/cdk/drag-drop/DragDropRegistry) ` @param\_renderer`[Renderer2](https://angular.dev/api/core/Renderer2) ` @returns`[DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) ` Axis along which dragging is locked. Amount of milliseconds to wait after the user has put their pointer down before starting to drag the element. Class to be added to the preview element. If the parent of the dragged element has a `scale` transform, it can throw off the positioning when the user starts dragging. Use this input to notify the CDK of the scale. Whether starting to drag this element is disabled. Emits as the drag sequence is being prepared. Emits when the user starts dragging the item. Emits when the user has released a drag item, before any animations have started. Emits when the user stops dragging an item in the container. Emits when the user has moved the item into a new container. Emits when the user removes the item its container by dragging it into another container. Emits when the user drops the item inside a container. Emits as the user is dragging the item. Use with caution, because this event will fire for every pixel that the user has dragged. Arbitrary data that can be attached to the drag item. Function that can be used to customize the logic of how the position of the drag item is limited while it's being dragged. Gets called with a point containing the current position of the user's pointer on the page, a reference to the item being dragged and its dimensions. Should return a point describing where the item should be rendered. Returns the element that is being used as a placeholder while the current element is being dragged. @returns`HTMLElement` Returns the root draggable element. @returns`HTMLElement` Gets the currently-visible element that represents the drag item. While dragging this is the placeholder, otherwise it's the root element. @returns`HTMLElement` Registers the handles that can be used to drag the element. @paramhandles`any[]` @returns`this` Registers the template that should be used for the drag preview. @paramtemplate`DragPreviewTemplate | null` Template that from which to stamp out the preview. @returns`this` Registers the template that should be used for the drag placeholder. @paramtemplate`DragHelperTemplate | null` Template that from which to stamp out the placeholder. @returns`this` Sets an alternate drag root element. The root element is the element that will be moved as the user is dragging. Passing an alternate root element is useful when trying to enable dragging on an element that you might not have access to. @paramrootElement`any` @returns`this` Element to which the draggable's position will be constrained. @paramboundaryElement`any` @returns`this` Sets the parent ref that the ref is nested in. @paramparent`[DragRef](https://angular.dev/api/cdk/drag-drop/DragRef) | null` @returns`this` Removes the dragging functionality from the DOM element. @returns`void` Checks whether the element is currently being dragged. @returns`boolean` Resets a standalone drag item to its initial position. @returns`void` Resets drag item to end of boundary element. @returns`void` Sets a handle as disabled. While a handle is disabled, it'll capture and interrupt dragging. @paramhandle`HTMLElement` Handle element that should be disabled. @returns`void` Enables a handle, if it has been disabled. @paramhandle`HTMLElement` Handle element to be enabled. @returns`void` Sets the layout direction of the draggable item. @paramdirection`Direction` @returns`this` Gets the current position in pixels the draggable outside of a drop container. @returns`Readonly<[Point](https://angular.dev/api/cdk/drag-drop/Point) >` Sets the current position in pixels the draggable outside of a drop container. @paramvalue`[Point](https://angular.dev/api/cdk/drag-drop/Point) ` New position to be set. @returns`this` Sets the container into which to insert the preview element. @paramvalue`any` Container into which to insert the preview. @returns`this` Jump to details ---