Skip to main content
CESDK/Web/Getting Started/Integrations
Language:

Integrate CreativeEditor SDK with Angular

In this example, we will show you how to integrate CreativeEditor SDK in an Angular app.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

Prerequisites#

No trial license key required.#

The trial of CreativeEditor SDK works without a license key. A commercial license key is required for use in a production environment. Get a license key at Pricing

Setup#

Note that, 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.

1. Add CE.SDK to your Project#

Install the @cesdk/cesdk-js dependency via npm install --save @cesdk/cesdk-js.

The SDK is served entirely via CDN, so we just need to import the CreativeEditorSDK module and the stylesheet containing the default theme settings.

app.component.ts
import * as CreativeEditorSDK from '@cesdk/cesdk-js';

2. Acquire a container element reference#

We need to provide a container to the CE.SDK. This is done through an ElementRef. For this example, the container is specified as a <div> that fills the whole browser window in app.component.html:


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

app.component.ts
  @ViewChild('cesdk_container') containerRef: ElementRef = {} as ElementRef;

3. Instantiate CreativeEditor SDK#

The last step involves the configuration and instantiation of the SDK. We need to provide the aforementioned container and optionally a license file to instantiate the SDK.

app.component.ts
    const config = {
      // Serve assets from IMG.LY cdn or locally
      baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.3.0/assets'
    };
    CreativeEditorSDK.init(this.containerRef.nativeElement, config).then(
      (instance: any) => {
        /** Do something with the instance of CreativeEditor SDK **/
      }
    );

4. Serving Webpage locally#

In order to use the editor we need run ng serve for a dev server.

This will bring up a server at http://localhost:4200/

Congratulations!#

You've got CE.SDK up and running. Get to know the SDK and dive into the next steps, when you're ready:


File:
import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
import * as CreativeEditorSDK 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 = {} as ElementRef;


  title = 'Integrate CreativeEditor SDK with Angular';


  ngAfterViewInit(): void {
    const config = {
      // Serve assets from IMG.LY cdn or locally
      baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.3.0/assets'
    };
    CreativeEditorSDK.init(this.containerRef.nativeElement, config).then(
      (instance: any) => {
        /** Do something with the instance of CreativeEditor SDK **/
      }
    );
  }
}