Angular WordProcessing Editor for GroupDocs.Editor UI

Setting up GroupDocs.Editor UI WordProcessing with PDF in Angular App

GroupDocs.Editor UI WordProcessing with PDF provides a versatile Angular component for editing WordProcessing and PDF documents within Angular applications. Follow these steps to set up a new Angular app and integrate GroupDocs.Editor UI WordProcessing with PDF seamlessly.

1. Creating a New Angular App

Begin by creating a new Angular app named groupdocs-editor-ui-wordprocessing-pdf-app using Angular CLI:

ng new groupdocs-editor-ui-wordprocessing-pdf-app

2. Installing Libraries

Install the necessary libraries for GroupDocs.Editor UI WordProcessing with PDF:

npm i @groupdocs/groupdocs.editor.angular.ui-wordprocessing-pdf
npm i @groupdocs/groupdocs.editor.angular.ui-core
npm i [email protected]

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-wordprocessing-pdf/**/**/*.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 { WordProcessingPdfEditorModule } from '@groupdocs/groupdocs.editor.angular.ui-wordprocessing-pdf';
import { ApiModule } from '@groupdocs/groupdocs.editor.angular.ui-core';
import { MaterialModule } from './material.module';
import { NotifierModule } from 'angular-notifier';

@NgModule({
  declarations: [
    AppComponent,
    MainComponent,
    NewDocumentComponent,
    WordProcessingPdfComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot([
      { path: '', component: MainComponent, pathMatch: 'full' },
      { path: 'wordProcessing/new', component: NewDocumentComponent },
      { path: 'wordProcessing/:folderName', component: WordProcessingComponent },
      { path: 'pdf/:folderName', component: PdfComponent },
    ]),
    WordProcessingPdfEditorModule.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 WordProcessing with PDF component. Follow these steps to start editing WordProcessing and PDF documents seamlessly within your Angular application.

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