Merge pull request #24575 from abpframework/documentation/angular-version-upgrade-to-v21

 Angular - Docs version upgrade to v21

Author: sumeyyeKurtulus

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
 <div class="form-check">

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
 <div class="row">

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 {

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:
 

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)
 

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<string>('time');
+TIME_KEY = makeStateKey<string>('time');
+transferState = inject<TransferState>(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;
     }
 }
 ```

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: `
     <a class="dropdown-item pointer" (click)="data.action()">
     @if (data.textTemplate.icon){