Tutorial: Integrate Pixo in Angular app

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