diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-event.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-event.md
index 26f0352cb..af873f3e1 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-event.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-event.md
@@ -56,7 +56,7 @@ The following example illustrates how to handle the `annotationAdd` event.
   </div>
 ```
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
 import {
   PdfViewerComponent,
@@ -79,7 +79,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: 'app.component.html',
+  templateUrl: 'app.html',
   encapsulation: ViewEncapsulation.None,
   providers: [
     LinkAnnotationService,
@@ -96,7 +96,7 @@ import {
     FormDesignerService,
     PageOrganizerService,
   ],
-  styleUrls: ['app.component.css'],
+  styleUrls: ['app.css'],
   standalone: true,
   imports: [PdfViewerModule],
 })
@@ -145,7 +145,7 @@ The following example illustrates how to handle the `annotationDoubleClick` even
   </div>
 ```
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
 import {
   PdfViewerComponent,
@@ -168,7 +168,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: 'app.component.html',
+  templateUrl: 'app.html',
   encapsulation: ViewEncapsulation.None,
   providers: [
     LinkAnnotationService,
@@ -185,7 +185,7 @@ import {
     FormDesignerService,
     PageOrganizerService,
   ],
-  styleUrls: ['app.component.css'],
+  styleUrls: ['app.css'],
   standalone: true,
   imports: [PdfViewerModule],
 })
