Search
Loading...
Skip to content

New Angular Project

This guide walks you through creating a new Angular application and integrating the CreativeEditor SDK (CE.SDK). You’ll learn how to set up an Angular component that properly initializes and disposes of CE.SDK resources.

Who is This Guide For?#

This guide is for developers who:

  • Are building or maintaining an Angular application.
  • Want to integrate CE.SDK using TypeScript and Angular’s component lifecycle.
  • Prefer installing the SDK via npm and serving the UI inside a reusable Angular component.

What You’ll Achieve#

  • Set up a new Angular project.
  • Install and configure CE.SDK using npm.
  • Embed the editor in your component and launch it with configuration options.

Prerequisites#

Before getting started, ensure you have:

  • Node.js (v20 or later) and npm installed.
  • A valid CE.SDK license key (Get a free trial).
  • Angular CLI installed globally:
    Terminal window
    npm install -g @angular/cli

Step 1: Create a New Angular Project#

Create a new Angular app (skip routing and use CSS or SCSS as preferred):

Terminal window
ng new cesdk-angular-app
cd cesdk-angular-app

Step 2: Install CE.SDK via NPM#

Install the SDK package:

Terminal window
npm install @cesdk/cesdk-js

Step 3: Embed CE.SDK in a Component#

1. Add Container Element#

Open src/app/app.component.html and replace the contents with:

<div #cesdk_container [style.height.vh]="'100'" [style.width.vw]="'100'"></div>

This provides a full-screen container for the editor.

2. Initialize the Editor in TypeScript#

Open src/app/app.component.ts and replace it with:

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import CreativeEditorSDK, { Configuration } from '@cesdk/cesdk-js';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('cesdk_container') containerRef!: ElementRef;


  title = 'Integrate CreativeEditor SDK with Angular';


  ngAfterViewInit(): void {
    const config: Configuration = {
      license: 'YOUR_LICENSE_KEY', // Replace with your actual CE.SDK license key
      baseURL:
        'https://cdn.img.ly/packages/imgly/cesdk-js/1.53.0/assets',
      callbacks: {
        onUpload: 'local',
      },
    };


    CreativeEditorSDK.create(this.containerRef.nativeElement, config).then(
      async (instance: any) => {
        instance.addDefaultAssetSources();
        instance.addDemoAssetSources({ sceneMode: 'Design' });
        await instance.createDesignScene();
      },
    );
  }
}

Setup Disclaimer#

Note: For convenience, we serve all SDK assets (e.g. images, stickers, fonts etc.) from our CDN by default. For use in a production environment, we recommend serving assets from your own servers.

Step 4: Start the Angular Development Server#

Run your app locally:

Terminal window
ng serve

Navigate to http://localhost:4200/ and the CE.SDK editor should appear fullscreen inside your Angular app.

Troubleshooting & Common Errors#

❌ Error: Cannot read property 'nativeElement' of undefined

  • Ensure @ViewChild('cesdk_container') matches the #cesdk_container element in your template.

❌ Error: license key is invalid

  • Make sure your trial or production license key is correct and up to date.

❌ CE.SDK assets not loading

  • Check network requests. Ensure you allow access to cdn.img.ly.

Next Steps#

You’ve successfully integrated CE.SDK into Angular. Now explore: