Skip to main content

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#

In this example, we will use the SDK directly via our CDN. 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.

JavaScript
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'" />

JavaScript
@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.

JavaScript
const config = {
// Serve assets from IMG.LY cdn or locally
baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.0.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:


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.0.0/assets'
};
CreativeEditorSDK.init(this.containerRef.nativeElement, config).then(
(instance: any) => {
/** Do something with the instance of CreativeEditor SDK **/
}
);
}
}