diff --git a/api-reference/10 UI Components/DOMComponent/3 Methods/dispose().md b/api-reference/10 UI Components/DOMComponent/3 Methods/dispose().md index 1b6ed03850..9c1049d2c2 100644 --- a/api-reference/10 UI Components/DOMComponent/3 Methods/dispose().md +++ b/api-reference/10 UI Components/DOMComponent/3 Methods/dispose().md @@ -18,7 +18,7 @@ After calling this method, remove the DOM element associated with the UI compone ##### Angular -Use conditional rendering instead of this method: +Use conditional rendering instead of this method: -If you use routing for your project, specify `` links inside items. Alternatively, you can implement the [onItemClick](/api-reference/10%20UI%20Components/dxMenu/1%20Configuration/onItemClick.md '/Documentation/ApiReference/UI_Components/dxMenu/Configuration/#onItemClick') event handler to process clicks on links. +If you use routing for your project, specify `` links inside items. Alternatively, you can implement the [onItemClick](/api-reference/10%20UI%20Components/dxMenu/1%20Configuration/onItemClick.md '/Documentation/ApiReference/UI_Components/dxMenu/Configuration/#onItemClick') event handler to process clicks on links. diff --git a/concepts/05 UI Components/Diagram/05 Add the Diagram Component to an Angular CLI Application.md b/concepts/05 UI Components/Diagram/05 Add the Diagram Component to an Angular CLI Application.md index b05d8cb9aa..4314ce7d07 100644 --- a/concepts/05 UI Components/Diagram/05 Add the Diagram Component to an Angular CLI Application.md +++ b/concepts/05 UI Components/Diagram/05 Add the Diagram Component to an Angular CLI Application.md @@ -1,4 +1,4 @@ -This tutorial adds the Diagram component to an Angular CLI Application. Refer to the Angular CLI documentation for information on how to create such an application. +This tutorial adds the Diagram component to an Angular CLI Application. Refer to the Angular CLI documentation for information on how to create such an application. Install the `devextreme` and `devextreme-angular` npm packages: diff --git a/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/15 Implement Navigation.md b/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/15 Implement Navigation.md index 7779ff8bdb..2d3dc5a91e 100644 --- a/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/15 Implement Navigation.md +++ b/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/15 Implement Navigation.md @@ -74,7 +74,7 @@ Each list item should navigate to a different view. To implement this, follow th 1. **Define an [itemTemplate](/api-reference/10%20UI%20Components/dxList/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/#itemTemplate')** - Specify the elements that the template should render and wrap them in an element with the RouterLink directive. In the code below, the *"links"* **itemTemplate** renders an icon and text. + Specify the elements that the template should render and wrap them in an element with the RouterLink directive. In the code below, the *"links"* **itemTemplate** renders an icon and text. 1. **Enable item selection** diff --git a/concepts/40 Angular Components/00 DevExtreme Angular Components.md b/concepts/40 Angular Components/00 DevExtreme Angular Components.md index 1afce523c2..50fe8105f7 100644 --- a/concepts/40 Angular Components/00 DevExtreme Angular Components.md +++ b/concepts/40 Angular Components/00 DevExtreme Angular Components.md @@ -1,6 +1,6 @@ #include common-troubleunderstanding-note with { technology: "Angular", - docsLink: "https://angular.io/docs" + docsLink: "https://angular.dev/overview" } The DevExtreme Angular UI Component Suite is a feature-complete set of [70+ responsive and touch-enabled UI components](https://js.devexpress.com/Overview/Widgets/) for Angular applications. The suite includes a data grid, interactive charts, data editors, navigation and multi-purpose UI components. diff --git a/concepts/40 Angular Components/10 Getting Started/03 Add DevExtreme to an Angular CLI Application/Add DevExtreme to an Angular CLI Application.md b/concepts/40 Angular Components/10 Getting Started/03 Add DevExtreme to an Angular CLI Application/Add DevExtreme to an Angular CLI Application.md index 868027b338..0e3a0e6720 100644 --- a/concepts/40 Angular Components/10 Getting Started/03 Add DevExtreme to an Angular CLI Application/Add DevExtreme to an Angular CLI Application.md +++ b/concepts/40 Angular Components/10 Getting Started/03 Add DevExtreme to an Angular CLI Application/Add DevExtreme to an Angular CLI Application.md @@ -1,3 +1,3 @@ -To start this tutorial, you need an Angular application created using the Angular CLI. Refer to the Angular CLI documentation for information on how to create such an application. You can also [create an Angular application with DevExtreme](/concepts/40%20Angular%20Components/10%20Getting%20Started/02%20Create%20a%20DevExtreme%20Application.md '/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/') already added to it. +To start this tutorial, you need an Angular application created using the Angular CLI. Refer to the Angular CLI documentation for information on how to create such an application. You can also [create an Angular application with DevExtreme](/concepts/40%20Angular%20Components/10%20Getting%20Started/02%20Create%20a%20DevExtreme%20Application.md '/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/') already added to it. [tags] angular \ No newline at end of file diff --git a/concepts/40 Angular Components/20 Component Configuration Syntax/17 Collections.md b/concepts/40 Angular Components/20 Component Configuration Syntax/17 Collections.md index 4fb8ee07f8..b226ed0d52 100644 --- a/concepts/40 Angular Components/20 Component Configuration Syntax/17 Collections.md +++ b/concepts/40 Angular Components/20 Component Configuration Syntax/17 Collections.md @@ -16,7 +16,7 @@ For properties that accept either an object or a collection, use UI components p -A special `dxi-` element, `dxi-item`, is designed to declare items in collection UI components. It supports structural directives provided by Angular, for instance, `ngFor`. The following code shows how to use `dxi-item` to declare items in the [List](https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/ItemTemplate) UI component. +A special `dxi-` element, `dxi-item`, is designed to declare items in collection UI components. It supports structural directives provided by Angular, for instance, `ngFor`. The following code shows how to use `dxi-item` to declare items in the [List](https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/ItemTemplate) UI component. `dxi-item` also supports directives that control parts of item appearance, such as `badge` in the code below. They are described in the [items](/api-reference/10%20UI%20Components/dxList/1%20Configuration/items '/Documentation/ApiReference/UI_Components/dxList/Configuration/items/') section of each collection UI component. diff --git a/concepts/40 Angular Components/20 Component Configuration Syntax/37 Templates/External Templates.md b/concepts/40 Angular Components/20 Component Configuration Syntax/37 Templates/External Templates.md index bca8838f20..313327582b 100644 --- a/concepts/40 Angular Components/20 Component Configuration Syntax/37 Templates/External Templates.md +++ b/concepts/40 Angular Components/20 Component Configuration Syntax/37 Templates/External Templates.md @@ -1,6 +1,6 @@ -External templates are created using the `ng-template` element. The following code replicates the example above, but here the **itemTemplate** is the external template. The **groupTemplate** is omitted. +External templates are created using the `ng-template` element. The following code replicates the example above, but here the **itemTemplate** is the external template. The **groupTemplate** is omitted. -The `ngTemplateOutlet` directive uses a template reference variable to reference the external template. The `ngTemplateOutletContext` directive specifies variables that are accessible in the template. +The `ngTemplateOutlet` directive uses a template reference variable to reference the external template. The `ngTemplateOutletContext` directive specifies variables that are accessible in the template. @@ -16,7 +16,7 @@ The `ng {{index}} - {{data.itemProperty}} -In the previous code, the external template is used in the same component in which it is declared. The following code illustrates the case when the external template is declared in another component. The `ngTemplateOutlet` directive should be set to an input property in this case: +In the previous code, the external template is used in the same component in which it is declared. The following code illustrates the case when the external template is declared in another component. The `ngTemplateOutlet` directive should be set to an input property in this case: diff --git a/concepts/40 Angular Components/20 Component Configuration Syntax/42 Call Methods.md b/concepts/40 Angular Components/20 Component Configuration Syntax/42 Call Methods.md index 25bfcb789d..2811f8f08f 100644 --- a/concepts/40 Angular Components/20 Component Configuration Syntax/42 Call Methods.md +++ b/concepts/40 Angular Components/20 Component Configuration Syntax/42 Call Methods.md @@ -1,4 +1,4 @@ -To call UI component methods, you need its instance. To access it, use the `@ViewChild` or `@ViewChildren` decorator (depending on whether you are getting a single or multiple UI component instances) and the component's `instance` property. These decorators accept a component name or a template reference variable. The following code illustrates this approach by the example of the [DataGrid](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Overview): +To call UI component methods, you need its instance. To access it, use the `@ViewChild` or `@ViewChildren` decorator (depending on whether you are getting a single or multiple UI component instances) and the component's `instance` property. These decorators accept a component name or a template reference variable. The following code illustrates this approach by the example of the [DataGrid](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Overview): import { Component, ViewChild } from "@angular/core"; diff --git a/concepts/40 Angular Components/20 Component Configuration Syntax/44 Get a UI Component Instance.md b/concepts/40 Angular Components/20 Component Configuration Syntax/44 Get a UI Component Instance.md index 143451ba75..6169001c63 100644 --- a/concepts/40 Angular Components/20 Component Configuration Syntax/44 Get a UI Component Instance.md +++ b/concepts/40 Angular Components/20 Component Configuration Syntax/44 Get a UI Component Instance.md @@ -1,6 +1,6 @@ You can access a UI component instance in the component as described in [Call Methods](/concepts/40%20Angular%20Components/20%20Component%20Configuration%20Syntax/42%20Call%20Methods.md '/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Call_Methods'). -You can also use template reference variables to access a UI component instance in the markup: +You can also use template reference variables to access a UI component instance in the markup: diff --git a/concepts/40 Angular Components/20 Component Configuration Syntax/75 Angular Forms Support.md b/concepts/40 Angular Components/20 Component Configuration Syntax/75 Angular Forms Support.md index 9fd756b504..a9d91bcd91 100644 --- a/concepts/40 Angular Components/20 Component Configuration Syntax/75 Angular Forms Support.md +++ b/concepts/40 Angular Components/20 Component Configuration Syntax/75 Angular Forms Support.md @@ -1,4 +1,4 @@ -DevExtreme editors support the `formControlName` directive needed for features of reactive forms... +DevExtreme editors support the `formControlName` directive needed for features of reactive forms...
@@ -41,7 +41,7 @@ DevExtreme editors support the `formControlName` directive needed for features o }) export class AppModule { } -... and `ngModel` binding necessary to use the editors in template-driven forms: +... and `ngModel` binding necessary to use the editors in template-driven forms: diff --git a/concepts/40 Angular Components/20 Component Configuration Syntax/85 Angular Change Detection Specifics.md b/concepts/40 Angular Components/20 Component Configuration Syntax/85 Angular Change Detection Specifics.md index 89690b647b..b283e2d630 100644 --- a/concepts/40 Angular Components/20 Component Configuration Syntax/85 Angular Change Detection Specifics.md +++ b/concepts/40 Angular Components/20 Component Configuration Syntax/85 Angular Change Detection Specifics.md @@ -85,7 +85,7 @@ To work around this behavior, implement one of the following techniques: }; } -**Rewrite a component’s class method to a custom [Angular pipe](https://angular.io/guide/pipes-custom-data-trans).** +**Rewrite a component’s class method to a custom [Angular pipe](https://angular.dev/guide/templates/pipes).** import { diff --git a/concepts/40 Angular Components/40 Common Features/05 Server-Side Rendering/00 Server-Side Rendering.md b/concepts/40 Angular Components/40 Common Features/05 Server-Side Rendering/00 Server-Side Rendering.md index e72e73ba7d..5ee07ef673 100644 --- a/concepts/40 Angular Components/40 Common Features/05 Server-Side Rendering/00 Server-Side Rendering.md +++ b/concepts/40 Angular Components/40 Common Features/05 Server-Side Rendering/00 Server-Side Rendering.md @@ -1,21 +1,45 @@ Server-side rendering (SSR) generates static pages on the server to reduce the application's loading time. -Follow the [Angular guide on SSR](https://angular.io/guide/ssr) to create Angular project with SSR or add SSR to an existing project. +Follow the [Angular guide on SSR](https://angular.dev/guide/ssr) to create Angular project with SSR or add SSR to an existing project. Then, [add DevExtreme components](/concepts/40%20Angular%20Components/10%20Getting%20Started/03%20Add%20DevExtreme%20to%20an%20Angular%20CLI%20Application '/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application/') to your application. -To finish DevExtreme SSR configuration, import the `DxServerModule` in the `app.config.server.ts` file: +To finish DevExtreme SSR configuration, import `DxServerModule` in the `app.module.server.ts` file: - + + import { NgModule } from '@angular/core'; + import { ServerModule } from '@angular/platform-server'; + + import { AppModule } from './app.module'; + import { AppComponent } from './app.component'; import { DxServerModule } from 'devextreme-angular/server'; - // ... + @NgModule({ imports: [ - // ... + AppModule, + ServerModule, DxServerModule ], - // ... + bootstrap: [AppComponent], }) + export class AppServerModule {} + +If you use standalone components, import `DxServerModule` in the `app.config.server.ts` file: + + + import { mergeApplicationConfig, ApplicationConfig, importProvidersFrom } from '@angular/core'; + import { provideServerRendering } from '@angular/platform-server'; + import { DxServerModule } from 'devextreme-angular/server'; + + import { appConfig } from './app.config'; + + const serverConfig: ApplicationConfig = { + providers: [ + provideServerRendering(), importProvidersFrom(DxServerModule) + ] + }; + + export const config = mergeApplicationConfig(appConfig, serverConfig); [note] DevExtreme Angular components do not support [switching between themes at runtime](/concepts/60%20Themes%20and%20Styles/05%20Predefined%20Themes/60%20Switch%20Between%20Themes%20at%20Runtime '/Documentation/Guide/Themes_and_Styles/Predefined_Themes/#Switch_Between_Themes_at_Runtime') in the SSR mode. You can only [use a single theme](/concepts/40%20Angular%20Components/10%20Getting%20Started/03%20Add%20DevExtreme%20to%20an%20Angular%20CLI%20Application/03%20Configure%20Stylesheets.md '/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application/#Configure_Stylesheets'). diff --git a/concepts/40 Angular Components/40 Common Features/15 Intercept HTTP Requests.md b/concepts/40 Angular Components/40 Common Features/15 Intercept HTTP Requests.md index 0fc8d32a91..72676c0930 100644 --- a/concepts/40 Angular Components/40 Common Features/15 Intercept HTTP Requests.md +++ b/concepts/40 Angular Components/40 Common Features/15 Intercept HTTP Requests.md @@ -8,7 +8,7 @@ HTTP request interception in DevExtreme components might be useful for the follo - Track upload progress and display a progress bar. -In Angular apps, you can use [HttpInterceptor](https://angular.io/api/common/http/HttpInterceptor) to intercept Ajax requests in DevExtreme components such as [DataSource](/api-reference/30%20Data%20Layer/DataSource '/Documentation/ApiReference/Data_Layer/DataSource/'), [FileUploader](/api-reference/10%20UI%20Components/dxFileUploader '/Documentation/ApiReference/UI_Components/dxFileUploader/'), and [Map](/api-reference/10%20UI%20Components/dxMap '/Documentation/ApiReference/UI_Components/dxMap/'). This task requires that you import `DxHttpModule`. +In Angular apps, you can use [HttpInterceptor](https://angular.dev/api/common/http/HttpInterceptor) to intercept Ajax requests in DevExtreme components such as [DataSource](/api-reference/30%20Data%20Layer/DataSource '/Documentation/ApiReference/Data_Layer/DataSource/'), [FileUploader](/api-reference/10%20UI%20Components/dxFileUploader '/Documentation/ApiReference/UI_Components/dxFileUploader/'), and [Map](/api-reference/10%20UI%20Components/dxMap '/Documentation/ApiReference/UI_Components/dxMap/'). This task requires that you import `DxHttpModule`. [note] If you use `DxHttpModule`, Angular restricts access to [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest). This means you cannot get the XHR object in functions such as ODataContext.[errorHandler](/api-reference/30%20Data%20Layer/ODataContext/1%20Configuration/errorHandler.md '/Documentation/ApiReference/Data_Layer/ODataContext/Configuration/#errorHandler'), FileManager.fileSystemProvider.[beforeAjaxSend](/api-reference/10%20UI%20Components/dxFileManager/5%20File%20System%20Providers/Remote/1%20Configuration/beforeAjaxSend.md '/Documentation/ApiReference/UI_Components/dxFileManager/File_System_Providers/Remote/Configuration/#beforeAjaxSend'), FileUploader.[onUploadStarted](/api-reference/10%20UI%20Components/dxFileUploader/1%20Configuration/onUploadStarted.md '/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#onUploadStarted'), etc. diff --git a/concepts/Common/Security Considerations/Security Considerations.md b/concepts/Common/Security Considerations/Security Considerations.md index 51c77eab06..73c86f5196 100644 --- a/concepts/Common/Security Considerations/Security Considerations.md +++ b/concepts/Common/Security Considerations/Security Considerations.md @@ -4,7 +4,7 @@ This help topic describes potential security vulnerabilities and what you can do ##### Angular #####See Also##### -- Security in Angular +- Security in Angular ##### Vue