From acde471634452a953a027dc57c5119527f027af2 Mon Sep 17 00:00:00 2001
From: Fahri Gedik <fahrican9978@gmail.com>
Date: Mon, 26 Aug 2024 14:50:32 +0300
Subject: [PATCH 1/2] Fix Document

---
 docs/en/Tutorials/Angular/Part-I.md | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/docs/en/Tutorials/Angular/Part-I.md b/docs/en/Tutorials/Angular/Part-I.md
index 88b5c8539e..6654694abe 100644
--- a/docs/en/Tutorials/Angular/Part-I.md
+++ b/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.
 

From f0608027b6f49fd9a50567bd5c20b4255385d491 Mon Sep 17 00:00:00 2001
From: Fahri Gedik <fahrican9978@gmail.com>
Date: Mon, 26 Aug 2024 14:56:01 +0300
Subject: [PATCH 2/2] Fix Document

---
 docs/en/Tutorials/Angular/Part-II.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/en/Tutorials/Angular/Part-II.md b/docs/en/Tutorials/Angular/Part-II.md
index ed6afcb947..908bca63e6 100644
--- a/docs/en/Tutorials/Angular/Part-II.md
+++ b/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)