Merge pull request #20629 from abpframework/fahri/fix-document-1.0

fix document 1.0

docs/en/Tutorials/Angular/Part-I.md

@@ -608,6 +608,7 @@ export class BookListComponent implements OnInit {
 
 Replace `book-list.component.html` content as shown below:
 
+{%{
 ```html
 <div id="wrapper" class="card">
   <div class="card-header">
@@ -631,16 +632,17 @@ Replace `book-list.component.html` content as shown below:
       </ng-template>
       <ng-template pTemplate="body" let-data>
         <tr>
-          <td>{{ data.name }}</td>
-          <td>{{ booksType[data.type] }}</td>
-          <td>{{ data.publishDate | date }}</td>
-          <td>{{ data.price }}</td>
+          <td>{{ data.name }} </td>
+          <td>{{ booksType[data.type] }} </td>
+          <td>{{ data.publishDate | date }} </td>
+          <td>{{ data.price }} </td>
         </tr>
       </ng-template>
     </p-table>
   </div>
 </div>
 ```
+}%}
 
 > We've used [PrimeNG table](https://www.primefaces.org/primeng/#/table) in this component.
 

docs/en/Tutorials/Angular/Part-II.md

@@ -427,6 +427,7 @@ save() {
 
 Open the `book-list.component.html` and add modify the `p-table` as shown below:
 
+{%{
 ```html
 <p-table [value]="books$ | async" [loading]="loading" [paginator]="true" [rows]="10">
   <ng-template pTemplate="header">
@@ -463,6 +464,7 @@ Open the `book-list.component.html` and add modify the `p-table` as shown belo
   </ng-template>
 </p-table>
 ```
+}%}
 
 - Added a `th` for the "Actions" column.
 - Added `button` with `ngbDropdownToggle` to open actions when clicked the button.
@@ -475,11 +477,13 @@ The final UI looks like:
 
 Update the modal header to change the title based on the current operation:
 
+{%{
 ```html
 <ng-template #abpHeader>
   <h3>{{ selectedBook.id ? 'Edit' : 'New Book' }}</h3>
 </ng-template>
 ```
+}%}
 
 ![actions-buttons](images/bookstore-edit-modal.png)