diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index 10e2251b8e..46201f685e 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -1641,7 +1641,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 fbb0c4537f..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) {
    + }
  • - - {%{{{ 'AbpAccount::Login' | abpLocalization }}}%} - + @if ((currentUser$ | async)?.isAuthenticated) { + } @else { + + + {%{{{ 'AbpAccount::Login' | abpLocalization }}}%} + + + }
    • ``` diff --git a/docs/en/framework/ui/angular/form-validation.md b/docs/en/framework/ui/angular/form-validation.md index 23ed43938b..b4ed31842d 100644 --- a/docs/en/framework/ui/angular/form-validation.md +++ b/docs/en/framework/ui/angular/form-validation.md @@ -146,12 +146,12 @@ import { ChangeDetectionStrategy, Component } from "@angular/core"; selector: "app-validation-error", imports:[CommonModule, LocalizationPipe], template: ` - @for (error of abpErrors; track $index) -
    - {%{{{ error.message | abpLocalization: error.interpoliteParams }}}%} -
    + @for (error of abpErrors; track $index){ +
    + {%{{{ error.message | abpLocalization: error.interpoliteParams }}}%} +
    } `, changeDetection: ChangeDetectionStrategy.OnPush, @@ -251,7 +251,7 @@ buildForm() { {%{{ 'AbpIdentity::UserInformations' | abpLocalization }}%} - + @@ -264,7 +264,7 @@ buildForm() { + /> } 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/permission-management-component-replacement.md b/docs/en/framework/ui/angular/permission-management-component-replacement.md index edbf8a5d82..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 }}}%} - @@ -362,17 +362,18 @@ Open the generated `permission-management.component.html` in `src/app/permission @@ -413,15 +414,15 @@ Open the generated `permission-management.component.html` in `src/app/permission class="custom-control-label" [attr.for]="permission.name" (click)="onClickCheckbox(permission, permissionCheckbox.value)" - >{%{{{ permission.displayName }}}%} - + > + {%{{{ permission.displayName }}}%} + @if (!hideBadges) { @for (provider of permission.grantedProviders; track provider.providerKey) { - {%{{{ provider.providerName }}}%}: {%{{{ provider.providerKey }}}%} + + {%{{{ provider.providerName }}}%}: {%{{{ provider.providerKey }}}%} + } - + } } @@ -437,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/theming.md b/docs/en/framework/ui/angular/theming.md index c7ccf1a159..1351a02f33 100644 --- a/docs/en/framework/ui/angular/theming.md +++ b/docs/en/framework/ui/angular/theming.md @@ -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 d91f610c55..15cdd9577f 100644 --- a/docs/en/framework/ui/angular/track-by-service.md +++ b/docs/en/framework/ui/angular/track-by-service.md @@ -5,7 +5,7 @@ } ``` -# 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.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/tutorials/book-store/part-03.md b/docs/en/tutorials/book-store/part-03.md index adedee4214..73b2daea4e 100644 --- a/docs/en/tutorials/book-store/part-03.md +++ b/docs/en/tutorials/book-store/part-03.md @@ -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.