From e468439bf8a849fd2c66e74c17e2034b92da1e59 Mon Sep 17 00:00:00 2001
From: sumeyye <sum.the.developer@gmail.com>
Date: Thu, 20 Nov 2025 16:12:30 +0300
Subject: [PATCH] update: small fixes for the migration

---
 docs/en/tutorials/book-store/part-02.md |  4 ++--
 docs/en/tutorials/book-store/part-03.md | 11 +++++++----
 docs/en/tutorials/book-store/part-09.md |  4 ++--
 docs/en/tutorials/book-store/part-10.md | 10 ++++++----
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/docs/en/tutorials/book-store/part-02.md b/docs/en/tutorials/book-store/part-02.md
index 50e3cf76c6..1fe21c2848 100644
--- a/docs/en/tutorials/book-store/part-02.md
+++ b/docs/en/tutorials/book-store/part-02.md
@@ -357,7 +357,7 @@ The generated code places the new route definition to the `src/app/app.routes.ts
 ````js
 export const routes: Routes = [
   // other route definitions...
-  { path : 'books', loadChildren: () => import('./book/book.component').then(c => c.BookComponent) },
+  { path : 'books', loadComponent: () => import('./book/book.component').then(c => c.BookComponent) },
 ];
 ````
 
@@ -469,7 +469,7 @@ Open the `/src/app/book/book.component.html` and replace the content as shown be
   </div>
   <div class="card-body">
     <ngx-datatable [rows]="book.items" [count]="book.totalCount" [list]="list" default>
-      <ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name"></ngx-datatable-column>
+      <ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name" />
       <ngx-datatable-column [name]="'::Type' | abpLocalization" prop="type">
         <ng-template let-row="row" ngx-datatable-cell-template>
           {%{{{ '::Enum:BookType.' + row.type | abpLocalization }}}%}
diff --git a/docs/en/tutorials/book-store/part-03.md b/docs/en/tutorials/book-store/part-03.md
index 6b8112b59e..a2bac2110e 100644
--- a/docs/en/tutorials/book-store/part-03.md
+++ b/docs/en/tutorials/book-store/part-03.md
@@ -742,8 +742,8 @@ 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 with the `FormBuilder` inject function.. [FormBuilder](https://angular.io/api/forms/FormBuilder) provides convenient methods for generating form controls. It reduces the amount of boilerplate needed to build complex forms.
-* Added a `buildForm` method to the end of the file and executed  the `buildForm()` in the `createBook` method.
+* 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.
+* Added a `buildForm` method at the end of the file and executed  the `buildForm()` in the `createBook` method.
 * Added a `save` method.
 
 Open `/src/app/book/book.component.html` and replace `<ng-template #abpBody> </ng-template>`  with the following code part:
@@ -765,7 +765,11 @@ Open `/src/app/book/book.component.html` and replace `<ng-template #abpBody> </n
       <label for="book-type">Type</label><span> * </span>
       <select class="form-control" id="book-type" formControlName="type">
         <option [ngValue]="null">Select a book type</option>
-        <option [ngValue]="type.value" *ngFor="let type of bookTypes"> {%{{{ '::Enum:BookType.' + type.value | abpLocalization }}}%}</option>
+        @for (type of bookTypes; track type) {
+          <option [ngValue]="type.value"> 
+            {%{{{ '::Enum:BookType.' + type.value | abpLocalization }}}%}
+          </option>
+        }
       </select>
     </div>
 
@@ -815,7 +819,6 @@ import { NgbDateNativeAdapter, NgbDateAdapter, NgbDatepickerModule } from '@ng-b
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
 
 @Component({
-  standalone: true,
   selector: 'app-book',
   templateUrl: './book.component.html',
   styleUrls: ['./book.component.scss'],
diff --git a/docs/en/tutorials/book-store/part-09.md b/docs/en/tutorials/book-store/part-09.md
index 3839f319b2..b70fd3e875 100644
--- a/docs/en/tutorials/book-store/part-09.md
+++ b/docs/en/tutorials/book-store/part-09.md
@@ -747,13 +747,13 @@ Open the `/src/app/author/author.component.html` and replace the content as belo
           </div>
         </ng-template>
       </ngx-datatable-column>
-      <ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name"></ngx-datatable-column>
+      <ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name" />
       <ngx-datatable-column [name]="'::BirthDate' | abpLocalization">
         <ng-template let-row="row" ngx-datatable-cell-template>
           {%{{{ row.birthDate | date }}}%}
         </ng-template>
       </ngx-datatable-column>
-      <ngx-datatable-column [name]="'::ShortBio' | abpLocalization" prop="shortBio"></ngx-datatable-column>
+      <ngx-datatable-column [name]="'::ShortBio' | abpLocalization" prop="shortBio" />
     </ngx-datatable>
   </div>
 </div>
diff --git a/docs/en/tutorials/book-store/part-10.md b/docs/en/tutorials/book-store/part-10.md
index 5e0235ad14..e03ada5a96 100644
--- a/docs/en/tutorials/book-store/part-10.md
+++ b/docs/en/tutorials/book-store/part-10.md
@@ -970,7 +970,7 @@ Book list page change is trivial. Open the `/src/app/book/book.component.html` a
   [name]="'::Author' | abpLocalization"
   prop="authorName"
   [sortable]="false"
-></ngx-datatable-column>
+/>
 ````
 
 When you run the application, you can see the *Author* column on the table:
@@ -1098,9 +1098,11 @@ Open the `/src/app/book/book.component.html` and add the following form group ju
   <label for="author-id">Author</label><span> * </span>
   <select class="form-control" id="author-id" formControlName="authorId">
     <option [ngValue]="null">Select author</option>
-    <option [ngValue]="author.id" *ngFor="let author of authors$ | async">
-      {%{{{ author.name }}}%}
-    </option>
+    @for (author of authors$ | async; track author) {
+      <option [ngValue]="author.id">
+        {%{{{ author.name }}}%}
+      </option>
+    }
   </select>
 </div>
 ````