Angular Spreadsheet Editor for GroupDocs.Editor UI

Setting up GroupDocs.Editor UI Spreadsheet in Angular App

GroupDocs.Editor UI Spreadsheet provides a powerful Angular component for editing spreadsheet documents within Angular applications. Follow these steps to set up a new Angular app and integrate GroupDocs.Editor UI Spreadsheet seamlessly.

1. Creating a New Angular App

Start by creating a new Angular app named groupdocs-editor-ui-spreadsheet-app using Angular CLI:

ng new groupdocs-editor-ui-spreadsheet-app

2. Installing Libraries

Install the required libraries for GroupDocs.Editor UI Spreadsheet:

npm i @groupdocs/groupdocs.editor.angular.ui-spreadsheet
npm i @groupdocs/groupdocs.editor.angular.ui-core
npm i angular-notifier@12.0.0

3. Adding Tailwind Configuration

Create a tailwind.config.js file in the root of your project with the following content:

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "node_modules/@groupdocs/groupdocs.editor.angular.ui-core/**/**/*.mjs",
    "node_modules/@groupdocs/groupdocs.editor.angular.ui-spreadsheet/**/**/*.mjs",
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

3.1. Updating styles.css

In your styles.css, add the following imports:

@import "~angular-notifier/styles";

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Adding Material Theme to Styles

Add the Angular Material theme to your styles in the angular.json file:

"styles": [
    "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.css"
]

5. Setting API URL in environment.ts

Specify the API URL for the GroupDocs.Editor RESTful service in your environment.ts file:

export const environment = {
  production: false,
  apiUrl: "https://localhost:32774"
};

Ensure apiUrl points to your GroupDocs.Editor RESTful service. Refer to the official documentation for details.

6. Modifying app.module.ts

Update your app.module.ts to import necessary modules and specify routes:

import { SpreadsheetEditorModule } from '@groupdocs/groupdocs.editor.angular.ui-spreadsheet';
import { ApiModule } from '@groupdocs/groupdocs.editor.angular.ui-core';
import { MaterialModule } from './material.module';
import { NotifierModule } from 'angular-notifier';

@NgModule({
  declarations: [
    AppComponent,
    MainComponent,
    NewDocumentComponent,
    SpreadsheetComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot([
      { path: '', component: MainComponent, pathMatch: 'full' },
      { path: 'spreadsheet/new', component: NewDocumentComponent },
      { path: 'spreadsheet/:folderName/:page/:pages', component: SpreadsheetComponent },
    ]),
    SpreadsheetEditorModule.forRoot({ rootUrl: environment.apiUrl }),
    ApiModule.forRoot({ rootUrl: environment.apiUrl }),
    MaterialModule,
    NotifierModule.withConfig(customNotifierOptions),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Conclusion

You've successfully set up a new Angular app and integrated GroupDocs.Editor UI Spreadsheet component. Follow these steps to start editing spreadsheet documents seamlessly within your Angular application.

For advanced usage and further customization, refer to the official documentation.