diff --git a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md
index cbb25b052..e968958bc 100644
--- a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md
+++ b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md
@@ -127,7 +127,7 @@ This can be referenced in `[src/styles.css]` using following code.
 
 ## Add Spreadsheet component
 
-Modify the template in [src/app/app.component.ts] file to render the spreadsheet component. Add the Angular Spreadsheet by using `<ejs-spreadsheet>` selector in template section of the `app.component.ts` file.
+Modify the template in [src/app/app.ts] file to render the spreadsheet component. Add the Angular Spreadsheet by using `<ejs-spreadsheet>` selector in template section of the `app.ts` file.
 
 ```typescript
 import { Component } from '@angular/core';
@@ -141,7 +141,7 @@ import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet'
   // specifies the template string for the Spreadsheet component
   template: `<ejs-spreadsheet> </ejs-spreadsheet>`
 })
-export class AppComponent { }
+export class App { }
 
 ```
 
@@ -156,8 +156,8 @@ ng serve
 The following example shows a basic Spreadsheet component
 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/spreadsheet/angular/spreadsheet-cs1/src/app.component.ts %}
+{% highlight ts tabtitle="app.ts" %}
+{% include code-snippet/spreadsheet/angular/spreadsheet-cs1/src/app.ts %}
 {% endhighlight %}
 
 {% highlight ts tabtitle="main.ts" %}
diff --git a/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-cs1/src/app.component.ts b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-cs1/src/app.ts
similarity index 92%
rename from Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-cs1/src/app.component.ts
rename to Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-cs1/src/app.ts
index 8786698d5..2056e5feb 100644
--- a/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-cs1/src/app.component.ts
+++ b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-cs1/src/app.ts
@@ -12,6 +12,6 @@ standalone: true,
     selector: 'app-root',
     template: '<ejs-spreadsheet > </ejs-spreadsheet>'
 })
-export class AppComponent { }
+export class App { }
 
 
diff --git a/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-cs1/src/main.ts b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-cs1/src/main.ts
index 3607237bd..ed4412073 100644
--- a/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-cs1/src/main.ts
+++ b/Document-Processing/code-snippet/spreadsheet/angular/spreadsheet-cs1/src/main.ts
@@ -1,4 +1,4 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { AppComponent } from './app.component';
+import { App } from './app/app';
 import 'zone.js';
-bootstrapApplication(AppComponent).catch((err) => console.error(err));
\ No newline at end of file
+bootstrapApplication(App).catch((err) => console.error(err));
\ No newline at end of file