Getting Started with JavaScript PowerPoint in Angular app

28 Oct 20265 minutes to read

The JavaScript PowerPoint Library is used to create, read, and edit PowerPoint presentations. The JavaScript PowerPoint Library also offers functionality to insert shapes, images, text, and paragraphs with rich formatting.

This guide explains how to integrate the JavaScript PowerPoint Library into an Angular application that runs in the browser. The sample saves the generated PowerPoint presentation with save('Output.pptx').

Prerequisites

Before you begin, make sure you have the following installed:

  • Angular 20 or later.
  • Node.js 18 or later.
  • npm 9 or later, or Yarn 1.22 or later.
  • Visual Studio Code or another code editor.
  • A supported browser such as the latest versions of Microsoft Edge, Google Chrome, or Mozilla Firefox.

To verify your Node.js and npm versions, run the following commands:

node --version
npm --version

Project Setup

This guide includes all the steps needed to create and run the sample in an Angular application. You can either create a new project or use an existing one.

Option A: Create a New Angular Project

If you do not have an Angular project, create one by using the Angular CLI:

npm install -g @angular/cli
ng new my-pptx-app
cd my-pptx-app

Option B: Use an Existing Angular Project

If you already have an Angular project, open its root folder and continue with the package installation steps:

cd my-pptx-app

Installing the JavaScript PowerPoint Library package

All Syncfusion® JS 2 packages are published in npmjs.com registry. The npm install command below resolves @syncfusion/ej2-pptx to the latest stable version that is compatible with Angular 20 or later.

npm install @syncfusion/ej2-pptx --save
  • If you prefer Yarn, use the following command.
yarn add @syncfusion/ej2-pptx

Browser and Environment Compatibility

Environment Supported version
Angular 20 or later
Node.js 18.x or later
TypeScript Installed with Angular
Visual Studio Code Latest version recommended
Chrome Latest two major versions
Edge Latest two major versions
Firefox Latest two major versions

For server-side rendering or Angular Universal, create the PowerPoint document only in browser execution paths. The sample in this guide uses a click handler that runs in the browser, so no additional lifecycle handling is required.

Create a PowerPoint Document

Add a button to the Angular template and attach a click handler that uses the JavaScript PowerPoint Library to create a new PowerPoint document.

Step 1: Create the Template

Add the following button to app.component.html:

<button (click)="createPowerPoint()">Create PowerPoint document</button>

Step 2: Add the Component Code

Update app.component.ts with the following code that imports the Presentation classes and creates a PowerPoint presentation:

import { Component } from '@angular/core';
import { Presentation, HorizontalAlignmentType } from '@syncfusion/ej2-pptx';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  async createPowerPoint(): Promise<void> {
    // Creates a Presentation instance
    const pptxDoc = Presentation.create();
    // Adds a slide to the presentation
    const slide = pptxDoc.slides.add();
    // Adds a textbox for the title
    const titleShape = slide.shapes.addTextBox({
      bounds: {
        x: 55,
        y: 25,
        width: 850,
        height: 72
      }
    });
    // Adds a paragraph to the textbox
    const paragraph = titleShape.textBody.addParagraph();
    paragraph.horizontalAlignment = HorizontalAlignmentType.Center;
    // Adds text to the paragraph
    const textPart = paragraph.addTextPart('Hello World!!!');
    textPart.font.fontName = 'Calibri';
    textPart.font.bold = true;
    textPart.font.fontSize = 36;

    // Saves the Presentation to the file system.
    await pptxDoc.save('Output.pptx');
  }
}

The save() method saves the presentation to the specified file.

Run the Application

Use the following command to run the application in the browser:

ng serve --open

When you click Create PowerPoint document, the sample saves the presentation as Output.pptx.

Additional Resources