@@ -214,7 +214,7 @@ export class AppComponent {
 The [annotationDoubleClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotationDoubleClickArgs/) event is triggered when an annotation is double-clicked.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 
 {% endhighlight %}
 {% endtabs %}
@@ -243,7 +243,7 @@ The following example illustrates how to handle the `annotationMouseLeave` event
 ```
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
 import {
   PdfViewerComponent,
@@ -265,7 +265,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: 'app.component.html',
+  templateUrl: 'app.html',
   encapsulation: ViewEncapsulation.None,
 
   providers: [
@@ -283,7 +283,7 @@ import {
     FormDesignerService,
     PageOrganizerService,
   ],
-  styleUrls: ['app.component.css'],
+  styleUrls: ['app.css'],
   standalone: true,
   imports: [PdfViewerModule],
 })
@@ -333,7 +333,7 @@ The following example illustrates how to handle the `annotationMouseover` event.
 </div>
 ```
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 
 import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import {
@@ -354,9 +354,9 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.css'],
   providers: [
     ToolbarService,
     MagnificationService,
@@ -416,7 +416,7 @@ The following example illustrates how to handle the `annotationMove` event.
 ```
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 
 import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import {
@@ -437,9 +437,9 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.css'],
   providers: [
     ToolbarService,
     MagnificationService,
@@ -499,7 +499,7 @@ The following example illustrates how to handle the `annotationMoving` event.
 ```
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 
 import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import {
@@ -520,9 +520,9 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.css'],
   providers: [
     ToolbarService,
     MagnificationService,
@@ -582,7 +582,7 @@ The following example illustrates how to handle the `annotationPropertiesChange`
 ```
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 
 import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import {
@@ -603,9 +603,9 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.css'],
   providers: [
     ToolbarService,
     MagnificationService,
@@ -667,7 +667,7 @@ The following example illustrates how to handle the `annotationRemove` event.
 ```
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 
 import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import {
@@ -688,9 +688,9 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.css'],
   providers: [
     ToolbarService,
     MagnificationService,
@@ -750,7 +750,7 @@ The following example illustrates how to handle the `annotationResize` event.
 ```
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 
 import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import {
@@ -771,9 +771,9 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.css'],
   providers: [
     ToolbarService,
     MagnificationService,
@@ -833,7 +833,7 @@ The following example illustrates how to handle the `annotationSelect` event.
 ```
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 
 import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import {
@@ -854,9 +854,9 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.css'],
   providers: [
     ToolbarService,
     MagnificationService,
@@ -916,7 +916,7 @@ The following example illustrates how to handle the `annotationUnselect` event.
 ```
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import {
   PdfViewerComponent,
@@ -936,9 +936,9 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.css'],
   providers: [
     ToolbarService,
     MagnificationService,
@@ -997,7 +997,7 @@ The following example illustrates how to handle the `beforeAddFreeText` event.
 ```
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import {
   PdfViewerComponent,
@@ -1017,9 +1017,9 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.css'],
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1083,7 +1083,7 @@ The following example illustrates how to handle the `addSignature` event.
 ```
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import {
   PdfViewerComponent,
@@ -1103,9 +1103,9 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.css'],
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1163,7 +1163,7 @@ The following example illustrates how to handle the `removeSignature` event.
 </div>
 ```
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import {
   PdfViewerComponent,
@@ -1183,9 +1183,9 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.css'],
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1244,7 +1244,7 @@ The following example illustrates how to handle the `resizeSignature` event.
 ```
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import {
   PdfViewerComponent,
@@ -1264,9 +1264,9 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.css'],
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1324,7 +1324,7 @@ The following example illustrates how to handle the `signaturePropertiesChange`
 </div>
 ```
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import {
   PdfViewerComponent,
@@ -1344,9 +1344,9 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.css'],
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1405,7 +1405,7 @@ The following example illustrates how to handle the `signatureSelect` event.
 ```
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import {
   PdfViewerComponent,
@@ -1425,9 +1425,9 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.css'],
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1487,7 +1487,7 @@ The following example illustrates how to handle the `signatureUnselect` event.
 ```
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import {
   PdfViewerComponent,
@@ -1507,9 +1507,9 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.css'],
   providers: [
     ToolbarService,
     MagnificationService,
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/line-angle-constraints.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/line-angle-constraints.md
index f3fbc5986..7791e2868 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/line-angle-constraints.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/line-angle-constraints.md
@@ -49,12 +49,12 @@ import { ClickEventArgs } from '@syncfusion/ej2-buttons';
 */
 @Component({
     selector: 'app-root',
-    templateUrl: 'app.component.html',
+    templateUrl: 'app.html',
     encapsulation: ViewEncapsulation.None,
     // tslint:disable-next-line:max-line-length
     providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService,
         TextSearchService, TextSelectionService, PrintService, AnnotationService, FormFieldsService, FormDesignerService,PageOrganizerService],
-    styleUrls: ['app.component.css'],
+    styleUrls: ['app.css'],
     standalone: true,
     imports: [
  
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/events.md b/Document-Processing/PDF/PDF-Viewer/angular/events.md
index 8dd049f3a..e863ccf15 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/events.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/events.md
@@ -77,7 +77,7 @@ The [bookmarkClick](https://ej2.syncfusion.com/angular/documentation/api/pdfview
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -95,7 +95,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -121,7 +121,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -141,7 +141,7 @@ The [toolbarClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewe
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -159,7 +159,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -185,7 +185,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -213,7 +213,7 @@ When it triggers
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -231,7 +231,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -261,7 +261,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -285,7 +285,7 @@ The [zoomChange](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -303,7 +303,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -329,7 +329,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -349,7 +349,7 @@ The [buttonFieldClick](https://ej2.syncfusion.com/angular/documentation/api/pdfv
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -367,7 +367,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -393,7 +393,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -413,7 +413,7 @@ The [commentAdd](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -431,7 +431,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -457,7 +457,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -477,7 +477,7 @@ The [commentDelete](https://ej2.syncfusion.com/angular/documentation/api/pdfview
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -495,7 +495,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -521,7 +521,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -541,7 +541,7 @@ The [commentEdit](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -559,7 +559,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -585,7 +585,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -605,7 +605,7 @@ The [commentSelect](https://ej2.syncfusion.com/angular/documentation/api/pdfview
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -623,7 +623,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -649,7 +649,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -669,7 +669,7 @@ The [commentStatusChanged](https://ej2.syncfusion.com/angular/documentation/api/
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -687,7 +687,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -713,7 +713,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -733,7 +733,7 @@ The [created](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#cr
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -751,7 +751,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -777,7 +777,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -799,13 +799,13 @@ The [customContextMenuBeforeOpen](https://ej2.syncfusion.com/angular/documentati
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component, ViewChild } from '@angular/core';
 import { PdfViewerComponent, ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -854,7 +854,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   #pdfViewer
   id="pdfViewer"
@@ -879,13 +879,13 @@ The [customContextMenuSelect](https://ej2.syncfusion.com/angular/documentation/a
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component, ViewChild } from '@angular/core';
 import { PdfViewerComponent, ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -934,7 +934,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   #pdfViewer
   id="pdfViewer"
@@ -956,13 +956,13 @@ The [documentLoad](https://ej2.syncfusion.com/angular/documentation/api/pdfviewe
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import { ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -988,7 +988,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -1008,13 +1008,13 @@ The [documentLoadFailed](https://ej2.syncfusion.com/angular/documentation/api/pd
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import { ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1039,7 +1039,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -1058,13 +1058,13 @@ The [documentUnload](https://ej2.syncfusion.com/angular/documentation/api/pdfvie
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import { ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1090,7 +1090,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -1110,13 +1110,13 @@ The [downloadEnd](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import { ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1142,7 +1142,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -1162,13 +1162,13 @@ The [downloadStart](https://ej2.syncfusion.com/angular/documentation/api/pdfview
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import { ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1194,7 +1194,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -1214,13 +1214,13 @@ The [exportFailed](https://ej2.syncfusion.com/angular/documentation/api/pdfviewe
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import { ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1246,7 +1246,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -1266,13 +1266,13 @@ The [exportStart](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import { ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1298,7 +1298,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -1318,13 +1318,13 @@ The [exportSuccess](https://ej2.syncfusion.com/angular/documentation/api/pdfview
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import { ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1350,7 +1350,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -1370,7 +1370,7 @@ The [extractTextCompleted](https://ej2.syncfusion.com/angular/documentation/api/
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -1388,7 +1388,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1414,7 +1414,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -1434,7 +1434,7 @@ The [hyperlinkClick](https://ej2.syncfusion.com/angular/documentation/api/pdfvie
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -1452,7 +1452,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1478,7 +1478,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -1498,7 +1498,7 @@ The [hyperlinkMouseOver](https://ej2.syncfusion.com/angular/documentation/api/pd
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -1516,7 +1516,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1542,7 +1542,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -1562,7 +1562,7 @@ The [importFailed](https://ej2.syncfusion.com/angular/documentation/api/pdfviewe
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -1580,7 +1580,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1606,7 +1606,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -1626,7 +1626,7 @@ The [importStart](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -1644,7 +1644,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1670,7 +1670,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -1690,7 +1690,7 @@ The [importSuccess](https://ej2.syncfusion.com/angular/documentation/api/pdfview
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -1708,7 +1708,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1734,7 +1734,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -1761,13 +1761,13 @@ Refer to [Keyboard interaction](./accessibility#keyboard-interaction) for detail
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component, ViewChild } from '@angular/core';
 import { PdfViewerComponent, ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1810,7 +1810,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   #pdfViewer
   id="pdfViewer"
@@ -1832,7 +1832,7 @@ The [moveSignature](https://ej2.syncfusion.com/angular/documentation/api/pdfview
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -1850,7 +1850,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1876,7 +1876,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -1896,7 +1896,7 @@ The [pageChange](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -1914,7 +1914,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -1940,7 +1940,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -1960,7 +1960,7 @@ The [pageClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -1978,7 +1978,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -2004,7 +2004,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -2024,7 +2024,7 @@ The [pageMouseover](https://ej2.syncfusion.com/angular/documentation/api/pdfview
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -2042,7 +2042,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -2068,7 +2068,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -2088,7 +2088,7 @@ The [pageOrganizerSaveAs](https://ej2.syncfusion.com/angular/documentation/api/p
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -2106,7 +2106,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -2132,7 +2132,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -2152,7 +2152,7 @@ The [pageRenderComplete](https://ej2.syncfusion.com/angular/documentation/api/pd
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -2170,7 +2170,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -2196,7 +2196,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -2216,7 +2216,7 @@ The [pageRenderInitiate](https://ej2.syncfusion.com/angular/documentation/api/pd
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -2234,7 +2234,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -2260,7 +2260,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -2280,7 +2280,7 @@ The [printEnd](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#p
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -2298,7 +2298,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -2324,7 +2324,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -2344,7 +2344,7 @@ The [printStart](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -2362,7 +2362,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -2388,7 +2388,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -2408,7 +2408,7 @@ The [removeSignature](https://ej2.syncfusion.com/angular/documentation/api/pdfvi
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -2426,7 +2426,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -2452,7 +2452,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -2472,7 +2472,7 @@ The [resizeSignature](https://ej2.syncfusion.com/angular/documentation/api/pdfvi
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -2490,7 +2490,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -2516,7 +2516,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -2536,7 +2536,7 @@ The [resourcesLoaded](https://ej2.syncfusion.com/angular/documentation/api/pdfvi
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -2554,7 +2554,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -2580,7 +2580,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -2600,7 +2600,7 @@ The [signaturePropertiesChange](https://ej2.syncfusion.com/angular/documentation
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -2618,7 +2618,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -2644,7 +2644,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -2664,7 +2664,7 @@ The [signatureSelect](https://ej2.syncfusion.com/angular/documentation/api/pdfvi
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -2682,7 +2682,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -2708,7 +2708,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -2728,7 +2728,7 @@ The [signatureUnselect](https://ej2.syncfusion.com/angular/documentation/api/pdf
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -2746,7 +2746,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -2772,7 +2772,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -2792,7 +2792,7 @@ The [textSearchComplete](https://ej2.syncfusion.com/angular/documentation/api/pd
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -2810,7 +2810,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -2836,7 +2836,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -2856,7 +2856,7 @@ The [textSearchHighlight](https://ej2.syncfusion.com/angular/documentation/api/p
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -2874,7 +2874,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -2900,7 +2900,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -2920,7 +2920,7 @@ The [textSearchStart](https://ej2.syncfusion.com/angular/documentation/api/pdfvi
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -2938,7 +2938,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -2964,7 +2964,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -2984,7 +2984,7 @@ The [textSelectionEnd](https://ej2.syncfusion.com/angular/documentation/api/pdfv
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -3002,7 +3002,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -3028,7 +3028,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -3048,7 +3048,7 @@ The [textSelectionStart](https://ej2.syncfusion.com/angular/documentation/api/pd
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -3066,7 +3066,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -3092,7 +3092,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
@@ -3112,7 +3112,7 @@ The [thumbnailClick](https://ej2.syncfusion.com/angular/documentation/api/pdfvie
 Example:
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
 import {
   ToolbarService,
@@ -3130,7 +3130,7 @@ import {
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -3156,7 +3156,7 @@ export class AppComponent {
 ```
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="pdfViewer"
   [documentPath]="documentPath"
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/angular/getting-started-with-server-backed.md
index 7a5663b81..3caac550a 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/getting-started-with-server-backed.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/getting-started-with-server-backed.md
@@ -10,7 +10,13 @@ domainurl: ##DomainURL##
 
 # Getting started with Angular PDF Viewer (server-backed)
 
-This guide explains how to create the PDF Viewer component and configure its features in Angular using the Essential JS 2 in server-backed mode.
+This guide explains how to create the PDF Viewer component and configure its features in Angular 21 using the Essential JS 2 in server-backed mode.
+
+> Note: This guide supports **Angular 21** and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the [Angular version support matrix](https://ej2.syncfusion.com/angular/documentation/system-requirement#angular-version-compatibility). Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.
+
+## Prerequisites
+
+Ensure your development environment meets the [System Requirements for Syncfusion<sup style="font-size:70%">&reg;</sup> Angular UI Components](https://ej2.syncfusion.com/angular/documentation/system-requirement).
 
 ## Set up the development environment
 
@@ -21,16 +27,51 @@ To install the latest Angular CLI globally use the following command.
 npm install -g @angular/cli
 ```
 
+> **Angular 21 Standalone Architecture:** Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the [Standalone Guide](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-standalone).
+
+### Installing a specific version
+
+To install a particular version of Angular CLI, use:
+
+```bash
+npm install -g @angular/cli@21.0.0
+```
+
 ## Create an Angular application
 
 Start a new Angular application using the Angular CLI command as follows.
 
 ```bash
 ng new my-app
+```
+
+* This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
+
+![Initial_setup](images/getting-started-styles.png)
+
+* By default, a CSS-based application is created. Use SCSS if required:
+
+```bash
+ng new my-app --style=scss
+```
+
+* During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.
+
+![Initial_setup](images/getting-started-ssr.png)
+
+* Select the required AI tool or 'none' if you do not need any AI tool.
+
+![Initial_setup](images/getting-started-ai.png)
+
+* Navigate to your newly created application directory:
+
+```bash
 cd my-app
 ```
 
-## Add Syncfusion JavaScript packages
+> Note: In Angular 19 and below, it uses `app.component.ts`, `app.component.html`, `app.component.css` etc. In Angular 20+, the CLI generates a simpler structure with `src/app/app.ts`, `app.html`, and `app.css` (no `.component.` suffixes).
+
+## Installing Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer package
 
 All the available Essential JS 2 packages are published in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. To install PDF Viewer component, use the following command.
 
@@ -56,33 +97,7 @@ Add the component CSS in the `~/src/styles.css` file, as shown below:
 
 ## Add the PDF Viewer component
 
-Import PDF Viewer module into Angular application(app.module.ts) from the package `@syncfusion/ej2-angular-pdfviewer` [src/app/app.module.ts].
-
-```typescript
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-// import the PdfViewer Module for the PDF Viewer component
-import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
-         MagnificationService, ThumbnailViewService, ToolbarService,
-         NavigationService, TextSearchService, TextSelectionService,
-         PrintService, FormDesignerService, FormFieldsService,
-         AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
-import { AppComponent } from './app.component';
-
-@NgModule({
-  //declaration of ej2-angular-pdfviewer module into NgModule
-  imports: [BrowserModule, PdfViewerModule],
-  declarations: [AppComponent],
-  bootstrap: [AppComponent],
-  providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
-               ThumbnailViewService, ToolbarService, NavigationService,
-               TextSearchService, TextSelectionService, PrintService,
-               AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
-})
-export class AppModule { }
-```
-
-Add the Angular PDF Viewer by using `<ejs-pdfviewer>` selector in `template` section of the `src/app/app.component.ts` file to render the PDF Viewer component.
+Add the Angular PDF Viewer by using `<ejs-pdfviewer>` selector in `template` section of the `src/app/app.ts` file to render the PDF Viewer component.
 
 ```typescript
 import { Component, OnInit } from '@angular/core';
@@ -102,12 +117,13 @@ import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
                        style="height:640px;display:block">
                 </ejs-pdfviewer>
              </div>`,
+  imports: [ PdfViewerModule ],
   providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
                ThumbnailViewService, ToolbarService, NavigationService,
                TextSearchService, TextSelectionService, PrintService,
                AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
 })
-export class AppComponent implements OnInit {
+export class App implements OnInit {
   public service = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
   public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
   ngOnInit(): void {
@@ -127,8 +143,8 @@ ng serve --open
 The output will appear as follows.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/pdfviewer/angular/getting-started-cs1/src/app.component.ts %}
+{% highlight ts tabtitle="app.ts" %}
+{% include code-snippet/pdfviewer/angular/getting-started-cs1/src/app.ts %}
 {% endhighlight %}
 
 {% highlight ts tabtitle="main.ts" %}
@@ -136,19 +152,6 @@ The output will appear as follows.
 {% endhighlight %}
 {% endtabs %}
 
-N> If you are using an Angular version below 17, you need import the **AppModule** in the **main.ts** file
-
-```typescript
-
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
-
-```
 
 {% previewsample "/document-processing/samples/pdfviewer/angular/getting-started-cs1" %}
 
@@ -199,11 +202,11 @@ Inject modules using the `providers` property in `@NgModule`.
  dotnet run
 ```
 
-6. The PDF Viewer server instance runs at `https://localhost:5001`. Navigate to `https://localhost:5001/pdfviewer` to see the default GET response. Bind this URL to the `serviceUrl` property of the PDF Viewer as shown below.
+6. The PDF Viewer server instance runs at `https://localhost:7255`. Navigate to `https://localhost:7255/pdfviewer` to see the default GET response. Bind this URL to the `serviceUrl` property of the PDF Viewer as shown below.
 
    ```javascript
-   export class AppComponent implements OnInit {
-      public service = 'https://localhost:5001/pdfviewer';
+   export class App implements OnInit {
+      public service = 'https://localhost:7255/pdfviewer';
       public document = 'PDF_Succinctly.pdf';
       ngOnInit(): void {
       }
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md b/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md
index fc56dc6e8..86631b2a3 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md
@@ -10,12 +10,19 @@ domainurl: ##DomainURL##
 
 # Getting started with Angular Standalone PDF Viewer component
 
-This section explains the steps required to create a simple Standalone Angular PDF Viewer and demonstrates the basic usage of the PDF Viewer control in an Angular CLI application.
+This section explains the steps required to create a simple Standalone Angular PDF Viewer and demonstrates the basic usage of the PDF Viewer control in an Angular 21.
 
-N> For Angular 17+, see the following links:
+> Note: This guide supports **Angular 21** and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the [Angular version support matrix](https://ej2.syncfusion.com/angular/documentation/system-requirement#angular-version-compatibility). Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.
+
+N> For older versions of Angular, see the following links:
 
 * [Create a Standalone PDF Viewer in Angular 17 and above with-no-standalone-flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-with-no-standalone-flag).
 * [Create a Standalone PDF Viewer in Angular 17 and above without --no-standalone flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag).
+* [Create a Standalone PDF Viewer in Angular 12](./how-to/create-a-standalone-pdf-viewer-in-angular-12)
+
+## Prerequisites
+
+Ensure your development environment meets the [System Requirements for Syncfusion<sup style="font-size:70%">&reg;</sup> Angular UI Components](https://ej2.syncfusion.com/angular/documentation/system-requirement).
 
 ## Setup Angular Environment
 
@@ -26,7 +33,15 @@ To install the latest Angular CLI globally use the following command.
 npm install -g @angular/cli
 ```
 
-N> Use the command **npm install --save @angular/cli@12.0.2** to install the Angular CLI version 12.0.2
+> **Angular 21 Standalone Architecture:** Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the [Standalone Guide](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-standalone).
+
+### Installing a specific version
+
+To install a particular version of Angular CLI, use:
+
+```bash
+npm install -g @angular/cli@21.0.0
+```
 
 ## Create an Angular Application
 
@@ -34,9 +49,34 @@ Start a new Angular application using the Angular CLI command as follows.
 
 ```bash
 ng new my-app
+```
+
+* This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
+
+![Initial_setup](images/getting-started-styles.png)
+
+* By default, a CSS-based application is created. Use SCSS if required:
+
+```bash
+ng new my-app --style=scss
+```
+
+* During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.
+
+![Initial_setup](images/getting-started-ssr.png)
+
+* Select the required AI tool or 'none' if you do not need any AI tool.
+
+![Initial_setup](images/getting-started-ai.png)
+
+* Navigate to your newly created application directory:
+
+```bash
 cd my-app
 ```
 
+> Note: In Angular 19 and below, it uses `app.component.ts`, `app.component.html`, `app.component.css` etc. In Angular 20+, the CLI generates a simpler structure with `src/app/app.ts`, `app.html`, and `app.css` (no `.component.` suffixes).
+
 ## Installing Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer package
 
 All the available Essential<sup style="font-size:70%">&reg;</sup> JS 2 packages are published in `npmjs.com` registry.
@@ -53,38 +93,10 @@ npm install @syncfusion/ej2-angular-pdfviewer --save
 cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib  src/assets/ej2-pdfviewer-lib
 ```
 
-* Confirm that there is an 'ej2-pdfviewer-lib' directory within your public directory, housing the assets of the PDF Viewer library.
+* Confirm that there is an 'ej2-pdfviewer-lib' directory within your `src/assets` directory, housing the assets of the PDF Viewer library.
 
 * Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. Additional information can be found in the [Troubleshooting](./troubleshooting/troubleshooting) section.
 
-## Registering PDF Viewer Module
-
-Import PDF Viewer module into Angular application(app.module.ts) from the package `@syncfusion/ej2-angular-pdfviewer` [src/app/app.module.ts].
-
-```typescript
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-// import the PdfViewer Module for the PDF Viewer component
-import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
-         MagnificationService, ThumbnailViewService, ToolbarService,
-         NavigationService, TextSearchService, TextSelectionService,
-         PrintService, FormDesignerService, FormFieldsService,
-         AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
-import { AppComponent } from './app.component';
-
-@NgModule({
-  //declaration of ej2-angular-pdfviewer module into NgModule
-  imports: [BrowserModule, PdfViewerModule],
-  declarations: [AppComponent],
-  bootstrap: [AppComponent],
-   providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
-               ThumbnailViewService, ToolbarService, NavigationService,
-               TextSearchService, TextSelectionService, PrintService,
-               AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
-})
-export class AppModule { }
-```
-
 ## Adding CSS reference
 
 Add the Angular PDF Viewer component's styles as given below in `src/styles.css` file.
@@ -103,7 +115,7 @@ Add the Angular PDF Viewer component's styles as given below in `src/styles.css`
 
 ## Add the PDF Viewer component
 
-Add the Angular PDF Viewer by using `<ejs-pdfviewer>` selector in `template` section of the `src/app/app.component.ts` file to render the PDF Viewer component.
+Add the Angular PDF Viewer by using `<ejs-pdfviewer>` selector in `template` section of the `src/app/app.ts` file to render the PDF Viewer component.
 
 ```typescript
 import { Component, OnInit } from '@angular/core';
@@ -123,12 +135,13 @@ import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
                     style="height:640px;display:block">
                 </ejs-pdfviewer>
              </div>`,
+  imports: [ PdfViewerModule ],
   providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
                ThumbnailViewService, ToolbarService, NavigationService,
                TextSearchService, TextSelectionService, PrintService,
                AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
 })
-export class AppComponent implements OnInit {
+export class App implements OnInit {
   public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
   public resource: string = "https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2-pdfviewer-lib";
   ngOnInit(): void {
@@ -142,7 +155,14 @@ To configure the PDF Viewer to use local files for `documentPath` and `resourceU
 
 **Step 1:** Ensure that your application includes the `ej2-pdfviewer-lib` folder. This folder must contain the `pdfium.js`, `pdfium.wasm` files, and the PDF file that you intend to display. These should be located in the `assets` directory within your project's `src` folder.
 
-**Step 2:** Assign local file paths to the `documentPath` and `resourceUrl` properties within the PDF Viewer setup. The `documentPath` should refer to your PDF file, while the `resourceUrl` should point to the directory containing the supporting resources.
+**Step 2:** Register the assets folder inside `angular.json`
+```json
+"assets": [
+  "src/assets"
+]
+```
+
+**Step 3:** Assign local file paths to the `documentPath` and `resourceUrl` properties within the PDF Viewer setup. The `documentPath` should refer to your PDF file, while the `resourceUrl` should point to the directory containing the supporting resources.
 
 By following these steps, you will configure your PDF Viewer to load the required resources locally. See the code snippet below for reference.
 
@@ -171,7 +191,7 @@ ng serve --open
 The output will appear as follows.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
+{% highlight ts tabtitle="app.ts" %}
 import { Component, OnInit } from '@angular/core';
 import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
          MagnificationService, ThumbnailViewService, ToolbarService,
@@ -180,7 +200,7 @@ import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
          AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
 
 @Component({
-  selector: 'app-container',
+  selector: 'app-root',
   // specifies the template string for the PDF Viewer component
   template: `<div class="content-wrapper">
   <ejs-pdfviewer
@@ -190,6 +210,7 @@ import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
     style="height:640px;display:block">
   </ejs-pdfviewer>
 </div>`,
+  imports: [ PdfViewerModule ],
   providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
                ThumbnailViewService, ToolbarService, NavigationService,
                TextSearchService, TextSelectionService, PrintService,
@@ -204,13 +225,12 @@ export class AppComponent implements OnInit {
 {% endhighlight %}
 
 {% highlight ts tabtitle="main.ts" %}
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));
 
 {% endhighlight %}
 {% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to-overview.md
index ee0427ef1..e742f9390 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to-overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to-overview.md
@@ -45,6 +45,7 @@ The frequently asked questions in Essential<sup>&reg;</sup> PDF Viewer are liste
 * [Add custom fonts to the PDF Viewer using the PDF document](./how-to/custom-fonts)
 * [Create a Standalone PDF Viewer in Angular 17 and above with --no-standalone flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-with-no-standalone-flag)
 * [Create a Standalone PDF Viewer in Angular 17 and above without --no-standalone flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag)
+* [Create a Standalone PDF Viewer in Angular 12](./how-to/create-a-standalone-pdf-viewer-in-angular-12)
 * [Configure Annotation Selector Setting](./how-to/configure-annotation-selector-setting)
 * [Convert Pdf Library Bounds to Pdf viewer bounds](./how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds)
 * [Display Custom Stamp items in Custom Stamp](./how-to/show-custom-stamp-item)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/add-header-value.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/add-header-value.md
index dfa0a08ac..cc8db08b0 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/add-header-value.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/add-header-value.md
@@ -39,7 +39,7 @@ import {
  */
 @Component({
   selector: 'app-root',
-  templateUrl: 'app.component.html',
+  templateUrl: 'app.html',
   encapsulation: ViewEncapsulation.None,
   // tslint:disable-next-line:max-line-length
   providers: [
@@ -57,7 +57,7 @@ import {
     FormDesignerService,
     PageOrganizerService,
   ],
-  styleUrls: ['app.component.css'],
+  styleUrls: ['app.css'],
   standalone: true,
   imports: [PdfViewerModule],
 })
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/annotation-selectors.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/annotation-selectors.md
index eaa429be9..36d928328 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/annotation-selectors.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/annotation-selectors.md
@@ -42,7 +42,7 @@ import {
  */
 @Component({
   selector: 'app-root',
-  templateUrl: 'app.component.html',
+  templateUrl: 'app.html',
   encapsulation: ViewEncapsulation.None,
   // tslint:disable-next-line:max-line-length
   providers: [
@@ -60,7 +60,7 @@ import {
     FormDesignerService,
     PageOrganizerService,
   ],
-  styleUrls: ['app.component.css'],
+  styleUrls: ['app.css'],
   standalone: true,
   imports: [PdfViewerModule],
 })
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/change-author-name-using-annotation-settings.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/change-author-name-using-annotation-settings.md
index 82cda18a1..5f0dfda91 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/change-author-name-using-annotation-settings.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/change-author-name-using-annotation-settings.md
@@ -32,26 +32,14 @@ Change the author name and other properties using the annotationSettings API as
 {% tabs %}
 {% highlight ts tabtitle="Standalone" %}
 ```ts
-// app.module.ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { PdfViewerModule, ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, TextSearchService, PrintService, AnnotationService, FormFieldsService } from '@syncfusion/ej2-angular-pdfviewer';
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, PdfViewerModule],
-  providers: [ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, TextSearchService, PrintService, AnnotationService, FormFieldsService],
-  bootstrap: [AppComponent]
-})
-export class AppModule {}
-
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
-import { AnnotationSettingsModel, FreeTextSettingsModel } from '@syncfusion/ej2-angular-pdfviewer';
+import { AnnotationService, AnnotationSettingsModel, BookmarkViewService, FormFieldsService, FreeTextSettingsModel, LinkAnnotationService, MagnificationService, NavigationService, PageOrganizerService, PdfViewerModule, PrintService, TextSearchService, TextSelectionService, ThumbnailViewService, ToolbarService } from '@syncfusion/ej2-angular-pdfviewer';
 
 @Component({
   selector: 'app-root',
+  imports: [ PdfViewerModule ],
+  providers: [ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, TextSearchService, PrintService, AnnotationService, FormFieldsService, PageOrganizerService],
   template: `
     <ejs-pdfviewer id="pdfViewer"
       [documentPath]="docPath"
@@ -63,36 +51,24 @@ import { AnnotationSettingsModel, FreeTextSettingsModel } from '@syncfusion/ej2-
 export class AppComponent {
   public docPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
   public annotationSettings: AnnotationSettingsModel = {
-    author: 'syncfusion', minHeight: 30, maxHeight: 500, minWidth: 30, maxWidth: 500, isLock: false, isPrint: true, isDownload: true
+    author: 'syncfusion', minHeight: 30, maxHeight: 500, minWidth: 30, maxWidth: 500, isLock: false, skipPrint: false, skipDownload: false
   };
   public freeTextSettings: FreeTextSettingsModel = {
-    allowTextOnly: true
+    allowEditTextOnly: true
   };
 }
 ```
 {% endhighlight %}
 {% highlight ts tabtitle="Server-Backed" %}
 ```ts
-// app.module.ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { PdfViewerModule, ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, TextSearchService, PrintService, AnnotationService, FormFieldsService } from '@syncfusion/ej2-angular-pdfviewer';
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, PdfViewerModule],
-  providers: [ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, TextSearchService, PrintService, AnnotationService, FormFieldsService],
-  bootstrap: [AppComponent]
-})
-export class AppModule {}
-
-// app.component.ts
+// app.ts
 import { Component } from '@angular/core';
-import { AnnotationSettingsModel, FreeTextSettingsModel } from '@syncfusion/ej2-angular-pdfviewer';
+import { AnnotationService, AnnotationSettingsModel, BookmarkViewService, FormFieldsService, FreeTextSettingsModel, LinkAnnotationService, MagnificationService, NavigationService, PageOrganizerService, PdfViewerModule, PrintService, TextSearchService, TextSelectionService, ThumbnailViewService, ToolbarService } from '@syncfusion/ej2-angular-pdfviewer';
 
 @Component({
   selector: 'app-root',
+  imports: [ PdfViewerModule ],
+  providers: [ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, TextSearchService, PrintService, AnnotationService, FormFieldsService, PageOrganizerService],
   template: `
     <ejs-pdfviewer id="pdfViewer"
       [serviceUrl]="serviceUrl"
@@ -106,10 +82,10 @@ export class AppComponent {
   public serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
   public docPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
   public annotationSettings: AnnotationSettingsModel = {
-    author: 'syncfusion', minHeight: 30, maxHeight: 500, minWidth: 30, maxWidth: 500, isLock: false, isPrint: true, isDownload: true
+    author: 'syncfusion', minHeight: 30, maxHeight: 500, minWidth: 30, maxWidth: 500, isLock: false, skipPrint: false, skipDownload: false
   };
   public freeTextSettings: FreeTextSettingsModel = {
-    allowTextOnly: true
+    allowEditTextOnly: true
   };
 }
 ```
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/change-selection-border.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/change-selection-border.md
index 8e2425c7e..397946fee 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/change-selection-border.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/change-selection-border.md
@@ -16,7 +16,7 @@ The following steps are used to customize the selection border.
 
 **Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create simple PDF Viewer sample in Angular.
 
-**Step 2:** Add the following code snippet in app.component.html and app.component.ts files to customize selection borders.
+**Step 2:** Add the following code snippet in app.html and app.ts files to customize selection borders.
 
 {% tabs %}
 {% highlight html tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-12.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-12.md
new file mode 100644
index 000000000..f26a73d21
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-12.md
@@ -0,0 +1,242 @@
+---
+layout: post
+title: Getting started PDF Viewer in Angular 12 | Syncfusion
+description: Checkout and learn about Getting started with Standalone PDF Viewer component of Syncfusion Essential JS 2 in Angular 12 and more details.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Getting started with Angular Standalone PDF Viewer component
+
+This section explains the steps required to create a simple Standalone Angular PDF Viewer and demonstrates the basic usage of the PDF Viewer control in an Angular CLI application.
+
+N> For Angular 17+, see the following links:
+
+* [Create a Standalone PDF Viewer in Angular 17 and above with-no-standalone-flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-with-no-standalone-flag).
+* [Create a Standalone PDF Viewer in Angular 17 and above without --no-standalone flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag).
+
+## Setup Angular Environment
+
+You can use the [`Angular CLI`](https://github.com/angular/angular-cli) to setup your Angular applications.
+To install the latest Angular CLI globally use the following command.
+
+```bash
+npm install -g @angular/cli
+```
+
+N> Use the command **npm install --save @angular/cli@12.0.2** to install the Angular CLI version 12.0.2
+
+## Create an Angular Application
+
+Start a new Angular application using the Angular CLI command as follows.
+
+```bash
+ng new my-app
+cd my-app
+```
+
+## Installing Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer package
+
+All the available Essential<sup style="font-size:70%">&reg;</sup> JS 2 packages are published in `npmjs.com` registry.
+
+* To install PDF Viewer component, use the following command.
+
+```bash
+npm install @syncfusion/ej2-angular-pdfviewer --save
+```
+
+* Copy the contents of the ej2-pdfviewer-lib folder from ./node_modules/@syncfusion/ej2-pdfviewer/dist to the src/assets directory using the command:
+
+```bash
+cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib  src/assets/ej2-pdfviewer-lib
+```
+
+* Confirm that there is an 'ej2-pdfviewer-lib' directory within your public directory, housing the assets of the PDF Viewer library.
+
+* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. Additional information can be found in the [Troubleshooting](./troubleshooting/troubleshooting) section.
+
+## Registering PDF Viewer Module
+
+Import PDF Viewer module into Angular application(app.module.ts) from the package `@syncfusion/ej2-angular-pdfviewer` [src/app/app.module.ts].
+
+```typescript
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+// import the PdfViewer Module for the PDF Viewer component
+import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
+         MagnificationService, ThumbnailViewService, ToolbarService,
+         NavigationService, TextSearchService, TextSelectionService,
+         PrintService, FormDesignerService, FormFieldsService,
+         AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  //declaration of ej2-angular-pdfviewer module into NgModule
+  imports: [BrowserModule, PdfViewerModule],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+   providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
+               ThumbnailViewService, ToolbarService, NavigationService,
+               TextSearchService, TextSelectionService, PrintService,
+               AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
+})
+export class AppModule { }
+```
+
+## Adding CSS reference
+
+Add the Angular PDF Viewer component's styles as given below in `src/styles.css` file.
+
+```css
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';
+```
+
+## Add the PDF Viewer component
+
+Add the Angular PDF Viewer by using `<ejs-pdfviewer>` selector in `template` section of the `src/app/app.component.ts` file to render the PDF Viewer component.
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
+         MagnificationService, ThumbnailViewService, ToolbarService,
+         NavigationService, TextSearchService, TextSelectionService,
+         PrintService, FormDesignerService, FormFieldsService,
+         AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+  selector: 'app-root',
+  // specifies the template string for the PDF Viewer component
+  template: `<div class="content-wrapper">
+                <ejs-pdfviewer id="pdfViewer"
+                    [documentPath]='document'
+                    [resourceUrl]='resource'
+                    style="height:640px;display:block">
+                </ejs-pdfviewer>
+             </div>`,
+  providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
+               ThumbnailViewService, ToolbarService, NavigationService,
+               TextSearchService, TextSelectionService, PrintService,
+               AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
+})
+export class AppComponent implements OnInit {
+  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+  public resource: string = "https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2-pdfviewer-lib";
+  ngOnInit(): void {
+  }
+}
+```
+
+### Load PDF Viewer with local resources
+
+To configure the PDF Viewer to use local files for `documentPath` and `resourceUrl` instead of files hosted on a CDN, follow these steps:
+
+**Step 1:** Ensure that your application includes the `ej2-pdfviewer-lib` folder. This folder must contain the `pdfium.js`, `pdfium.wasm` files, and the PDF file that you intend to display. These should be located in the `assets` directory within your project's `src` folder.
+
+**Step 2:** Assign local file paths to the `documentPath` and `resourceUrl` properties within the PDF Viewer setup. The `documentPath` should refer to your PDF file, while the `resourceUrl` should point to the directory containing the supporting resources.
+
+By following these steps, you will configure your PDF Viewer to load the required resources locally. See the code snippet below for reference.
+
+```typescript
+  template: `<ejs-pdfviewer id="pdfViewer"
+                    [documentPath]='document'
+                    [resourceUrl]='resource'
+                    style="height:640px;display:block">
+              </ejs-pdfviewer>`,
+export class AppComponent implements OnInit {
+  public document: string = window.location.origin + "/assets/pdfsuccinctly.pdf";
+  public resource: string = window.location.origin + "/assets/ej2-pdfviewer-lib";
+  }
+```
+
+View the sample in GitHub to [load PDF Viewer with local resources](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to/Refer%20resource%20url%20locally)
+
+## Run the application
+
+Use the following command to run the application in browser.
+
+```javascript
+ng serve --open
+```
+
+The output will appear as follows.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+import { Component, OnInit } from '@angular/core';
+import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
+         MagnificationService, ThumbnailViewService, ToolbarService,
+         NavigationService, TextSearchService, TextSelectionService,
+         PrintService, FormDesignerService, FormFieldsService,
+         AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+  selector: 'app-container',
+  // specifies the template string for the PDF Viewer component
+  template: `<div class="content-wrapper">
+  <ejs-pdfviewer
+    id="pdfViewer"
+    [documentPath]='document'
+    [resourceUrl]='resource'
+    style="height:640px;display:block">
+  </ejs-pdfviewer>
+</div>`,
+  providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
+               ThumbnailViewService, ToolbarService, NavigationService,
+               TextSearchService, TextSelectionService, PrintService,
+               AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
+})
+export class AppComponent implements OnInit {
+    public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+    public resource: string = "https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2-pdfviewer-lib";
+    ngOnInit(): void {
+    }
+}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/samples/pdfviewer/angular/getting-started-cs1-standalone" %}
+
+## Module injection
+
+To enable additional features, inject the required modules. The following modules extend the PDF Viewer's functionality:
+
+* `LinkAnnotationService`: Enables hyperlink navigation.
+* `BookmarkViewService`: Displays and navigates document bookmarks.
+* `MagnificationService`: Provides zoom in/out operations.
+* `NavigationService`: Enables page navigation.
+* `TextSelectionService`: Enables text selection.
+* `ThumbnailViewService`: Displays page thumbnails for navigation.
+* `ToolbarService`: Enables the built-in toolbar UI.
+* `PrintService`: Enables printing.
+* `AnnotationService`: Enables annotation features.
+* `TextSearchService`: Enables text search.
+* `FormFieldsService`: Enables form field support.
+* `FormDesignerService`: Enables designing and editing of form fields.
+* `PageOrganizerService`: Enables page organization features.
+
+Inject modules using the `providers` array in the component or module.
+
+> Refer to the [Angular PDF Viewer feature tour](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) for an overview of capabilities. Explore the [Angular PDF Viewer example](https://document.syncfusion.com/demos/pdf-viewer/angular/#/tailwind3/pdfviewer/default) to see core features in action.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/Getting%20started%20-%20Standalone).
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag.md
index efd3c51bb..a36dcf162 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag.md
@@ -79,7 +79,7 @@ import {
                     style="height:640px;display:block">
                 </ejs-pdfviewer>
              </div>`,
-  styleUrl: './app.component.css',
+  styleUrl: './app.css',
   providers: [LinkAnnotationService, BookmarkViewService, MagnificationService,
     ThumbnailViewService, ToolbarService, NavigationService,
     TextSearchService, TextSelectionService, PrintService,
@@ -143,7 +143,7 @@ import {
                     style="height:640px;display:block">
                 </ejs-pdfviewer>
              </div>`,
-  styleUrl: './app.component.css',
+  styleUrl: './app.css',
   providers: [LinkAnnotationService, BookmarkViewService, MagnificationService,
     ThumbnailViewService, ToolbarService, NavigationService,
     TextSearchService, TextSelectionService, PrintService,
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-context-menu.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-context-menu.md
index a9fb0ed93..26ea3e985 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-context-menu.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-context-menu.md
@@ -213,8 +213,8 @@ export class CustomContextMenuComponent implements OnInit {
 The following is the output of the custom context menu with customization.
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/pdfviewer/angular/custom-context-menu/src/app.component.ts %}
+{% highlight ts tabtitle="app.ts" %}
+{% include code-snippet/pdfviewer/angular/custom-context-menu/src/app.ts %}
 {% endhighlight %}
 
 {% highlight ts tabtitle="main.ts" %}
@@ -223,7 +223,7 @@ The following is the output of the custom context menu with customization.
 {% endtabs %}
 
 N> To set up the **server-backed PDF Viewer**,
-Add the below serviceUrl in the `app.component.ts` file
+Add the below serviceUrl in the `app.ts` file
 `public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'`;
 Within the template, configure the PDF Viewer by adding the `[serviceUrl]='service'` attribute inside the div element.
 
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document-after-resources-loaded.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document-after-resources-loaded.md
index 02eb84fa8..96b31372e 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document-after-resources-loaded.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document-after-resources-loaded.md
@@ -22,7 +22,7 @@ The `resourcesLoaded` event fires once the viewer finishes loading all required
 - Listen to `(resourcesLoaded)` and call `load` inside the handler.
 
 ```html
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   #pdfViewer
   id="pdfViewer"
@@ -34,13 +34,13 @@ The `resourcesLoaded` event fires once the viewer finishes loading all required
 ```
 
 ```ts
-// app.component.ts
+// app.ts
 import { Component, ViewChild } from '@angular/core';
 import { PdfViewerComponent, ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.html',
   providers: [
     ToolbarService,
     MagnificationService,
@@ -54,7 +54,7 @@ import { PdfViewerComponent, ToolbarService, MagnificationService, NavigationSer
     FormFieldsService,
     PageOrganizerService
   ],
-  styleUrls: ['app.component.css'],
+  styleUrls: ['app.css'],
   standalone: true,
   imports: [PdfViewerModule],
 })
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/images/getting-started-ai.png b/Document-Processing/PDF/PDF-Viewer/angular/images/getting-started-ai.png
new file mode 100644
index 000000000..19655fb2b
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/images/getting-started-ai.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/images/getting-started-ssr.png b/Document-Processing/PDF/PDF-Viewer/angular/images/getting-started-ssr.png
new file mode 100644
index 000000000..738ce174d
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/images/getting-started-ssr.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/images/getting-started-styles.png b/Document-Processing/PDF/PDF-Viewer/angular/images/getting-started-styles.png
new file mode 100644
index 000000000..bc9e073c0
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/images/getting-started-styles.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/bookmark.md b/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/bookmark.md
index 7b30115f2..54fffbffc 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/bookmark.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/bookmark.md
@@ -39,7 +39,7 @@ import {
  */
 @Component({
   selector: 'app-root',
-  // templateUrl: 'app.component.html',
+  // templateUrl: 'app.html',
     template: `
     <div class="control-section">
       <div class="content-wrapper">
@@ -73,7 +73,7 @@ import {
     FormDesignerService,
     PageOrganizerService,
   ],
-  styleUrls: ['app.component.css'],
+  styleUrls: ['app.css'],
   standalone: true,
   imports: [PdfViewerModule],
     
@@ -118,7 +118,7 @@ import {
  */
 @Component({
   selector: 'app-root',
-  // templateUrl: 'app.component.html',
+  // templateUrl: 'app.html',
     template: `
     <div class="control-section">
       <div class="content-wrapper">
@@ -152,7 +152,7 @@ import {
     FormDesignerService,
     PageOrganizerService,
   ],
-  styleUrls: ['app.component.css'],
+  styleUrls: ['app.css'],
   standalone: true,
   imports: [PdfViewerModule],
     
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-amazon-s3.md
index bb4d7edd7..1b0d9faf3 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-amazon-s3.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-amazon-s3.md
@@ -20,7 +20,7 @@ Follow these steps to load a PDF from AWS S3 in the standalone PDF Viewer.
 
 Follow the instructions in the getting started guide (Angular) to create a basic PDF Viewer sample: [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started)
 
-**Step 2:** Modify the `src/app/app.component.ts` File in the Angular Project
+**Step 2:** Modify the `src/app/app.ts` File in the Angular Project
 
 1. Import the required namespaces at the top of the file:
 
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-azure-blob-storage.md
index 960ea9900..da4a70307 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-azure-blob-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-azure-blob-storage.md
@@ -20,7 +20,7 @@ Follow these steps to load a PDF from Azure Blob Storage in the standalone PDF V
 
 Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a simple PDF Viewer sample in Angular. This will give you a basic setup of the PDF Viewer component.
 
-**Step 2:** Modify the `src/app/app.component.ts` File in the Angular Project
+**Step 2:** Modify the `src/app/app.ts` File in the Angular Project
 
 1. Add the following private properties to the `AppComponent` class, and assign the values from the configuration to the corresponding properties
 
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/overview.md b/Document-Processing/PDF/PDF-Viewer/angular/overview.md
index 330dc3698..58480e41f 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/overview.md
@@ -60,7 +60,7 @@ Add CSS references needed for a PDF Viewer in `src/styles.css` from the `../node
 ```
 ### Add PDF Viewer component
 
-In `src/app/app.component.ts``, use <ejs-pdfviewer> selector in the template attribute of the @Component directive to render the Syncfusion Angular PDF Viewer component.
+In `src/app/app.ts``, use <ejs-pdfviewer> selector in the template attribute of the @Component directive to render the Syncfusion Angular PDF Viewer component.
 
 ```
 import { Component, OnInit } from '@angular/core';
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-amazon-s3.md
index 5f6c06f32..693b2bd15 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-amazon-s3.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-amazon-s3.md
@@ -20,7 +20,7 @@ To save a PDF file to AWS S3, you can follow the steps below
 
 Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a simple PDF Viewer sample in TypeScript. This will set up the basic structure of your PDF Viewer application.
 
-**Step 2:** Modify the `src/app/app.component.ts` File in the Angular Project
+**Step 2:** Modify the `src/app/app.ts` File in the Angular Project
 
 1. Import the required namespaces at the top of the file:
 
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-azure-blob-storage.md
index dc1d092f6..f2178fe9e 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-azure-blob-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-azure-blob-storage.md
@@ -20,7 +20,7 @@ To save a PDF file to Azure Blob Storage, follow these steps:
 
 Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a simple PDF viewer sample in Angular. This will give you a basic setup of the PDF viewer component.
 
-**Step 2:** Modify the `src/app/app.component.ts` File in the Angular Project
+**Step 2:** Modify the `src/app/app.ts` File in the Angular Project
 
 1. Import the required namespaces at the top of the file:
 
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-dropbox-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-dropbox-cloud-file-storage.md
index 9de013a2d..c5f6e6080 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-dropbox-cloud-file-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-dropbox-cloud-file-storage.md
@@ -24,7 +24,7 @@ To create a Dropbox API App, you should follow the official documentation provid
 
 Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a simple PDF Viewer sample in Angular. This sets up the basic structure of the PDF Viewer application.
 
-**Step 3:** Modify the `src/app/app.component.ts` file in the Angular project
+**Step 3:** Modify the `src/app/app.ts` file in the Angular project
 
 1. Import the required namespaces at the top of the file:
 
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/custom-toolbar.md
index b537c459c..d24847df8 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/custom-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/custom-toolbar.md
@@ -79,7 +79,7 @@ Hide the default toolbar using `enableToolbar` and `enableThumbnail` properties:
 {% highlight ts tabtitle="Standalone" %}
 {% raw %}
 
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="container"
   [enableToolbar]="false"
@@ -94,7 +94,7 @@ Hide the default toolbar using `enableToolbar` and `enableThumbnail` properties:
 {% highlight ts tabtitle="Server-Backed" %}
 {% raw %}
 
-<!-- app.component.html -->
+<!-- app.html -->
 <ejs-pdfviewer
   id="container"
   [enableToolbar]="false"
@@ -295,7 +295,7 @@ Add Syncfusion EJ2 Toolbar components to perform magnification actions in the PD
 
 >The icons are embedded in the font file used in the previous code snippet.
 
-**Step 7:** Add the following code snippet in `app.component.ts` file for performing a user interaction in PDF Viewer in code behind.
+**Step 7:** Add the following code snippet in `app.ts` file for performing a user interaction in PDF Viewer in code behind.
 
 {% tabs %}
 {% highlight js tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/toolbar.md b/Document-Processing/PDF/PDF-Viewer/angular/toolbar.md
index c06d75c53..9b2cee1cd 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/toolbar.md
@@ -684,7 +684,7 @@ The PDF Viewer provides API for user interactions options provided in its built-
 
 >The icons are embedded in the font file used in the previous code snippet.
 
-**Step 5:** Add the following code snippet in `app.component.ts` file for performing a user interaction in PDF Viewer in code behind.
+**Step 5:** Add the following code snippet in `app.ts` file for performing a user interaction in PDF Viewer in code behind.
 
 {% tabs %}
 {% highlight js tabtitle="Standalone" %}
diff --git a/Document-Processing/code-snippet/pdfviewer/angular/custom-context-menu/src/app.component.ts b/Document-Processing/code-snippet/pdfviewer/angular/custom-context-menu/src/app.ts
similarity index 100%
rename from Document-Processing/code-snippet/pdfviewer/angular/custom-context-menu/src/app.component.ts
rename to Document-Processing/code-snippet/pdfviewer/angular/custom-context-menu/src/app.ts
diff --git a/Document-Processing/code-snippet/pdfviewer/angular/custom-context-menu/src/main.ts b/Document-Processing/code-snippet/pdfviewer/angular/custom-context-menu/src/main.ts
index 3607237bd..37a1e9c19 100644
--- a/Document-Processing/code-snippet/pdfviewer/angular/custom-context-menu/src/main.ts
+++ b/Document-Processing/code-snippet/pdfviewer/angular/custom-context-menu/src/main.ts
@@ -1,4 +1,4 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { AppComponent } from './app.component';
+import { AppComponent } from './app';
 import 'zone.js';
 bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/pdfviewer/angular/getting-started-cs1/src/app.component.ts b/Document-Processing/code-snippet/pdfviewer/angular/getting-started-cs1/src/app.ts
similarity index 80%
rename from Document-Processing/code-snippet/pdfviewer/angular/getting-started-cs1/src/app.component.ts
rename to Document-Processing/code-snippet/pdfviewer/angular/getting-started-cs1/src/app.ts
index 265b7a3f5..fe10fab47 100644
--- a/Document-Processing/code-snippet/pdfviewer/angular/getting-started-cs1/src/app.component.ts
+++ b/Document-Processing/code-snippet/pdfviewer/angular/getting-started-cs1/src/app.ts
@@ -1,15 +1,11 @@
-import { BrowserModule } from '@angular/platform-browser'
-import { NgModule } from '@angular/core'
 import { PdfViewerModule, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
   ToolbarService, NavigationService,AnnotationService, TextSearchService, TextSelectionService, PrintService,FormDesignerService, FormFieldsService, PageOrganizerService} from '@syncfusion/ej2-angular-pdfviewer'
-
-
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-imports: [ PdfViewerModule ],
-standalone: true,
-  selector: 'app-container',
+  imports: [ PdfViewerModule ],
+  standalone: true,
+  selector: 'app-root',
   // specifies the template string for the PDF Viewer component
   template: `<div class="content-wrapper">
   <ejs-pdfviewer 
@@ -23,7 +19,7 @@ standalone: true,
     , NavigationService, AnnotationService, TextSearchService, TextSelectionService, PrintService, FormDesignerService, FormFieldsService, PageOrganizerService]
 })
 export class AppComponent implements OnInit {
-    public service = 'https://services.syncfusion.com/angular/production/api/pdfviewer';
+    public service = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
     public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
     ngOnInit(): void {
     }
diff --git a/Document-Processing/code-snippet/pdfviewer/angular/getting-started-cs1/src/main.ts b/Document-Processing/code-snippet/pdfviewer/angular/getting-started-cs1/src/main.ts
index 3607237bd..6cda24997 100644
--- a/Document-Processing/code-snippet/pdfviewer/angular/getting-started-cs1/src/main.ts
+++ b/Document-Processing/code-snippet/pdfviewer/angular/getting-started-cs1/src/main.ts
@@ -1,4 +1,4 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { AppComponent } from './app.component';
-import 'zone.js';
-bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app';
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
\ No newline at end of file