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.
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 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 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: