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 PricingSetup#
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.
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'" />
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.
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 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 locallybaseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets'};CreativeEditorSDK.init(this.containerRef.nativeElement, config).then((instance: any) => {/** Do something with the instance of CreativeEditor SDK **/});}}