diff --git a/docs/en/contribution/angular-ui.md b/docs/en/contribution/angular-ui.md index 6aefa43fa8..e3445b12bd 100644 --- a/docs/en/contribution/angular-ui.md +++ b/docs/en/contribution/angular-ui.md @@ -12,7 +12,7 @@ - Dotnet core SDK https://dotnet.microsoft.com/en-us/download - Nodejs LTS https://nodejs.org/en/ - Docker https://docs.docker.com/engine/install -- Angular CLI. https://angular.io/guide/what-is-angular#angular-cli +- Angular CLI. https://angular.dev/tools/cli - Abp CLI https://docs.abp.io/en/abp/latest/cli - A code editor diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index 692a8de4c1..08b4553d64 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -1645,7 +1645,7 @@ "path": "framework/ui/angular/list-service.md" }, { - "text": "Easy *ngFor trackBy", + "text": "Easy @for() track", "path": "framework/ui/angular/track-by-service.md" }, { diff --git a/docs/en/framework/ui/angular/component-replacement.md b/docs/en/framework/ui/angular/component-replacement.md index 6feebfc409..ec1102f893 100644 --- a/docs/en/framework/ui/angular/component-replacement.md +++ b/docs/en/framework/ui/angular/component-replacement.md @@ -584,8 +584,8 @@ Open the generated `nav-items.component.html` in `src/app/nav-items` folder and class="bg-transparent border-0 text-white" />
  • + @if ((dropdownLanguages$ | async)?.length > 0) {
    - {%{{{ lang?.displayName }}}%} + @for (lang of dropdownLanguages$ | async; track lang.cultureName) { + {%{{{ lang?.displayName }}}%} + }
    + }
  • - - {%{{{ 'AbpAccount::Login' | abpLocalization }}}%} - + @if ((currentUser$ | async)?.isAuthenticated) { + } @else { + + + {%{{{ 'AbpAccount::Login' | abpLocalization }}}%} + + + }
    • ``` 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 30b9facf0d..0365336d81 100644 --- a/docs/en/framework/ui/angular/data-table-column-extensions.md +++ b/docs/en/framework/ui/angular/data-table-column-extensions.md @@ -171,7 +171,7 @@ It has the following properties: - **index** is the table index where the record is at. -- **getInjected** is the equivalent of [Injector.get](https://angular.io/api/core/Injector#get). You can use it to reach injected dependencies of `ExtensibleTableComponent`, including, but not limited to, its parent component. +- **getInjected** is the equivalent of [Injector.get](https://angular.dev/api/core/Injector). You can use it to reach injected dependencies of `ExtensibleTableComponent`, including, but not limited to, its parent component. ```js { diff --git a/docs/en/framework/ui/angular/dynamic-form-extensions.md b/docs/en/framework/ui/angular/dynamic-form-extensions.md index ee7af81397..a92a06d609 100644 --- a/docs/en/framework/ui/angular/dynamic-form-extensions.md +++ b/docs/en/framework/ui/angular/dynamic-form-extensions.md @@ -107,7 +107,7 @@ Extra properties defined on an existing entity will be included in the create an It has the following properties: -- **getInjected** is the equivalent of [Injector.get](https://angular.io/api/core/Injector#get). You can use it to reach injected dependencies of `ExtensibleFormPropComponent`, including, but not limited to, its parent components. +- **getInjected** is the equivalent of [Injector.get](https://angular.dev/api/core/Injector). You can use it to reach injected dependencies of `ExtensibleFormPropComponent`, including, but not limited to, its parent components. ```js { diff --git a/docs/en/framework/ui/angular/entity-action-extensions.md b/docs/en/framework/ui/angular/entity-action-extensions.md index 152ff6636d..5a8e74a2f9 100644 --- a/docs/en/framework/ui/angular/entity-action-extensions.md +++ b/docs/en/framework/ui/angular/entity-action-extensions.md @@ -272,7 +272,7 @@ It has the following properties: - **index** is the table index where the record is at. -- **getInjected** is the equivalent of [Injector.get](https://angular.io/api/core/Injector#get). You can use it to reach injected dependencies of `GridActionsComponent`, including, but not limited to, its parent component. +- **getInjected** is the equivalent of [Injector.get](https://angular.dev/api/core/Injector). You can use it to reach injected dependencies of `GridActionsComponent`, including, but not limited to, its parent component. ```js { diff --git a/docs/en/framework/ui/angular/form-validation.md b/docs/en/framework/ui/angular/form-validation.md index 35a54549af..b4ed31842d 100644 --- a/docs/en/framework/ui/angular/form-validation.md +++ b/docs/en/framework/ui/angular/form-validation.md @@ -52,7 +52,7 @@ export const appConfig: ApplicationConfig = { }; ``` -When a [validator](https://angular.io/guide/form-validation#defining-custom-validators) or an [async validator](https://angular.io/guide/form-validation#creating-asynchronous-validators) returns an error with the key given to the error blueprints (`uniqueUsername` here), the validation library will be able to display an error message after localizing according to the given key and interpolation params. The result will look like this: +When a [validator](https://angular.dev/guide/forms/form-validation) or an [async validator](https://angular.dev/guide/forms/form-validation) returns an error with the key given to the error blueprints (`uniqueUsername` here), the validation library will be able to display an error message after localizing according to the given key and interpolation params. The result will look like this: An already taken username is entered while creating new user and a custom error message appears under the input after validation. @@ -146,12 +146,13 @@ import { ChangeDetectionStrategy, Component } from "@angular/core"; selector: "app-validation-error", imports:[CommonModule, LocalizationPipe], template: ` -
    - {%{{{ error.message | abpLocalization: error.interpoliteParams }}}%} -
    + @for (error of abpErrors; track $index){ +
    + {%{{{ error.message | abpLocalization: error.interpoliteParams }}}%} +
    + } `, changeDetection: ChangeDetectionStrategy.OnPush, }) @@ -250,7 +251,7 @@ buildForm() { {%{{ 'AbpIdentity::UserInformations' | abpLocalization }}%} - + @@ -263,7 +264,7 @@ buildForm() { + /> } diff --git a/docs/en/framework/ui/angular/http-requests.md b/docs/en/framework/ui/angular/http-requests.md index 5cb217540d..a5ca0dec66 100644 --- a/docs/en/framework/ui/angular/http-requests.md +++ b/docs/en/framework/ui/angular/http-requests.md @@ -9,7 +9,7 @@ ## About HttpClient -Angular has the amazing [HttpClient](https://angular.io/guide/http) for communication with backend services. It is a layer on top and a simplified representation of [XMLHttpRequest Web API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest). It also is the recommended agent by Angular for any HTTP request. There is nothing wrong with using the `HttpClient` in your ABP project. +Angular has the amazing [HttpClient](https://angular.dev/guide/http/making-requests) for communication with backend services. It is a layer on top and a simplified representation of [XMLHttpRequest Web API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest). It also is the recommended agent by Angular for any HTTP request. There is nothing wrong with using the `HttpClient` in your ABP project. However, `HttpClient` leaves error handling to the caller (method). In other words, HTTP errors are handled manually and by hooking into the observer of the `Observable` returned. @@ -93,7 +93,7 @@ postFoo(body: Foo) { } ``` -You may [check here](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/rest.ts#L23) for complete `Rest.Request` type, which has only a few changes compared to [HttpRequest](https://angular.io/api/common/http/HttpRequest) class in Angular. +You may [check here](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/rest.ts#L23) for complete `Rest.Request` type, which has only a few changes compared to [HttpRequest](https://angular.dev/api/common/http/HttpRequest) class in Angular. ### How to Disable Default Error Handler of RestService diff --git a/docs/en/framework/ui/angular/lazy-load-service.md b/docs/en/framework/ui/angular/lazy-load-service.md index e0942a15f0..9eb1113899 100644 --- a/docs/en/framework/ui/angular/lazy-load-service.md +++ b/docs/en/framework/ui/angular/lazy-load-service.md @@ -44,10 +44,13 @@ The first parameter of `load` method expects a `LoadingStrategy`. If you pass a ```js import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core'; import { inject } from '@angular/core'; +import { AsyncPipe } from '@angular/common'; @Component({ template: ` - + @if (libraryLoaded$ | async) { + + } ` }) class DemoComponent { @@ -59,7 +62,7 @@ class DemoComponent { } ``` -The `load` method returns an observable to which you can subscibe in your component or with an `async` pipe. In the example above, the `NgIf` directive will render `` only **if the script gets successfully loaded or is already loaded before**. +The `load` method returns an observable to which you can subscibe in your component or with an `async` pipe. In the example above, the `@if(...)` directive will render `` only **if the script gets successfully loaded or is already loaded before**. > You can subscribe multiple times in your template with `async` pipe. The Scripts will only be loaded once. @@ -74,10 +77,13 @@ If you pass a `StyleLoadingStrategy` instance as the first parameter of `load` m ```js import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core'; import { inject } from '@angular/core'; +import { AsyncPipe } from '@angular/common'; @Component({ template: ` - + @if (stylesLoaded$ | async) { + + } ` }) class DemoComponent { @@ -89,7 +95,7 @@ class DemoComponent { } ``` -The `load` method returns an observable to which you can subscibe in your component or with an `AsyncPipe`. In the example above, the `NgIf` directive will render `` only **if the style gets successfully loaded or is already loaded before**. +The `load` method returns an observable to which you can subscibe in your component or with an `AsyncPipe`. In the example above, the `@if(...)` directive will render `` only **if the style gets successfully loaded or is already loaded before**. > You can subscribe multiple times in your template with `async` pipe. The styles will only be loaded once. @@ -126,10 +132,13 @@ A common usecase is **loading multiple scripts and/or styles before using a feat import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core'; import { forkJoin } from 'rxjs'; import { inject } from '@angular/core'; +import { AsyncPipe } from '@angular/common'; @Component({ template: ` - + @if (scriptsAndStylesLoaded$ | async) { + + } ` }) class DemoComponent { @@ -168,10 +177,13 @@ Another frequent usecase is **loading dependent scripts in order**: import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core'; import { concat } from 'rxjs'; import { inject } from '@angular/core'; +import { AsyncPipe } from '@angular/common'; @Component({ template: ` - + @if (scriptsLoaded$ | async) { + + } ` }) class DemoComponent { diff --git a/docs/en/framework/ui/angular/list-service.md b/docs/en/framework/ui/angular/list-service.md index f8b0a42249..dab58d0e33 100644 --- a/docs/en/framework/ui/angular/list-service.md +++ b/docs/en/framework/ui/angular/list-service.md @@ -126,7 +126,7 @@ Then you can place inputs to the HTML: ## Usage with Observables -You may use observables in combination with [AsyncPipe](https://angular.io/guide/observables-in-angular#async-pipe) of Angular instead. Here are some possibilities: +You may use observables in combination with [AsyncPipe](https://angular.dev/ecosystem/rxjs-interop) of Angular instead. Here are some possibilities: ```js book$ = this.list.hookToQuery(query => this.bookService.getListByInput(query)); diff --git a/docs/en/framework/ui/angular/localization.md b/docs/en/framework/ui/angular/localization.md index 034e77abf0..9f3122529c 100644 --- a/docs/en/framework/ui/angular/localization.md +++ b/docs/en/framework/ui/angular/localization.md @@ -220,7 +220,7 @@ As of v2.9 ABP supports RTL. If you are generating a new project with v2.9 and a ### Step 1. Create Chunks for Bootstrap LTR and RTL -Find [styles configuration in angular.json](https://angular.io/guide/workspace-config#style-script-config) and make sure the chunks in your project has `bootstrap-rtl.min` and `bootstrap-ltr.min` as shown below. +Find [styles configuration in angular.json](https://angular.dev/reference/configs/workspace-config) and make sure the chunks in your project has `bootstrap-rtl.min` and `bootstrap-ltr.min` as shown below. ```json { @@ -279,7 +279,7 @@ export class AppComponent {} ## Registering a New Locale -Since ABP has more than one language, Angular locale files load lazily using [Webpack's import function](https://webpack.js.org/api/module-methods/#import-1) to avoid increasing the bundle size and to register the Angular core using the [`registerLocaleData`](https://angular.io/api/common/registerLocaleData) function. The chunks to be included in the bundle are specified by the [Webpack's magic comments](https://webpack.js.org/api/module-methods/#magic-comments) as hard-coded. Therefore a `registerLocale` function that returns Webpack `import` function must be passed to `provideAbpCore(withOptions({...}))`. +Since ABP has more than one language, Angular locale files load lazily using [Webpack's import function](https://webpack.js.org/api/module-methods/#import-1) to avoid increasing the bundle size and to register the Angular core using the [`registerLocaleData`](https://angular.dev/api/common/registerLocaleData) function. The chunks to be included in the bundle are specified by the [Webpack's magic comments](https://webpack.js.org/api/module-methods/#magic-comments) as hard-coded. Therefore a `registerLocale` function that returns Webpack `import` function must be passed to `provideAbpCore(withOptions({...}))`. ### registerLocaleFn diff --git a/docs/en/framework/ui/angular/page-toolbar-extensions.md b/docs/en/framework/ui/angular/page-toolbar-extensions.md index 8214c19889..30c5c9813d 100644 --- a/docs/en/framework/ui/angular/page-toolbar-extensions.md +++ b/docs/en/framework/ui/angular/page-toolbar-extensions.md @@ -215,7 +215,7 @@ It has the following properties: } ``` -- **getInjected** is the equivalent of [Injector.get](https://angular.io/api/core/Injector#get). You can use it to reach injected dependencies of `PageToolbarComponent`, including, but not limited to, its parent component. +- **getInjected** is the equivalent of [Injector.get](https://angular.dev/api/core/Injector). You can use it to reach injected dependencies of `PageToolbarComponent`, including, but not limited to, its parent component. ```js { diff --git a/docs/en/framework/ui/angular/permission-management-component-replacement.md b/docs/en/framework/ui/angular/permission-management-component-replacement.md index f91fbb42d9..7ee3022b80 100644 --- a/docs/en/framework/ui/angular/permission-management-component-replacement.md +++ b/docs/en/framework/ui/angular/permission-management-component-replacement.md @@ -334,7 +334,7 @@ Open the generated `permission-management.component.html` in `src/app/permission ```html - + @if (data.entityDisplayName) {

    {%{{{ 'AbpPermissionManagement::Permissions' | abpLocalization }}}%} - @@ -360,19 +360,22 @@ Open the generated `permission-management.component.html` in `src/app/permission
    @@ -393,34 +396,36 @@ Open the generated `permission-management.component.html` in `src/app/permission }}}%}
    -
    - - -
    + @for (permission of selectedGroupPermissions; track permission.name; let i = $index) { +
    + + +
    + }
    @@ -433,7 +438,7 @@ Open the generated `permission-management.component.html` in `src/app/permission 'AbpIdentity::Save' | abpLocalization }}}%} - + } ``` diff --git a/docs/en/framework/ui/angular/pwa-configuration.md b/docs/en/framework/ui/angular/pwa-configuration.md index 2c042e9d77..ea63f60b96 100644 --- a/docs/en/framework/ui/angular/pwa-configuration.md +++ b/docs/en/framework/ui/angular/pwa-configuration.md @@ -37,7 +37,7 @@ Here is the output of the command: So, Angular CLI updates some files and add a few others: -- **ngsw-config.json** is where the [service worker configuration](https://angular.io/guide/service-worker-config) is placed. Not all PWAs have this file. It is specific to Angular. +- **ngsw-config.json** is where the [service worker configuration](https://angular.dev/ecosystem/service-workers/config) is placed. Not all PWAs have this file. It is specific to Angular. - **manifest.webmanifest** is a [web app manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) and provides information about your app in JSON format. - **icons** are placeholder icons that are referred to in your web app manifest. We will replace these in a minute. - **angular.json** has following modifications: @@ -45,7 +45,7 @@ So, Angular CLI updates some files and add a few others: - `serviceWorker` is `true` in production build. - `ngswConfigPath` refers to _ngsw-config.json_. - **package.json** has _@angular/service-worker_ as a new dependency. -- **app.config.ts** imports `ServiceWorkerModule` and registers a service worker filename. +- **app.config.ts** The `provideServiceWorker` provider is imported to register the service worker script. - **index.html** has following modifications: - A `` element that refers to _manifest.webmanifest_. - A `` tag that sets a theme color. @@ -342,8 +342,8 @@ Open _ngsw-config.json_ file and replace its content with this: } ``` -In case you want to cache other static files, please refer to the [service worker configuration document](https://angular.io/guide/service-worker-config#assetgroups) on Angular.io. +In case you want to cache other static files, please refer to the [service worker configuration document](https://angular.dev/ecosystem/service-workers/config) on Angular.dev. ### 3.2 Set Data Groups -This part is unique to your project. We recommend being very careful about which endpoints to cache. Please refer to [service worker configuration document](https://angular.io/guide/service-worker-config#datagroups) on Angular.io for details. +This part is unique to your project. We recommend being very careful about which endpoints to cache. Please refer to [service worker configuration document](https://angular.dev/ecosystem/service-workers/config) on Angular.dev for details. diff --git a/docs/en/framework/ui/angular/quick-start.md b/docs/en/framework/ui/angular/quick-start.md index f5bc88329f..0e48f0190e 100644 --- a/docs/en/framework/ui/angular/quick-start.md +++ b/docs/en/framework/ui/angular/quick-start.md @@ -84,10 +84,10 @@ Now let us take a look at the contents of the source folder. - **app.config.ts** is the [root configuration](https://angular.dev/api/platform-browser/bootstrapApplication) that includes information about how parts of your application are related and what to run at the initiation of your application. - **route.provider.ts** is used for [modifying the menu](../angular/modifying-the-menu.md). - **assets** is for static files. A file (e.g. an image) placed in this folder will be available as is when the application is served. -- **environments** includes one file per environment configuration. There are two configurations by default, but you may always introduce another one. These files are directly referred to in _angular.json_ and help you have different builds and application variables. Please refer to [configuring Angular application environments](https://angular.io/guide/build#configuring-application-environments) for details. +- **environments** includes one file per environment configuration. There are two configurations by default, but you may always introduce another one. These files are directly referred to in _angular.json_ and help you have different builds and application variables. Please refer to [configuring Angular application environments](https://angular.dev/tools/cli/environments) for details. - **index.html** is the HTML page served to visitors and will contain everything required to run your application. Servers should be configured to redirect every request to this page so that the Angular router can take over. Do not worry about how to add JavaScript and CSS files to it, because Angular CLI will do it automatically. - **main.ts** bootstraps and configures Angular application to run in the browser. It is production-ready, so forget about it. -- **polyfill.ts** is where you can add polyfills if you want to [support legacy browsers](https://angular.io/guide/browser-support). +- **polyfill.ts** is where you can add polyfills if you want to [support legacy browsers](https://angular.dev/reference/versions). - **style.scss** is the default entry point for application styles. You can change this or add new entry points in _angular.json_. - **test.ts** helps the unit test runner discover and bootstrap spec files. @@ -106,11 +106,11 @@ Now that you know about the files and folders, we can get the application up and New ABP Angular project home page -You may modify the behavior of the **start script** (in the package.json file) by changing the parameters passed to the `ng serve` command. For instance, if you do not want a browser window to open next time you run the script, remove `--open` from the end of it. Please check [ng serve documentation](https://angular.io/cli/serve) for all available options. +You may modify the behavior of the **start script** (in the package.json file) by changing the parameters passed to the `ng serve` command. For instance, if you do not want a browser window to open next time you run the script, remove `--open` from the end of it. Please check [ng serve documentation](https://angular.dev/cli/serve) for all available options. ### Angular Live Development Server -The development server of Angular is based on [Webpack DevServer](https://webpack.js.org/configuration/dev-server/). It tracks changes to source files and syncs the browser window after an incremental re-compilation every time [2](#f-dev-server) you make one. Your experience will be like this: +The development server runs via Angular's Application Builder and uses a fast, modern dev server under the hood. It tracks changes to source files and refreshes the browser after an incremental compilation every time [2](#f-dev-server) you make one. Your experience will be like this: Angular Live Development Server compiles again on template change and removes a button from the page displayed by the browser. @@ -122,13 +122,13 @@ Please keep in mind that you should not use this server in production. To provid 1 _If you see the error above when you run the Angular app, your browser might be blocking access to the API because of the self-signed certificate. Visit that address and allow access to it (once). When you see the Swagger interface, you are good to go._ [↩](#a-certificate-error) -2 _Sometimes, depending on the file changed, Webpack may miss the change and cannot reflect it in the browser. For example, tsconfig files are not being tracked. In such a case, please restart the development server._ [↩](#a-dev-server) +2 _Sometimes, depending on the file changed, the development server may not pick up the change (for example, certain configuration files like tsconfig are not watched). In such a case, please restart the development server._ [↩](#a-dev-server) --- ## How to Build the Angular Application -An Angular application can have multiple [build targets](https://angular.io/guide/glossary#target), i.e. **configurations in angular.json** which define how [Architect](https://angular.io/guide/glossary#architect) will build applications and libraries. Usually, each build configuration has a separate environment variable file. Currently, the project has two: One for development and one for production. +An Angular application can have multiple build targets, i.e. **configurations in angular.json** which define how [Architect](https://angular.dev/reference/configs/workspace-config) will build applications and libraries. Usually, each build configuration has a separate environment variable file. Currently, the project has two: One for development and one for production. ```js // this is what environment variables look like @@ -161,7 +161,7 @@ export const environment = { } as Config.Environment; ``` -When you run the development server, variables defined in _environment.ts_ take effect. Similarly, in production mode, the default environment is replaced by _environment.prod.ts_ and completely different variables become effective. You may even [create a new build configuration](https://angular.dev/reference/configs/workspace-config#alternate-build-configurations) and set [file replacements](https://angular.io/guide/build#configure-target-specific-file-replacements) to use a completely new environment. For now, we will start a production build: +When you run the development server, variables defined in _environment.ts_ take effect. Similarly, in production mode, the default environment is replaced by _environment.prod.ts_ and completely different variables become effective. You may even [create a new build configuration](https://angular.dev/reference/configs/workspace-config#alternate-build-configurations) and set [file replacements](https://angular.dev/tools/cli/environments) to use a completely new environment. For now, we will start a production build: 1. Open your terminal and navigate to the root Angular folder. 2. Run `yarn` or `npm install` if you have not installed dependencies already. @@ -180,18 +180,18 @@ Angular web applications run on the browser and require no server except for a [ ```shell # please replace MyProjectName with your project name -npx servor dist/MyProjectName index.html 4200 --browse +npx servor dist/MyProjectName/browser index.html 4200 --browse ``` This command will download and start a simple static server, a browser window at `http://localhost:4200` will open, and the compiled output of your project will be served. Of course, you need your application to run on an optimized web server and become available to everyone. This is quite straight-forward: -1. Create a new static web server instance. You can use a service like [Azure App Service](https://azure.microsoft.com/en-us/services/app-service/web/), [Firebase](https://firebase.google.com/docs/hosting), [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/), or even [GitHub Pages](https://angular.io/guide/deployment#deploy-to-github-pages). Another option is maintaining own web server with [NGINX](https://www.nginx.com/), [IIS](https://www.iis.net/), [Apache HTTP Server](https://httpd.apache.org/), or equivalent. +1. Create a new static web server instance. You can use a service like [Azure App Service](https://azure.microsoft.com/en-us/services/app-service/web/), [Firebase](https://firebase.google.com/docs/hosting), [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/), or even [GitHub Pages](https://angular.dev/tools/cli/deployment). Another option is maintaining own web server with [NGINX](https://www.nginx.com/), [IIS](https://www.iis.net/), [Apache HTTP Server](https://httpd.apache.org/), or equivalent. 2. Copy the files from `dist/MyProjectName` [1](#f-dist-folder-name) to a publicly served destination on the server via CLI of the service provider, SSH, or FTP (whichever is available). This step would be defined as a job if you have a CI/CD flow. -3. [Configure the server](https://angular.io/guide/deployment#server-configuration) to redirect all requests to the _index.html_ file. Some services do that automatically. Others require you [to add a file to the bundle via assets](https://angular.io/guide/workspace-config#assets-configuration) which describes the server how to do the redirections. Occasionally, you may need to do manual configuration. +3. [Configure the server](https://angular.dev/tools/cli/deployment#server-configuration) to redirect all requests to the _index.html_ file. Some services do that automatically. Others require you [to add a file to the bundle via assets](https://angular.dev/reference/configs/workspace-config) which describes the server how to do the redirections. Occasionally, you may need to do manual configuration. -In addition, you can [deploy your application to certain targets using the Angular CLI](https://angular.io/guide/deployment#automatic-deployment-with-the-cli). Here are some deploy targets: +In addition, you can [deploy your application to certain targets using the Angular CLI](https://angular.dev/tools/cli/deployment#automatic-deployment-with-the-cli). Here are some deploy targets: - [Azure](https://github.com/Azure/ng-deploy-azure#readme) - [Firebase](https://github.com/angular/angularfire#readme) diff --git a/docs/en/framework/ui/angular/router-events.md b/docs/en/framework/ui/angular/router-events.md index b7b760ae3f..5185c9c922 100644 --- a/docs/en/framework/ui/angular/router-events.md +++ b/docs/en/framework/ui/angular/router-events.md @@ -7,7 +7,7 @@ # Router Events Simplified -`RouterEvents` is a utility service for filtering specific router events and reacting to them. Please see [this page in Angular docs](https://angular.io/api/router/Event) for available router events. +`RouterEvents` is a utility service for filtering specific router events and reacting to them. Please see [this page in Angular docs](https://angular.dev/api/router/Event) for available router events. ## Benefit diff --git a/docs/en/framework/ui/angular/service-proxies.md b/docs/en/framework/ui/angular/service-proxies.md index 51a6c4f5b4..c816158f77 100644 --- a/docs/en/framework/ui/angular/service-proxies.md +++ b/docs/en/framework/ui/angular/service-proxies.md @@ -114,7 +114,7 @@ export class BookComponent implements OnInit { } ``` -The Angular compiler removes the services that have not been injected anywhere from the final output. See the [tree-shakable providers documentation](https://angular.io/guide/dependency-injection-providers#tree-shakable-providers). +The Angular compiler removes the services that have not been injected anywhere from the final output. See the [tree-shakable providers documentation](https://angular.dev/guide/di/defining-dependency-providers). ### Models @@ -152,9 +152,11 @@ export class BookComponent implements OnInit { ``` diff --git a/docs/en/framework/ui/angular/subscription-service.md b/docs/en/framework/ui/angular/subscription-service.md index b04a3dbf58..c64edb9fe0 100644 --- a/docs/en/framework/ui/angular/subscription-service.md +++ b/docs/en/framework/ui/angular/subscription-service.md @@ -7,7 +7,7 @@ # Managing RxJS Subscriptions -`SubscriptionService` is a utility service to provide an easy unsubscription from RxJS observables in Angular components and directives. Please see [why you should unsubscribe from observables on instance destruction](https://angular.io/guide/lifecycle-hooks#cleaning-up-on-instance-destruction). +`SubscriptionService` is a utility service to provide an easy unsubscription from RxJS observables in Angular components and directives. Please see [why you should unsubscribe from observables on instance destruction](https://angular.dev/guide/components/lifecycle). ## Getting Started diff --git a/docs/en/framework/ui/angular/testing.md b/docs/en/framework/ui/angular/testing.md index c0d5ff312c..ab215f7eba 100644 --- a/docs/en/framework/ui/angular/testing.md +++ b/docs/en/framework/ui/angular/testing.md @@ -7,7 +7,7 @@ # Unit Testing Angular UI -ABP Angular UI is tested like any other Angular application. So, [the guide here](https://angular.io/guide/testing) applies to ABP too. That said, we would like to point out some **unit testing topics specific to ABP Angular applications**. +ABP Angular UI is tested like any other Angular application. So, [the guide here](https://angular.dev/guide/testing) applies to ABP too. That said, we would like to point out some **unit testing topics specific to ABP Angular applications**. ## Setup diff --git a/docs/en/framework/ui/angular/theming.md b/docs/en/framework/ui/angular/theming.md index cb6f8fe8b0..1351a02f33 100644 --- a/docs/en/framework/ui/angular/theming.md +++ b/docs/en/framework/ui/angular/theming.md @@ -81,8 +81,8 @@ You can run the following command in **Angular** project directory to copy the s ### Global/Component Styles -Angular can bundle global style files and component styles with components. -See the [component styles](https://angular.io/guide/component-styles) guide on Angular documentation for more information. +Angular can bundle global style files and component styles with components. +See the [component styles](https://angular.dev/guide/components/styling) guide on Angular documentation for more information. ### Layout Parts @@ -238,8 +238,10 @@ import { Router } from '@angular/router'; selector: 'abp-current-user-test', template: ` - + @if (data.textTemplate.icon){ + {%{{{ data.textTemplate.text | abpLocalization }}}%} + } `, }) diff --git a/docs/en/framework/ui/angular/track-by-service.md b/docs/en/framework/ui/angular/track-by-service.md index 046935e5b6..15cdd9577f 100644 --- a/docs/en/framework/ui/angular/track-by-service.md +++ b/docs/en/framework/ui/angular/track-by-service.md @@ -5,9 +5,9 @@ } ``` -# Easy *ngFor trackBy +# Easy @for() track -`TrackByService` is a utility service to provide an easy implementation for one of the most frequent needs in Angular templates: `TrackByFunction`. Please see [this page in Angular docs](https://angular.io/guide/template-syntax#ngfor-with-trackby) for its purpose. +`TrackByService` is a utility service to provide an easy implementation for one of the most frequent needs in Angular templates: `TrackByFunction`. Please see [this page in Angular docs](https://angular.dev/guide/templates/control-flow) for its purpose. @@ -54,8 +54,9 @@ You can use `by` to get a `TrackByFunction` that tracks the iterated object base ```html - -
    {%{{{ item.name }}}%}
    +@for (item of list; track: track.by('id')) { +
    {%{{{ item.name }}}%}
    +} ``` @@ -67,11 +68,11 @@ import { trackBy } from "@abp/ng.core"; @Component({ template: ` -
    - {%{{{ item.name }}}%} -
    + @for (item of list; track: trackById) { +
    + {%{{{ item.name }}}%} +
    + } `, }) class DemoComponent { @@ -89,12 +90,11 @@ You can use `byDeep` to get a `TrackByFunction` that tracks the iterated object ```html - -
    - {%{{{ item.tenant.name }}}%} -
    +@for (item of list; track: track.byDeep('tenant', 'account', 'id')) { +
    + {%{{{ item.tenant.name }}}%} +
    +} ``` @@ -106,11 +106,11 @@ import { trackByDeep } from "@abp/ng.core"; @Component({ template: ` -
    - {%{{{ item.name }}}%} + @for (item of list; track: trackByTenantAccountId) { +
    + {%{{{ item.name }}}%}
    + } `, }) class DemoComponent { diff --git a/docs/en/release-info/migration-guides/abp-5-0-angular.md b/docs/en/release-info/migration-guides/abp-5-0-angular.md index f6abcf10f6..66627b1e8a 100644 --- a/docs/en/release-info/migration-guides/abp-5-0-angular.md +++ b/docs/en/release-info/migration-guides/abp-5-0-angular.md @@ -104,7 +104,7 @@ If you don't want to use the NGXS, you should remove all NGXS related imports, i ## @angular/localize package -[`@angular/localize`](https://angular.io/api/localize) dependency has been removed from `@abp/ng.core` package. The package must be installed in your app. Run the following command to install: +[`@angular/localize`](https://angular.dev/guide/i18n/add-package) dependency has been removed from `@abp/ng.core` package. The package must be installed in your app. Run the following command to install: ```bash npm install @angular/localize@12 diff --git a/docs/en/solution-templates/layered-web-application/web-applications.md b/docs/en/solution-templates/layered-web-application/web-applications.md index 58cc3af078..8400a6dfbe 100644 --- a/docs/en/solution-templates/layered-web-application/web-applications.md +++ b/docs/en/solution-templates/layered-web-application/web-applications.md @@ -120,7 +120,7 @@ The required style files are added to the `styles` array in `angular.json`. `App You should create your tests in the same folder as the file you want to test. -See the [testing document](https://angular.io/guide/testing). +See the [testing document](https://angular.dev/guide/testing). ### Depended Packages diff --git a/docs/en/suite/editing-templates.md b/docs/en/suite/editing-templates.md index 9c859ba0de..354adc8ead 100644 --- a/docs/en/suite/editing-templates.md +++ b/docs/en/suite/editing-templates.md @@ -27,7 +27,7 @@ There's a search box on the templates page. To find the related template, pick a There's a naming convention for the template files. * If the template name has `Server` prefix, it's used for backend code like repositories, application services, localizations, controllers, permissions, mappings, unit tests. -* If the template name has `Frontend.Angular` prefix, it's used for Angular code generation. The Angular code is being generated via [Angular Schematics](https://angular.io/guide/schematics). +* If the template name has `Frontend.Angular` prefix, it's used for Angular code generation. The Angular code is being generated via [Angular Schematics](https://angular.dev/tools/cli/schematics). * If the template name has `Frontend.Mvc` prefix, it's used for razor pages, menus, JavaScript, CSS files. * If the template name has `Frontend.Blazor` prefix, it's used for razor components. diff --git a/docs/en/suite/generating-crud-page.md b/docs/en/suite/generating-crud-page.md index cc9df3ee32..afc2536709 100644 --- a/docs/en/suite/generating-crud-page.md +++ b/docs/en/suite/generating-crud-page.md @@ -294,7 +294,7 @@ There are some adjustments you may need to make before generating CRUD pages for - Check if your environment variables have `rootNamespace` defined as explained [here](../framework/ui/angular/service-proxies.md#angular-project-configuration). -- Check if your [workspace configuration](https://angular.io/guide/workspace-config) satisfies one of the following. Examples assume your solution namespace is `BookStore`, `Acme.BookStore`, or `Acme.Retail.BookStore`. +- Check if your [workspace configuration](https://angular.dev/reference/configs/workspace-config) satisfies one of the following. Examples assume your solution namespace is `BookStore`, `Acme.BookStore`, or `Acme.Retail.BookStore`. - Project key is in pascal case. E.g. `BookStore`. - Project key is in camel case. E.g. `bookStore`. - Project key is in kebab case. E.g. `book-store`. diff --git a/docs/en/suite/solution-structure.md b/docs/en/suite/solution-structure.md index d36ea35e7f..4b15be2f07 100644 --- a/docs/en/suite/solution-structure.md +++ b/docs/en/suite/solution-structure.md @@ -303,7 +303,7 @@ Lepton theme uses two logos for each style. You can change these logos with your You should create your tests in the same folder as the file file you want to test. -See the [testing document](https://angular.io/guide/testing). +See the [testing document](https://angular.dev/guide/testing). ### Depended Packages diff --git a/docs/en/tutorials/book-store/part-03.md b/docs/en/tutorials/book-store/part-03.md index a2bac2110e..73b2daea4e 100644 --- a/docs/en/tutorials/book-store/part-03.md +++ b/docs/en/tutorials/book-store/part-03.md @@ -670,7 +670,7 @@ You can open your browser and click the **New book** button to see the new modal ### Create a Reactive Form -[Reactive forms](https://angular.io/guide/reactive-forms) provide a model-driven approach to handling form inputs whose values change over time. +[Reactive forms](https://angular.dev/guide/forms/reactive-forms) provide a model-driven approach to handling form inputs whose values change over time. Open `/src/app/book/book.component.ts` and replace the content as below: @@ -742,7 +742,7 @@ export class BookComponent implements OnInit { * Imported `FormGroup`, `FormBuilder` and `Validators` from `@angular/forms`. * Added a `form: FormGroup` property. * Added a `bookTypes` property as a list of `BookType` enum members. That will be used in form options. -* Injected the `FormBuilder` with the inject function. [FormBuilder](https://angular.io/api/forms/FormBuilder) provides convenient methods for generating form controls. It reduces the amount of boilerplate that is needed to build complex forms. +* Injected the `FormBuilder` with the inject function. [FormBuilder](https://angular.dev/api/forms/FormBuilder) provides convenient methods for generating form controls. It reduces the amount of boilerplate that is needed to build complex forms. * Added a `buildForm` method at the end of the file and executed the `buildForm()` in the `createBook` method. * Added a `save` method.