diff --git a/docs/en/framework/ui/angular/checkbox-component.md b/docs/en/framework/ui/angular/checkbox-component.md index 2e5cc44ad3..fa3824027d 100644 --- a/docs/en/framework/ui/angular/checkbox-component.md +++ b/docs/en/framework/ui/angular/checkbox-component.md @@ -25,26 +25,21 @@ The ABP Checkbox Component is a reusable form input component for the checkbox t # Usage -The ABP Checkbox component is a part of the `ThemeSharedModule` module. If you've imported that module into your module, there's no need to import it again. If not, then first import it as shown below: +The ABP Checkbox component (`AbpCheckboxComponent`) is a standalone component. You can import it directly in your component: ```ts -// my-feature.module.ts - -import { ThemeSharedModule } from "@abp/ng.theme.shared"; -import { CheckboxDemoComponent } from "./CheckboxDemoComponent.component"; - -@NgModule({ - imports: [ - ThemeSharedModule, - // ... - ], - declarations: [CheckboxDemoComponent], - // ... +import { Component } from "@angular/core"; +import { AbpCheckboxComponent } from "@abp/ng.theme.shared"; + +@Component({ + selector: 'app-checkbox-demo', + imports: [AbpCheckboxComponent], + templateUrl: './checkbox-demo.component.html', }) -export class MyFeatureModule {} +export class CheckboxDemoComponent {} ``` -Then, the `abp-checkbox` component can be used. See the example below: +Then, the `abp-checkbox` component can be used in your template. See the example below: ```html
diff --git a/docs/en/framework/ui/angular/form-input-component.md b/docs/en/framework/ui/angular/form-input-component.md index aaf3b6f5be..4f860fe36d 100644 --- a/docs/en/framework/ui/angular/form-input-component.md +++ b/docs/en/framework/ui/angular/form-input-component.md @@ -22,23 +22,21 @@ The ABP FormInput Component is a reusable form input component for the text type # Usage -The ABP FormInput component is a part of the `ThemeSharedModule` module. If you've imported that module into your module, there's no need to import it again. If not, then first import it as shown below: +The ABP FormInput component (`AbpFormInputComponent`) is a standalone component. You can import it directly in your component: ```ts -import { ThemeSharedModule } from "@abp/ng.theme.shared"; -import { FormInputDemoComponent } from "./FomrInputDemoComponent.component"; - -@NgModule({ - imports: [ - ThemeSharedModule, - // ... - ], - declarations: [FormInputDemoComponent], +import { Component } from "@angular/core"; +import { AbpFormInputComponent } from "@abp/ng.theme.shared"; + +@Component({ + selector: 'app-form-input-demo', + imports: [AbpFormInputComponent], + templateUrl: './form-input-demo.component.html', }) -export class MyFeatureModule {} +export class FormInputDemoComponent {} ``` -Then, the `abp-form-input` component can be used. See the example below: +Then, the `abp-form-input` component can be used in your template. See the example below: ```html
diff --git a/docs/en/framework/ui/angular/form-validation.md b/docs/en/framework/ui/angular/form-validation.md index b4ed31842d..8047767279 100644 --- a/docs/en/framework/ui/angular/form-validation.md +++ b/docs/en/framework/ui/angular/form-validation.md @@ -303,7 +303,6 @@ import { NgxValidateCoreModule } from '@ngx-validate/core'; @Component({ selector: 'app-nested-form', templateUrl: './nested-form.component.html', - standalone: true, imports: [NgxValidateCoreModule], }) export class NestedFormComponent implements OnInit { diff --git a/docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md b/docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md index 5d70510e51..6db3c95fda 100644 --- a/docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md +++ b/docs/en/framework/ui/angular/how-replaceable-components-work-with-extensions.md @@ -9,38 +9,45 @@ Additional UI extensibility points ([Entity action extensions](../angular/entity-action-extensions.md), [data table column extensions](../angular/data-table-column-extensions.md), [page toolbar extensions](../angular/page-toolbar-extensions.md) and others) are used in ABP pages to allow to control entity actions, table columns and page toolbar of a page. If you replace a page, you need to apply some configurations to be able to work extension components in your component. Let's see how to do this by replacing the roles page. -Create a new module called `MyRolesModule`: - -```bash -yarn ng generate module my-roles --module app -``` - Create a new component called `MyRolesComponent`: ```bash -yarn ng generate component my-roles/my-roles --flat --export +yarn ng generate component my-roles/my-roles --flat ``` Open the generated `src/app/my-roles/my-roles.component.ts` file and replace its content with the following: ```js import { Component, Injector, inject, OnInit } from '@angular/core'; -import { FormGroup } from '@angular/forms'; +import { FormGroup, ReactiveFormsModule } from '@angular/forms'; import { finalize } from 'rxjs/operators'; -import { ListService, PagedAndSortedResultRequestDto, PagedResultDto } from '@abp/ng.core'; +import { ListService, PagedAndSortedResultRequestDto, PagedResultDto, LocalizationPipe } from '@abp/ng.core'; import { eIdentityComponents, RolesComponent } from '@abp/ng.identity'; import { IdentityRoleDto, IdentityRoleService } from '@abp/ng.identity/proxy'; -import { ePermissionManagementComponents } from '@abp/ng.permission-management'; -import { Confirmation, ConfirmationService } from '@abp/ng.theme.shared'; +import { ePermissionManagementComponents, PermissionManagementComponent } from '@abp/ng.permission-management'; +import { Confirmation, ConfirmationService, ModalComponent, ButtonComponent } from '@abp/ng.theme.shared'; import { EXTENSIONS_IDENTIFIER, FormPropData, - generateFormFromProps + generateFormFromProps, + PageToolbarComponent, + ExtensibleTableComponent, + ExtensibleFormComponent } from '@abp/ng.components/extensible'; @Component({ selector: 'app-my-roles', + imports: [ + ReactiveFormsModule, + LocalizationPipe, + ModalComponent, + ButtonComponent, + PageToolbarComponent, + ExtensibleTableComponent, + ExtensibleFormComponent, + PermissionManagementComponent + ], templateUrl: './my-roles.component.html', providers: [ ListService, @@ -236,25 +243,12 @@ Open the generated `src/app/my-role/my-role.component.html` file and replace its We have added the `abp-page-toolbar`, `abp-extensible-table`, and `abp-extensible-form` extension components to template of the `MyRolesComponent`. -You should import the required modules for the `MyRolesComponent` to `MyRolesModule`. Open the `src/my-roles/my-roles.module.ts` file and replace the content with the following: - -```js -import { ExtensibleModule } from '@abp/ng.components/extensible'; -import { NgModule } from '@angular/core'; -import { SharedModule } from '../shared/shared.module'; -import { MyRolesComponent } from './my-roles.component'; -import { PermissionManagementModule } from '@abp/ng.permission-management'; - -@NgModule({ - declarations: [MyRolesComponent], - imports: [SharedModule, ExtensibleModule, PermissionManagementModule], - exports: [MyRolesComponent], -}) -export class MyRolesModule {} -``` - -- `ExtensionsModule` imported to be able to use the extension components in your component. -- `PermissionManagementModule` imported to be able to use the `abp-permission-*management` in your component. +Since we are using standalone components, all required imports are already defined in the component's `imports` array: +- `PageToolbarComponent`, `ExtensibleTableComponent`, `ExtensibleFormComponent` - Extension components +- `PermissionManagementComponent` - Permission management component +- `ModalComponent`, `ButtonComponent` - Theme shared components +- `LocalizationPipe` - For localization +- `ReactiveFormsModule` - For form handling As the last step, it is needs to be replaced the `RolesComponent` with the `MyRolesComponent`. Open the `app.component.ts` and modify its content as shown below: diff --git a/docs/en/framework/ui/angular/quick-start.md b/docs/en/framework/ui/angular/quick-start.md index 0e48f0190e..2417b187b1 100644 --- a/docs/en/framework/ui/angular/quick-start.md +++ b/docs/en/framework/ui/angular/quick-start.md @@ -1,13 +1,13 @@ ```json //[doc-seo] { - "Description": "Learn how to set up your development environment for ABP Angular 17.3.x with this quick start guide, ensuring a smooth development experience." + "Description": "Learn how to set up your development environment for ABP Angular 21.x with this quick start guide, ensuring a smooth development experience." } ``` # ABP Angular Quick Start -**In this version ABP uses Angular [20.0.x](https://github.com/angular/angular/tree/20.0.x) version. You don't have to install Angular CLI globally** +**In this version ABP uses Angular [21.0.x](https://github.com/angular/angular/tree/21.0.x) version. You don't have to install Angular CLI globally** ## How to Prepare Development Environment @@ -18,13 +18,13 @@ Please follow the steps below to prepare your development environment for Angula 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) - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - - [TSLint](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin) + - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=visualstudioexptteam.vscodeintellicode) - [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) - [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense) - [Angular 10 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout](https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode) - [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) - - [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) + - [JavaScript Debugger](https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug) (built-in, usually pre-installed) - [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory) - [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) diff --git a/docs/en/framework/ui/angular/ssr-configuration.md b/docs/en/framework/ui/angular/ssr-configuration.md index e058beb861..4d889377fd 100644 --- a/docs/en/framework/ui/angular/ssr-configuration.md +++ b/docs/en/framework/ui/angular/ssr-configuration.md @@ -239,7 +239,7 @@ The schematic installs `openid-client` to handle authentication on the server si ## 5. Render Modes & Hybrid Rendering -Angular 20 provides different rendering modes that you can configure per route in the `app.routes.server.ts` file to optimize performance and SEO. +Angular 21 provides different rendering modes that you can configure per route in the `app.routes.server.ts` file to optimize performance and SEO. ### 5.1. Available Render Modes @@ -352,13 +352,17 @@ currentTime = new Date(); // ✅ Good - use TransferState for consistent data import { TransferState, makeStateKey } from '@angular/core'; -const TIME_KEY = makeStateKey('time'); +TIME_KEY = makeStateKey('time'); +transferState = inject(TransferState); +time: string; -constructor(private transferState: TransferState) { +constructor() { if (isPlatformServer(this.platformId)) { - this.transferState.set(TIME_KEY, new Date().toISOString()); + this.time = new Date().toISOString(); + this.transferState.set(this.TIME_KEY, this.time); } else { - this.time = this.transferState.get(TIME_KEY, new Date().toISOString()); + const timeFromCache = this.transferState.get(this.TIME_KEY, new Date().toISOString()); + this.time = timeFromCache; } } ``` diff --git a/docs/en/framework/ui/angular/theming.md b/docs/en/framework/ui/angular/theming.md index 1351a02f33..bad673716a 100644 --- a/docs/en/framework/ui/angular/theming.md +++ b/docs/en/framework/ui/angular/theming.md @@ -229,13 +229,14 @@ All of the options are shown below. You can choose either of them. ````ts import { eUserMenuItems } from '@abp/ng.theme.basic'; -import { UserMenuService } from '@abp/ng.theme.shared'; +import { UserMenuService, UserMenu } from '@abp/ng.theme.shared'; +import { LocalizationPipe, INJECTOR_PIPE_DATA_TOKEN } from '@abp/ng.core'; import { Component, inject } from '@angular/core'; import { Router } from '@angular/router'; -// make sure that you import this component in a NgModule @Component({ selector: 'abp-current-user-test', + imports: [LocalizationPipe], template: ` @if (data.textTemplate.icon){