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 `<some-component>` 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 `<some-component>` 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';
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 `<some-component>` 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 `<some-component>` 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';
`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
<!-- template of DemoComponent -->
<div*ngFor="let item of list; trackBy: track.by('id')">{%{{{ item.name }}}%}</div>
@for (item of list; track: track.by('id')) {
<div>{%{{{ item.name }}}%}</div>
}
```
@ -67,11 +68,11 @@ import { trackBy } from "@abp/ng.core";
@Component({
template: `
<div
*ngFor="let item of list; trackBy: trackById"
>
{%{{{ item.name }}}%}
</div>
@for (item of list; track: trackById) {
<div>
{%{{{ item.name }}}%}
</div>
}
`,
})
class DemoComponent {
@ -89,12 +90,11 @@ You can use `byDeep` to get a `TrackByFunction` that tracks the iterated object
```html
<!-- template of DemoComponent -->
<div
*ngFor="let item of list; trackBy: track.byDeep('tenant', 'account', 'id')"
>
{%{{{ item.tenant.name }}}%}
</div>
@for (item of list; track: track.byDeep('tenant', 'account', 'id')) {
<div>
{%{{{ item.tenant.name }}}%}
</div>
}
```
@ -106,11 +106,11 @@ import { trackByDeep } from "@abp/ng.core";
@Component({
template: `
<div
*ngFor="let item of list; trackBy: trackByTenantAccountId"
>
{%{{{ item.name }}}%}
@for (item of list; track: trackByTenantAccountId) {
@ -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.
sumeyye
2 months ago