This post is part from series of posts related to integrating Pixo into most popular frameworks. You may check also:
You can check the example and the source code here.
Create new Angular app
We start with creating a boilerplate app. We need Angular-CLI for that purpose, so make sure to install it if you don’t already have it:
npm install -g @angular/cli
Then create the new application:
ng new
This creates the required files structure, dependencies and tooling – everything you need to start developing your business logic.
Start the app
npm start
This will start Angular dev server on localhost:4200 where you can see the welcome screen.
The browser will automatically reload every time you save a file.
Integrate Pixo
Now let’s get the real work done.
Add Pixo.Bridge dependency
Open in your editor src/index.html and add <script src="https://pixoeditor.com/editor/scripts/bridge.m.js"></script> somewhere between the <head></head> tags.
This will add Pixo.Bridge to your global object (window). The Bridge class is required in order to create a “bridge” between your app and Pixo Service.
Declare Pixo as a global object
Since Pixo dependency is not modular, Pixo is registered as a global object. Angular is using TypeScript, therefore you will have to explicitly declare that Pixo is a global variable of type any. To do that:
- create new file
src/globals.d.ts - add
declare var Pixo: any;and save it
Create Pixo Bridge
Next step is to create new instance of Pixo.Bridge in your app component.
Open src/app/app.component.ts in your editor and add the following properties and methods to the AppComponent class:
src: string url to initial imageonEdit: callback function to handle opening of Pixo Editor
The contents of src/app/app.component.ts should look like as follows:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-pixo';
src: string = 'https://via.placeholder.com/350x150';
onEdit(): void {
var editor = new window.Pixo.Bridge({
apikey: 'xxxxxxxxxxxx', // put your API key here!
type: 'modal',
});
editor.edit(this.src);
}
}
Don’t forget to replace the dummy string with your real API key.
Create the view
Next we need to update component view to display our image with the proper src from the model.
Open src/app/app.component.html and type:
<h1>Click the image to edit it</h1>
<img id="myimage" src="{{src}}" (click)="onEdit()" />
Check the browser and voila! The image is shown, and click on it loads Pixo! Now let’s proceed with the final step – handle the Save action.
Handle the Save
We need to add the onSave callback to Pixo.Bridge (instantiated previously in src/app/app.component.ts) that will update the model with the new src. Since this is asynchronous action, we are going to use NgZone. Include it from @angular/core together with the Component:
import { Component, NgZone } from '@angular/core';
Next, declare the AppComponent constructor:
constructor(private ngZone: NgZone) {
}
Finally, add the onSave callback that takes the edited image and stores it in the model:
onSave: arg => {
this.ngZone.run(() => {
this.src = arg.toDataURL()
});
}
And that’s it! The image now updates in the new once it is edited with Pixo. And here is the final version of src/app/app.component.ts:
import { Component, NgZone } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-pixo';
src: string = 'https://via.placeholder.com/350x150';
constructor(private ngZone: NgZone) {
}
onEdit(): void {
var editor = new window.Pixo.Bridge({
apikey: 'xxxxxxxxxxxx', // put your API key here!
type: 'modal',
onSave: arg => {
this.ngZone.run(() => {
this.src = arg.toDataURL()
});
}
});
editor.edit(this.src);
}
}
Source code and demo
Integration of Pixo in Angular app
You can extend & configure Pixo with anything you want, just make sure that you read our documentation.
This post is part from series of posts related to integrating Pixo into most popular frameworks. You may check also:
Abhishek says on February 3, 2021 at 4:25 am
I have issue while production build as I am getting error as “Cannot find name ‘Pixo’.(2304)”.
Pixo Team says on February 3, 2021 at 9:41 am
Hey Abhishek,
Did you add the
<script src="https://pixoeditor.com/editor/scripts/bridge.m.js"></script>to your index.html file?https://stackblitz.com/edit/angular-pixoeditorcom?file=src%2Findex.html
uk says on April 14, 2021 at 3:54 am
Hi, I get the same error “Cannot find name ‘Pixo’.ts(2304)”. And I added in my index.html file too.
Pixo Team says on April 15, 2021 at 1:11 am
Hey guys,
The article post has been updated. There is one additional step that you have to do. Since Pixo dependency is not modular, Pixo is registered as a global object. Angular is using TypeScript, therefore you will have to explicitly declare that Pixo is a global variable of type any. To do that, create new file src/globals.d.ts with the following content:
declare var Pixo: any;
and save it. Also, make sure that you always reference Pixo.Bridge from the window object:
window.Pixo.Bridge
Check the updated blog post once again, or check the source code in StackBlitz:
https://stackblitz.com/edit/angular-pixoeditorcom?file=src%2Fglobals.d.ts