From c8ee54cda13855236703548cbc7f56a3f8ace745 Mon Sep 17 00:00:00 2001 From: sumeyye Date: Fri, 11 Jul 2025 13:53:54 +0300 Subject: [PATCH] fix: grammatical issues --- docs/en/framework/ui/angular/account-module.md | 6 +++--- docs/en/framework/ui/angular/caps-lock-directive.md | 4 ++-- docs/en/framework/ui/angular/component-replacement.md | 6 +++--- docs/en/framework/ui/angular/config-state-service.md | 2 +- docs/en/framework/ui/angular/confirmation-service.md | 2 +- .../framework/ui/angular/data-table-column-extensions.md | 4 ++-- docs/en/framework/ui/angular/dynamic-form-extensions.md | 4 ++-- docs/en/framework/ui/angular/ellipsis-directive.md | 2 +- docs/en/framework/ui/angular/entity-action-extensions.md | 4 ++-- docs/en/framework/ui/angular/entity-filters.md | 2 +- docs/en/framework/ui/angular/form-validation.md | 4 ++-- docs/en/framework/ui/angular/http-error-handling.md | 2 +- docs/en/framework/ui/angular/modal.md | 2 +- docs/en/framework/ui/angular/page-toolbar-extensions.md | 8 ++++---- docs/en/framework/ui/angular/quick-start.md | 4 ++-- docs/en/framework/ui/angular/show-password-directive.md | 4 ++-- docs/en/tutorials/microservice/part-05.md | 2 ++ 17 files changed, 32 insertions(+), 30 deletions(-) diff --git a/docs/en/framework/ui/angular/account-module.md b/docs/en/framework/ui/angular/account-module.md index 40c3f5b086..05b670d4d2 100644 --- a/docs/en/framework/ui/angular/account-module.md +++ b/docs/en/framework/ui/angular/account-module.md @@ -23,7 +23,7 @@ Open the `app.config.ts` and add `provideAccountConfig()` to the providers array // app.config.ts import { provideAccountConfig } from "@abp/ng.account/config"; -//... +// ... export const appConfig: ApplicationConfig = { providers: [ @@ -60,10 +60,10 @@ npm install @volo/abp.ng.account Open the `app.config.ts` and add `provideAccountPublicConfig()` to the providers array as shown below: -> Ensure that the `Account Layout Provider` has been added if you are using the Lepton X theme. If you miss the step, you will get an error message that says `Account layout not found. Please check your configuration. If you are using LeptonX, please make sure you have added "provideAccountLayout()" to your app configuration.` when you try to access the account pages. Otherwise, you can skip adding the `provideAccountLayout()` step. +> Ensure that the `Account Layout Provider` has been added if you are using the Lepton X theme. If you miss the step, you will get an error message that says `Account layout not found. Please check your configuration. If you are using LeptonX, please make sure you have added "provideAccountLayout()" to your app configuration.` Otherwise, you can skip adding the `provideAccountLayout()` step. ```js -// app.module.ts +// app.config.ts import { provideAccountPublicConfig } from "@volo/abp.ng.account/public/config"; // if you are using or want to use Lepton X, you should add provideAccountLayout diff --git a/docs/en/framework/ui/angular/caps-lock-directive.md b/docs/en/framework/ui/angular/caps-lock-directive.md index fc5ee46fd1..179027022d 100644 --- a/docs/en/framework/ui/angular/caps-lock-directive.md +++ b/docs/en/framework/ui/angular/caps-lock-directive.md @@ -5,7 +5,7 @@ In password inputs, You may want to show if Caps Lock is on. To make this even e ## Getting Started -`TrackCapsLockDirective` is standalone. In order to use the `TrackCapsLockDirective` in an HTML template, import it to related component. The directive's selector is **`abpCapsLock`**. By adding the `abpCapsLock` event to an element, you can track the status of Caps Lock. You can use this to warn user. +`TrackCapsLockDirective` is standalone. In order to use the `TrackCapsLockDirective` in an HTML template, import it to related component. The selector of the directive is **`abpCapsLock`**. By adding the `abpCapsLock` event to an element, you can track the status of Caps Lock. You can use this to warn user. See an example usage: @@ -23,7 +23,7 @@ import { TrackCapsLockDirective } from '@abp/ng.core' } `, - imports: [ TrackCapsLockDirective ] + imports: [TrackCapsLockDirective] }) export class SampleComponent{ capsLock = false; diff --git a/docs/en/framework/ui/angular/component-replacement.md b/docs/en/framework/ui/angular/component-replacement.md index dd0767bebc..e0cda680b9 100644 --- a/docs/en/framework/ui/angular/component-replacement.md +++ b/docs/en/framework/ui/angular/component-replacement.md @@ -32,7 +32,7 @@ export class AppComponent { ## How to Replace a Layout -Each ABP theme module has 3 layouts named `ApplicationLayoutComponent`, `AccountLayoutComponent`, `EmptyLayoutComponent`. These layouts can be replaced the same way. +Each ABP theme package has 3 layouts named `ApplicationLayoutComponent`, `AccountLayoutComponent`, `EmptyLayoutComponent`. These layouts can be replaced the same way. > A layout component template should contain `` element. @@ -70,7 +70,7 @@ export class AppComponent { } ``` -> If you like to replace a layout component at runtime (e.g: changing the layout by pressing a button), pass the second parameter of the `add` method of `ReplaceableComponentsService` as true. DynamicLayoutComponent loads content using a router-outlet. When the second parameter of the `add` method is true, the route will be refreshed, so use it with caution. Your component state will be gone and any initiation logic (including HTTP requests) will be repeated. +> If you would like to replace a layout component at runtime (e.g: changing the layout by pressing a button), pass the second parameter of the `add` method of `ReplaceableComponentsService` as true. DynamicLayoutComponent loads content using a router-outlet. When the second parameter of the `add` method is true, the route will be refreshed, so use it with caution. Your component state will be gone and any initiation logic (including HTTP requests) will be repeated. ### Layout Components @@ -150,7 +150,7 @@ export const myDynamicLayouts = new Map([...DEFAULT_DYNAMIC_LAYO #### Step 5: Pass the Dynamic Layouts to the Core Provider -The final step is to pass the dynamic layouts to the `provideAbpCore` using the `withOptions` method. This method allows you to configure the module with a static method. +The final step is to pass the dynamic layouts to the `provideAbpCore` using the `withOptions` method. This method allows you to configure the provider with a static method. Here's how you can do it: diff --git a/docs/en/framework/ui/angular/config-state-service.md b/docs/en/framework/ui/angular/config-state-service.md index 957f5f796b..f0d3418898 100644 --- a/docs/en/framework/ui/angular/config-state-service.md +++ b/docs/en/framework/ui/angular/config-state-service.md @@ -17,7 +17,7 @@ class DemoComponent { } ``` -You do not have to provide the `ConfigStateService` at module or component/directive level, because it is already **provided in root**. +You do not have to provide the `ConfigStateService` at component or directive level, because it is already **provided in root**. ## Get Methods diff --git a/docs/en/framework/ui/angular/confirmation-service.md b/docs/en/framework/ui/angular/confirmation-service.md index 8eb7ced3f4..3ff84f7dbe 100644 --- a/docs/en/framework/ui/angular/confirmation-service.md +++ b/docs/en/framework/ui/angular/confirmation-service.md @@ -129,7 +129,7 @@ this.confirmation.clear(); ### How to Change Icons of The Confirmation Popup -You can change icons with the `withConfirmationIcon()` method of `provideAbpThemeShared` function in the app.config.ts. The changes will affect all confirmation popup in the project. +You can change icons with the `withConfirmationIcon()` method inside `provideAbpThemeShared` function in the app.config.ts. The changes will affect all confirmation popup in the project. ```ts import { provideAbpThemeShared, withConfirmationIcon } from '@abp/ng.theme.shared'; diff --git a/docs/en/framework/ui/angular/data-table-column-extensions.md b/docs/en/framework/ui/angular/data-table-column-extensions.md index cae4695e74..781ad51ae4 100644 --- a/docs/en/framework/ui/angular/data-table-column-extensions.md +++ b/docs/en/framework/ui/angular/data-table-column-extensions.md @@ -14,7 +14,7 @@ In this example, we will add a "Name" column and display the value of the `name` ### Step 1. Create Entity Prop Contributors -The following code prepares a constant named `identityEntityPropContributors`, ready to be imported and used in your root app configuration: +The following code prepares a constant named `identityEntityPropContributors`, ready to be imported and used in your root application configuration: ```js // src/app/entity-prop-contributors.ts @@ -52,7 +52,7 @@ The list of props, conveniently named as `propList`, is a **doubly linked list** ### Step 2. Import and Use Entity Prop Contributors -Import `identityEntityPropContributors` in your routing configuration and pass it to the static `createRoutes` method of `identity` routes as seen below: +Import `identityEntityPropContributors` in your routing configuration and pass it to the static `createRoutes` method for `identity` route as seen below: ```js // src/app/app.routes.ts diff --git a/docs/en/framework/ui/angular/dynamic-form-extensions.md b/docs/en/framework/ui/angular/dynamic-form-extensions.md index d9616defca..72c762fd4a 100644 --- a/docs/en/framework/ui/angular/dynamic-form-extensions.md +++ b/docs/en/framework/ui/angular/dynamic-form-extensions.md @@ -15,7 +15,7 @@ In this example, we will add a "Date of Birth" field in the user management page ### Step 1. Create Form Prop Contributors -The following code prepares two constants named `identityCreateFormPropContributors` and `identityEditFormPropContributors`, ready to be imported and used in your root app configuration: +The following code prepares two constants named `identityCreateFormPropContributors` and `identityEditFormPropContributors`, ready to be imported and used in your root application configuration: ```js // src/app/form-prop-contributors.ts @@ -57,7 +57,7 @@ The list of props, conveniently named as `propList`, is a **doubly linked list** ### Step 2. Import and Use Form Prop Contributors -Import `identityCreateFormPropContributors` and `identityEditFormPropContributors` in your routing configuration and pass it to the static `createRoutes` method of `identity` package as seen below: +Import `identityCreateFormPropContributors` and `identityEditFormPropContributors` in your routing configuration and pass it to the static `createRoutes` method for `identity` route as seen below: ```js // src/app/app.routes.ts diff --git a/docs/en/framework/ui/angular/ellipsis-directive.md b/docs/en/framework/ui/angular/ellipsis-directive.md index 653c100735..df6db94ec5 100644 --- a/docs/en/framework/ui/angular/ellipsis-directive.md +++ b/docs/en/framework/ui/angular/ellipsis-directive.md @@ -5,7 +5,7 @@ Text inside an HTML element can be truncated easily with an ellipsis by using CS ## Getting Started -In order to use the `EllipsisDirective` in an HTML template, it should be imported in your component. The directive's selector is **`abpEllipsis`**. By adding the `abpEllipsis` attribute to an HTML element, you can activate the `EllipsisDirective` for the HTML element. +In order to use the `EllipsisDirective` in an HTML template, it should be imported in your component. The selector of directive is **`abpEllipsis`**. By adding the `abpEllipsis` attribute to an HTML element, you can activate the `EllipsisDirective` for the HTML element. ```js // ... diff --git a/docs/en/framework/ui/angular/entity-action-extensions.md b/docs/en/framework/ui/angular/entity-action-extensions.md index 4bd11caad0..26913229bf 100644 --- a/docs/en/framework/ui/angular/entity-action-extensions.md +++ b/docs/en/framework/ui/angular/entity-action-extensions.md @@ -14,7 +14,7 @@ In this example, we will add a "Click Me!" action and alert the current row's `u ### Step 1. Create Entity Action Contributors -The following code prepares a constant named `identityEntityActionContributors`, ready to be imported and used in your root app configuration: +The following code prepares a constant named `identityEntityActionContributors`, ready to be imported and used in your root application configuration: ```ts // src/app/entity-action-contributors.ts @@ -49,7 +49,7 @@ The list of actions, conveniently named as `actionList`, is a **doubly linked li ### Step 2. Import and Use Entity Action Contributors -Import `identityEntityActionContributors` in your routing configuration and pass it to the static `configureRoutes` of `identity` package as seen below: +Import `identityEntityActionContributors` in your routing configuration and pass it to the static `configureRoutes` method for `identity` routes as seen below: ```js // src/app/app.routes.ts diff --git a/docs/en/framework/ui/angular/entity-filters.md b/docs/en/framework/ui/angular/entity-filters.md index adc1854ee8..45929c1ef9 100644 --- a/docs/en/framework/ui/angular/entity-filters.md +++ b/docs/en/framework/ui/angular/entity-filters.md @@ -54,7 +54,7 @@ As shown in the screenshot, `abp-advanced-entity-filters` usually contain two pa ``` -The `abp-advanced-entity-filters` already contains the `abp-entity-filter` component so you do not need to pass it. However, the `abp-entity-filter` component needs an instance of `ListService` which is usually stored in the `list` field of the page. You can also change the placeholder of the component via `entityFilterPlaceholder` input which is passed into the `abpLocalization` pipe so that it uses the translated text. Default is `'AbpUi::PagerSearch'` +The `abp-advanced-entity-filters` already contains the `abp-entity-filter` component so you do not need to pass it. However, the `abp-entity-filter` component needs an instance of `ListService` which is usually stored in the `list` field of the page. You can also change the placeholder of the component via `entityFilterPlaceholder` input which is passed into the `abpLocalization` pipe so that it uses the translated text. The default is `'AbpUi::PagerSearch'` E.g diff --git a/docs/en/framework/ui/angular/form-validation.md b/docs/en/framework/ui/angular/form-validation.md index 0ce8d49ca9..1e17a3e80e 100644 --- a/docs/en/framework/ui/angular/form-validation.md +++ b/docs/en/framework/ui/angular/form-validation.md @@ -6,7 +6,7 @@ Reactive forms in ABP Angular UI are validated by [ngx-validate](https://www.npm ## How to Add New Error Messages -You can add a new error message by passing validation options to the `withValidationBluePrint` method of `provideAbpThemeShared` function in your root app configuration. +You can add a new error message by passing validation options to the `withValidationBluePrint` method inside `provideAbpThemeShared` function in your root application configuration. ```ts import { provideAbpThemeShared, withValidationBluePrint } from '@abp/ng.theme.shared'; @@ -58,7 +58,7 @@ In this example; ## How to Change Existing Error Messages -You can overwrite an existing error message by passing validation options to the `provideAbpThemeShared` in your root app configuration. Let's imagine you have a custom localization resource for required inputs. +You can overwrite an existing error message by passing validation options to the `provideAbpThemeShared` in your root application configuration. Let's imagine you have a custom localization resource for required inputs. ```json "RequiredInput": "Oops! We need this input." diff --git a/docs/en/framework/ui/angular/http-error-handling.md b/docs/en/framework/ui/angular/http-error-handling.md index 5cdc7bfd74..d388bbfc83 100644 --- a/docs/en/framework/ui/angular/http-error-handling.md +++ b/docs/en/framework/ui/angular/http-error-handling.md @@ -192,7 +192,7 @@ export class MyCustomErrorHandlerService ```ts -// app.module.ts +// app.config.ts import { CUSTOM_ERROR_HANDLERS, ... } from '@abp/ng.theme.shared'; import { MyCustomErrorHandlerService } from './custom-error-handler.service'; diff --git a/docs/en/framework/ui/angular/modal.md b/docs/en/framework/ui/angular/modal.md index c0a0c844c2..3691001c79 100644 --- a/docs/en/framework/ui/angular/modal.md +++ b/docs/en/framework/ui/angular/modal.md @@ -32,7 +32,7 @@ import { ModalComponent, ModalCloseDirective } from '@abp/ng.theme.shared'; ], }) export class SampleComponent { - isModalOpen = false + isModalOpen = false; } ``` diff --git a/docs/en/framework/ui/angular/page-toolbar-extensions.md b/docs/en/framework/ui/angular/page-toolbar-extensions.md index 63f1196459..5a741b3d2f 100644 --- a/docs/en/framework/ui/angular/page-toolbar-extensions.md +++ b/docs/en/framework/ui/angular/page-toolbar-extensions.md @@ -14,7 +14,7 @@ In this example, we will add a "Click Me!" action and log `userName` of all user ### Step 1. Create Toolbar Action Contributors -The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root app configuration: +The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root application configuration: ```js // src/app/toolbar-action-contributors.ts @@ -53,7 +53,7 @@ The list of actions, conveniently named as `actionList`, is a **doubly linked li ### Step 2. Import and Use Toolbar Action Contributors -Import `identityToolbarActionContributors` in your routing module and pass it to the static `createRoutes` method of `identity` package as seen below: +Import `identityToolbarActionContributors` in your routing configuration and pass it to the static `createRoutes` method for `identity` route as seen below: ```js // src/app/app.routes.ts @@ -120,7 +120,7 @@ Here, `EXTENSIONS_ACTION_DATA` token provides us the context from the page toolb ### Step 2. Create Toolbar Action Contributors -The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root app configuration. When `ToolbarComponent` is used instead of `ToolbarAction`, we can pass a component in: +The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root application configuration. When `ToolbarComponent` is used instead of `ToolbarAction`, we can pass a component in: ```js // src/app/toolbar-action-contributors.ts @@ -156,7 +156,7 @@ The list of actions, conveniently named as `actionList`, is a **doubly linked li ### Step 3. Import and Use Toolbar Action Contributors -Import `identityToolbarActionContributors` in your routing configuration and pass it to the static `createRoutes` method of `identity` package as seen below. +Import `identityToolbarActionContributors` in your routing configuration and pass it to the static `createRoutes` method for `identity` route as seen below. ```js // src/app/app.routes.ts diff --git a/docs/en/framework/ui/angular/quick-start.md b/docs/en/framework/ui/angular/quick-start.md index 887efc7486..870df22d66 100644 --- a/docs/en/framework/ui/angular/quick-start.md +++ b/docs/en/framework/ui/angular/quick-start.md @@ -1,12 +1,12 @@ # ABP Angular Quick Start -**In this version ABP uses Angular [19.1.x](https://github.com/angular/angular/tree/17.3.x) version. You don't have to install Angular CLI globally** +**In this version ABP uses Angular [20.0.x](https://github.com/angular/angular/tree/17.3.x) version. You don't have to install Angular CLI globally** ## How to Prepare Development Environment Please follow the steps below to prepare your development environment for Angular. -1. **Install Node.js:** Please visit [Node.js downloads page](https://nodejs.org/en/download/) and download proper Node.js `v20.11+` installer for your OS. An alternative is to install [NVM](https://github.com/nvm-sh/nvm) and use it to have multiple versions of Node.js in your operating system. +1. **Install Node.js:** Please visit [Node.js downloads page](https://nodejs.org/en/download/) and download proper Node.js `v20.19+` installer for your OS. An alternative is to install [NVM](https://github.com/nvm-sh/nvm) and use it to have multiple versions of Node.js in your operating system. 2. **[Optional] Install Yarn:** You may install Yarn v1.22+ (not v2) following the instructions on [the installation page](https://classic.yarnpkg.com/en/docs/install). Yarn v1 delivers an arguably better developer experience compared to npm v10 and below. You may skip this step and work with npm, which is built-in in Node.js, instead. 3. **[Optional] Install VS Code:** [VS Code](https://code.visualstudio.com/) is a free, open-source IDE which works seamlessly with TypeScript. Although you can use any IDE including Visual Studio or Rider, VS Code will most likely deliver the best developer experience when it comes to Angular projects. ABP project templates even contain plugin recommendations for VS Code users, which VS Code will ask you to install when you open the Angular project folder. Here is a list of recommended extensions: - [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=angular.ng-template) diff --git a/docs/en/framework/ui/angular/show-password-directive.md b/docs/en/framework/ui/angular/show-password-directive.md index 423d388a4b..588aa3a60b 100644 --- a/docs/en/framework/ui/angular/show-password-directive.md +++ b/docs/en/framework/ui/angular/show-password-directive.md @@ -4,7 +4,7 @@ In password input, text can be shown easily via changing input type attribute to ## Getting Started -`ShowPasswordDirective` is standalone. In order to use the `ShowPasswordDirective` in an HTML template, import it to your component: +`ShowPasswordDirective` is standalone. In order to use the it in an HTML template, import it to your component: **Importing to Component** ```ts @@ -37,7 +37,7 @@ import { ShowPasswordDirective } from '@abp/ng.core'; icon `, - imports: [ ShowPasswordDirective ] + imports: [ShowPasswordDirective] }) export class SampleComponent{ showPassword = false; diff --git a/docs/en/tutorials/microservice/part-05.md b/docs/en/tutorials/microservice/part-05.md index f91560f63d..9c037617a1 100644 --- a/docs/en/tutorials/microservice/part-05.md +++ b/docs/en/tutorials/microservice/part-05.md @@ -645,12 +645,14 @@ export const ORDER_SERVICE_ROUTES: Routes = [ ```typescript import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { OrderDto, OrderService } from './proxy/ordering-service/services'; @Component({ selector: 'lib-order', templateUrl: './order.component.html', styleUrl: './order.component.css' + imports: [CommonModule] }) export class OrderComponent {