diff --git a/README.md b/README.md index 24ef3fefd38..f1b6282bd1f 100644 --- a/README.md +++ b/README.md @@ -137,7 +137,7 @@ Join the conversation and help the community. [changelog]: CHANGELOG.md [ng]: https://angular.dev [documentation]: https://angular.dev/overview -[angularmaterial]: https://material.angular.io/ +[angularmaterial]: https://material.angular.dev/ [cli]: https://angular.dev/tools/cli [architecture]: https://angular.dev/essentials [componentstemplates]: https://angular.dev/tutorials/learn-angular/1-components-in-angular diff --git a/adev/src/app/features/update/recommendations.ts b/adev/src/app/features/update/recommendations.ts index 413cd1c4198..c4038024c66 100644 --- a/adev/src/app/features/update/recommendations.ts +++ b/adev/src/app/features/update/recommendations.ts @@ -1822,7 +1822,7 @@ export const RECOMMENDATIONS: Step[] = [ material: true, step: 'v15 mat refactor', action: - 'In Angular Material v15, many of the components have been refactored to be based on the official Material Design Components for Web (MDC). This change affected the DOM and CSS classes of many components. Read further', + 'In Angular Material v15, many of the components have been refactored to be based on the official Material Design Components for Web (MDC). This change affected the DOM and CSS classes of many components. Read further', }, { possibleIn: 1500, diff --git a/adev/src/app/sub-navigation-data.ts b/adev/src/app/sub-navigation-data.ts index edcdd20f974..5ee49c2613d 100644 --- a/adev/src/app/sub-navigation-data.ts +++ b/adev/src/app/sub-navigation-data.ts @@ -897,11 +897,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [ }, { label: 'Angular CDK', - path: 'https://material.angular.io/cdk/categories', + path: 'https://material.angular.dev/cdk/categories', }, { label: 'Angular Material', - path: 'https://material.angular.io/', + path: 'https://material.angular.dev/', }, ], }, diff --git a/adev/src/content/best-practices/a11y.md b/adev/src/content/best-practices/a11y.md index f66f7bde5db..7df1b3b399a 100644 --- a/adev/src/content/best-practices/a11y.md +++ b/adev/src/content/best-practices/a11y.md @@ -36,8 +36,8 @@ See the [Binding syntax guide](guide/templates) for more background on the diffe ## Angular UI components -The [Angular Material](https://material.angular.io) library, which is maintained by the Angular team, is a suite of reusable UI components that aims to be fully accessible. -The [Component Development Kit (CDK)](https://material.angular.io/cdk/categories) includes the `a11y` package that provides tools to support various areas of accessibility. +The [Angular Material](https://material.angular.dev) library, which is maintained by the Angular team, is a suite of reusable UI components that aims to be fully accessible. +The [Component Development Kit (CDK)](https://material.angular.dev/cdk/categories) includes the `a11y` package that provides tools to support various areas of accessibility. For example: * `LiveAnnouncer` is used to announce messages for screen-reader users using an `aria-live` region. @@ -46,7 +46,7 @@ For example: * The `cdkTrapFocus` directive traps Tab-key focus within an element. Use it to create accessible experience for components such as modal dialogs, where focus must be constrained. -For full details of these and other tools, see the [Angular CDK accessibility overview](https://material.angular.io/cdk/a11y/overview). +For full details of these and other tools, see the [Angular CDK accessibility overview](https://material.angular.dev/cdk/a11y/overview). ### Augmenting native elements @@ -66,7 +66,7 @@ For example, the native `` element cannot have children, so any custom te By just including `` in your custom component's template, it's impossible for your component's users to set arbitrary properties and attributes to the `` element. Instead, create a container component that uses content projection to include the native control in the component's API. -You can see [`MatFormField`](https://material.angular.io/components/form-field/overview) as an example of this pattern. +You can see [`MatFormField`](https://material.angular.dev/components/form-field/overview) as an example of this pattern. ## Case study: Building a custom progress bar diff --git a/adev/src/content/guide/drag-drop.md b/adev/src/content/guide/drag-drop.md index 0ca43dbb558..87a17e2c95b 100644 --- a/adev/src/content/guide/drag-drop.md +++ b/adev/src/content/guide/drag-drop.md @@ -17,7 +17,7 @@ For the full API reference, please see the [Angular CDK's drag and drop API refe ### CDK Installation -The [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories) is a set of behavior primitives for building components. To use the drag and drop directives, first install `@angular/cdk` from npm. You can do this from your terminal using Angular CLI: +The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the drag and drop directives, first install `@angular/cdk` from npm. You can do this from your terminal using Angular CLI: ng add @angular/cdk diff --git a/adev/src/content/guide/templates/ng-template.md b/adev/src/content/guide/templates/ng-template.md index 7ffb76cd764..7aa1ce18d06 100644 --- a/adev/src/content/guide/templates/ng-template.md +++ b/adev/src/content/guide/templates/ng-template.md @@ -279,5 +279,5 @@ For more details, see [Structural Directives](/guide/directives/structural-direc For examples of how `ng-template` is used in other libraries, check out: -- [Tabs from Angular Material](https://material.angular.io/components/tabs/overview) - nothing gets rendered into the DOM until the tab is activated -- [Table from Angular Material](https://material.angular.io/components/table/overview) - allows developers to define different ways to render data +- [Tabs from Angular Material](https://material.angular.dev/components/tabs/overview) - nothing gets rendered into the DOM until the tab is activated +- [Table from Angular Material](https://material.angular.dev/components/table/overview) - allows developers to define different ways to render data diff --git a/adev/src/content/guide/testing/component-harnesses-overview.md b/adev/src/content/guide/testing/component-harnesses-overview.md index 451b2da461d..a1cc469c9d3 100644 --- a/adev/src/content/guide/testing/component-harnesses-overview.md +++ b/adev/src/content/guide/testing/component-harnesses-overview.md @@ -16,7 +16,7 @@ it('should load button with exact text', async () => { }); -Component harnesses are especially useful for shared UI widgets. Developers often write tests that depend on private implementation details of widgets, such as DOM structure and CSS classes. Those dependencies make tests brittle and hard to maintain. Harnesses offer an alternative— a supported API that interacts with the widget the same way an end-user does. Widget implementation changes now become less likely to break user tests. For example, [Angular Material](https://material.angular.io/components/categories) provides a test harness for each component in the library. +Component harnesses are especially useful for shared UI widgets. Developers often write tests that depend on private implementation details of widgets, such as DOM structure and CSS classes. Those dependencies make tests brittle and hard to maintain. Harnesses offer an alternative— a supported API that interacts with the widget the same way an end-user does. Widget implementation changes now become less likely to break user tests. For example, [Angular Material](https://material.angular.dev/components/categories) provides a test harness for each component in the library. Component harnesses support multiple testing environments. You can use the same harness implementation in both unit and end-to-end tests. Test authors only need to learn one API and component authors don't have to maintain separate unit and end-to-end test implementations. diff --git a/adev/src/content/guide/testing/component-harnesses-testing-environments.md b/adev/src/content/guide/testing/component-harnesses-testing-environments.md index 5c0160289d0..75fa6de3b05 100644 --- a/adev/src/content/guide/testing/component-harnesses-testing-environments.md +++ b/adev/src/content/guide/testing/component-harnesses-testing-environments.md @@ -17,7 +17,7 @@ Otherwise, to add support for other environments, you need to define how to inte ### CDK Installation -The [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI: +The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI: ng add @angular/cdk diff --git a/adev/src/content/guide/testing/creating-component-harnesses.md b/adev/src/content/guide/testing/creating-component-harnesses.md index 458171aef3a..a3b5ffcbbeb 100644 --- a/adev/src/content/guide/testing/creating-component-harnesses.md +++ b/adev/src/content/guide/testing/creating-component-harnesses.md @@ -12,7 +12,7 @@ For components that appear in only one place, such as a page in an application, ### CDK Installation -The [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI: +The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI: ng add @angular/cdk diff --git a/adev/src/content/guide/testing/using-component-harnesses.md b/adev/src/content/guide/testing/using-component-harnesses.md index f43623bd067..043798bb533 100644 --- a/adev/src/content/guide/testing/using-component-harnesses.md +++ b/adev/src/content/guide/testing/using-component-harnesses.md @@ -6,7 +6,7 @@ TIP: This guide assumes you've already read the [component harnesses overview gu ### CDK Installation -The [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI: +The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI: ng add @angular/cdk @@ -155,7 +155,7 @@ While every harness defines an API specific to its corresponding component, they Beyond that, the API of any given harness is specific to its corresponding component; refer to the component's documentation to learn how to use a specific harness. -As an example, the following is a test for a component that uses the [Angular Material slider component harness](https://material.angular.io/components/slider/api#MatSliderHarness): +As an example, the following is a test for a component that uses the [Angular Material slider component harness](https://material.angular.dev/components/slider/api#MatSliderHarness): it('should get value of slider thumb', async () => { diff --git a/adev/src/content/reference/roadmap.md b/adev/src/content/reference/roadmap.md index bb60b28a46e..6488e334015 100644 --- a/adev/src/content/reference/roadmap.md +++ b/adev/src/content/reference/roadmap.md @@ -71,7 +71,7 @@ Start developing with the latest Angular features from our roadmap. This list re - We are working on new CDK primitives to facilitate creating custom components based on the WAI-ARIA design patterns for [Combobox](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox). Angular v14 introduced stable [menu and dialog primitives](https://material.angular.io/cdk/categories) as part of this project, and in v15 Listbox. + We are working on new CDK primitives to facilitate creating custom components based on the WAI-ARIA design patterns for [Combobox](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox). Angular v14 introduced stable [menu and dialog primitives](https://material.angular.dev/cdk/categories) as part of this project, and in v15 Listbox. We are evaluating components in Angular Material against accessibility standards such as WCAG and working to fix any issues that arise from this process. @@ -157,7 +157,7 @@ This section represents explorations and prototyping of potential future project We've released the support for local template variables in Angular, see [`@let` docs](https://angular.dev/api/core/@let) for additional information. - + To provide better customization of our Angular Material components and enable Material 3 capabilities, we'll be collaborating with Google's Material Design team on defining token-based theming APIs. In v17.2 we shared experimental support for Angular Material 3 and in v18 we graduated it to stable. @@ -215,7 +215,7 @@ This section represents explorations and prototyping of potential future project The Angular and the Chrome DevTools are working together to enable more readable stack traces for error messages. In v15 we released improved relevant and linked stack traces. As a lower priority initiative, we'll be exploring how to make the stack traces friendlier by providing more accurate call frame names for templates. - + MDC Web is a library created by the Google Material Design team that provides reusable primitives for building Material Design components. The Angular team is incorporating these primitives into Angular Material. Using MDC Web aligns Angular Material more closely with the Material Design specification, expands accessibility, improves component quality, and improves the velocity of our team. @@ -287,7 +287,7 @@ This section represents explorations and prototyping of potential future project We will redefine the user learning journeys and refresh the introductory documentation. We will clearly state the benefits of Angular, how to explore its capabilities and provide guidance so developers can become proficient with the framework in as little time as possible. - + Angular CDK introduced the concept of component test harnesses to Angular in version 9. Test harnesses let component authors create supported APIs for testing component interactions. We are continuing to improve this harness infrastructure and clarifying the best practices around using harnesses. We are also working to drive more harness adoption inside of Google. diff --git a/adev/src/content/tools/cli/schematics.md b/adev/src/content/tools/cli/schematics.md index a4242f6a59f..7b0800d0917 100644 --- a/adev/src/content/tools/cli/schematics.md +++ b/adev/src/content/tools/cli/schematics.md @@ -62,7 +62,7 @@ For more details of what these look like and how to create them, see: An *add schematic* is typically supplied with a library, so that the library can be added to an existing project with `ng add`. The `add` command uses your package manager to download new dependencies, and invokes an installation script that is implemented as a schematic. -For example, the [`@angular/material`](https://material.angular.io/guide/schematics) schematic tells the `add` command to install and set up Angular Material and theming, and register new starter components that can be created with `ng generate`. +For example, the [`@angular/material`](https://material.angular.dev/guide/schematics) schematic tells the `add` command to install and set up Angular Material and theming, and register new starter components that can be created with `ng generate`. Look at this one as an example and model for your own add schematic. Partner and third party libraries also support the Angular CLI with add schematics. diff --git a/adev/src/content/tools/libraries/creating-libraries.md b/adev/src/content/tools/libraries/creating-libraries.md index ca63c2c3868..0998768d386 100644 --- a/adev/src/content/tools/libraries/creating-libraries.md +++ b/adev/src/content/tools/libraries/creating-libraries.md @@ -108,7 +108,7 @@ A library typically includes *reusable code* that defines components, services, A library is packaged into an npm package for publishing and sharing. This package can also include schematics that provide instructions for generating or transforming code directly in your project, in the same way that the CLI creates a generic new component with `ng generate component`. A schematic that is packaged with a library can, for example, provide the Angular CLI with the information it needs to generate a component that configures and uses a particular feature, or set of features, defined in that library. -One example of this is [Angular Material's navigation schematic](https://material.angular.io/guide/schematics#navigation-schematic) which configures the CDK's [BreakpointObserver](https://material.angular.io/cdk/layout/overview#breakpointobserver) and uses it with Material's [MatSideNav](https://material.angular.io/components/sidenav/overview) and [MatToolbar](https://material.angular.io/components/toolbar/overview) components. +One example of this is [Angular Material's navigation schematic](https://material.angular.dev/guide/schematics#navigation-schematic) which configures the CDK's [BreakpointObserver](https://material.angular.dev/cdk/layout/overview#breakpointobserver) and uses it with Material's [MatSideNav](https://material.angular.dev/components/sidenav/overview) and [MatToolbar](https://material.angular.dev/components/toolbar/overview) components. Create and include the following kinds of schematics: diff --git a/adev/src/content/tools/libraries/overview.md b/adev/src/content/tools/libraries/overview.md index 68a9016f193..99be388085c 100644 --- a/adev/src/content/tools/libraries/overview.md +++ b/adev/src/content/tools/libraries/overview.md @@ -10,7 +10,7 @@ A library must be imported and used in an application. Libraries extend Angular's base features. For example, to add [reactive forms](guide/forms/reactive-forms) to an application, add the library package using `ng add @angular/forms`, then import the `ReactiveFormsModule` from the `@angular/forms` library in your application code. Similarly, adding the [service worker](ecosystem/service-workers) library to an Angular application is one of the steps for turning an application into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps) \(PWA\). -[Angular Material](https://material.angular.io) is an example of a large, general-purpose library that provides sophisticated, reusable, and adaptable UI components. +[Angular Material](https://material.angular.dev) is an example of a large, general-purpose library that provides sophisticated, reusable, and adaptable UI components. Any application developer can use these and other libraries that have been published as npm packages by the Angular team or by third parties. See [Using Published Libraries](tools/libraries/using-libraries). diff --git a/adev/src/content/tools/libraries/using-libraries.md b/adev/src/content/tools/libraries/using-libraries.md index b82fdad56cd..777add5a766 100644 --- a/adev/src/content/tools/libraries/using-libraries.md +++ b/adev/src/content/tools/libraries/using-libraries.md @@ -59,7 +59,7 @@ To do this: import * as host from 'host'; - const parsedUrl = host.parse('https://angular.io'); + const parsedUrl = host.parse('https://angular.dev'); console.log(parsedUrl.hostname); @@ -184,7 +184,7 @@ If you do not add the interface for the script-defined extension, your IDE shows [Resources]: resources "Explore Angular Resources | Angular" -[AngularMaterialMain]: https://material.angular.io "Angular Material | Angular" +[AngularMaterialMain]: https://material.angular.dev "Angular Material | Angular" [AngularUpdateMain]: https://angular.dev/update-guide "Angular Update Guide | Angular" diff --git a/adev/src/llms-full.txt b/adev/src/llms-full.txt index 96db9c13c0d..e23fd4ef3ee 100644 --- a/adev/src/llms-full.txt +++ b/adev/src/llms-full.txt @@ -11589,7 +11589,7 @@ it('should load button with exact text', async () => { expect(await button.getText()).toBe('Confirm'); }); ``` -Component harnesses are especially useful for shared UI widgets. Developers often write tests that depend on private implementation details of widgets, such as DOM structure and CSS classes. Those dependencies make tests brittle and hard to maintain. Harnesses offer an alternative— a supported API that interacts with the widget the same way an end-user does. Widget implementation changes now become less likely to break user tests. For example, [Angular Material](https://material.angular.io/components/categories) provides a test harness for each component in the library. +Component harnesses are especially useful for shared UI widgets. Developers often write tests that depend on private implementation details of widgets, such as DOM structure and CSS classes. Those dependencies make tests brittle and hard to maintain. Harnesses offer an alternative— a supported API that interacts with the widget the same way an end-user does. Widget implementation changes now become less likely to break user tests. For example, [Angular Material](https://material.angular.dev/components/categories) provides a test harness for each component in the library. Component harnesses support multiple testing environments. You can use the same harness implementation in both unit and end-to-end tests. Test authors only need to learn one API and component authors don't have to maintain separate unit and end-to-end test implementations. @@ -11610,7 +11610,7 @@ TIP: This guide assumes you've already read the [component harnesses overview gu ### CDK Installation -The [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI: +The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI: ```shell ng add @angular/cdk @@ -11751,7 +11751,7 @@ While every harness defines an API specific to its corresponding component, they Beyond that, the API of any given harness is specific to its corresponding component; refer to the component's documentation to learn how to use a specific harness. -As an example, the following is a test for a component that uses the [Angular Material slider component harness](https://material.angular.io/components/slider/api#MatSliderHarness): +As an example, the following is a test for a component that uses the [Angular Material slider component harness](https://material.angular.dev/components/slider/api#MatSliderHarness): ```typescript it('should get value of slider thumb', async () => { @@ -11817,7 +11817,7 @@ For components that appear in only one place, such as a page in an application, ### CDK Installation -The [Component Dev Kit (CDK)](https://material.angular.io/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI: +The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI: ```shell ng add @angular/cdk