# Setting up Pintura Image Editor with Angular

For a quick start use the [Angular example project](https://github.com/pqina/pintura-example-angular) as a guideline.

It includes a normal, modal, and overlay editor example, as well as an example showing how to integrate FilePond with Pintura.

## Installing the Angular modules

### Using test version

Test versions of the `pintura` and `angular-pintura` modules are available on NPM.

```bash
npm install --save @pqina/angular-pintura @pqina/pintura
```

Add the path to the Pintura Image Editor styles `'local_modules/pintura/pintura.css'` to the `build/options/styles` array in your `angular.json` configuration file.

```json
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "angular": {
            "architect": {
                "build": {
                    "options": {
                        "styles": [
                            "src/styles.css",
                            "node_modules/@pqina/pintura/pintura.css"
                        ]
                    }
                }
            }
        }
    }
}
```

### Using private npm

The `pintura` module is available on the pqina private npm.

In our project root directory we create a file called `.npmrc` and copy the snippet below to the file. Then we replace `PQINA_NPM_KEY` with our private npm key as displayed on the pqina customer portal.

```bash
@pqina:registry=https://npm.pqina.nl/
//npm.pqina.nl/:_authToken=PQINA_NPM_KEY
```

Now we can install the needed modules like shown below.

```bash
npm install --save @pqina/angular-pintura @pqina/pintura
```

Add the path to the Pintura Image Editor styles `'local_modules/pintura/pintura.css'` to the `build/options/styles` array in your `angular.json` configuration file.

```json
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "angular": {
            "architect": {
                "build": {
                    "options": {
                        "styles": [
                            "src/styles.css",
                            "node_modules/@pqina/pintura/pintura.css"
                        ]
                    }
                }
            }
        }
    }
}
```

### Using local modules

Instead of installing from the private npm we can create a `local_modules` folder inside our project root directory. We then copy paste the `pintura` files from the product package, the `angular-pintura` package is available on npm.

We can now install the modules like shown below.

```bash
npm install --save @pqina/angular-pintura ./local_modules/pintura
```

Add the path to the Pintura Image Editor styles `'local_modules/pintura/pintura.css'` to the `build/options/styles` array in your `angular.json` configuration file.

```json
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "angular": {
            "architect": {
                "build": {
                    "options": {
                        "styles": [
                            "src/styles.css",
                            "local_modules/pintura/pintura.css"
                        ]
                    }
                }
            }
        }
    }
}
```

### Angular 8 and older

When installing Pintura on Angular 8 or lower we need to add `{ "skipLibCheck": true }` to the `compilerOptions` section of our projects `tsconfig.json` file.

## Using the Angular components

Now we can import the modules like we normally would and use the Angular `<pintura-editor>`, `<pintura-editor-modal>`, and `<pintura-editor-overlay>` components.

## Angular Events and properties

To bind [events](../../api/ui/events/) we can use the Angular event binding syntax.

```html
<pintura-editor (load)="onLoadImage($event)"></pintura-editor>
```

Properties can be used as we would with the normal JavaScript version of the editor but should be assigned to the `options` attribute. Only `src` can be supplied with a separate attribute.

```html
<pintura-editor [src]="image.jpeg" [options]="myOptions"></pintura-editor>
```

## Default Angular implementation example

In the default example below we'll use the [getEditorDefaults](../../api/ui/exports/#editor) method to quickly create an image editor.

This creates a "default" editor that has all available plugins loaded and comes preset with all plugin default options and English locale. Each of these settings can be adjusted freely.

```html
<!-- app.component.html -->
<div>
    <div style="height: 600px">
        <pintura-editor [src]="src" [options]="options"></pintura-editor>
    </div>
</div>
```

```js
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// import AngularPinturaModule
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}
```

```js

// app.component.ts
import { Component } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

// Import the editor default configuration
import { getEditorDefaults } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    constructor(private sanitizer: DomSanitizer) {}

    // The source image to load
    src: SafeUrl = 'image.jpeg';

    // Our editor configuration
    options: any = {
        // Pass the editor default configuration options
        ...getEditorDefaults(),

        // This will set a square crop aspect ratio
        imageCropAspectRatio: 1
    }
}

```

## Advanced Angular implementation example

In this example we'll create a custom editor, using a custom set of plugins, locale, and available options.

While this example is a lot more verbose it does allow us to create a more optimal editor package. The build process will tree-shake unused functionality resulting in a smaller build target.

```html
<!-- app.component.html -->
<div>
    <div style="height: 600px">
        <pintura-editor [src]="src" [options]="options"></pintura-editor>
    </div>
</div>
```

```js
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// import AngularPinturaModule
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}
```

```js

// app.component.ts
import { Component } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

// Import the editor functionality
import {
    // Import the default image reader and writer
    createDefaultImageReader,
    createDefaultImageWriter,

    // The method used to register the plugins
    setPlugins,

    // The plugins we want to use
    plugin_crop,
    plugin_finetune,
    plugin_annotate,

    // The user interface and plugin locale objects
    locale_en_gb,
    plugin_crop_locale_en_gb,
    plugin_finetune_locale_en_gb,
    plugin_annotate_locale_en_gb,

    // Because we use the annotate plugin we also need
    // to import the markup editor locale and the shape preprocessor
    markup_editor_locale_en_gb,
    createDefaultShapePreprocessor,

    // Import the default configuration for the markup editor and finetune plugins
    markup_editor_defaults,
    plugin_finetune_defaults, } from '@pqina/pintura';

// This registers the plugins with Pintura Image Editor
setPlugins(plugin_crop, plugin_finetune, plugin_annotate);

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    constructor(private sanitizer: DomSanitizer) {}

    // The source image to load
    src: SafeUrl = 'image.jpeg';

    // Our editor configuration
    options: any = {

        // This will read the image data (required)
        imageReader: createDefaultImageReader(),

        // This will write the output image
        imageWriter: createDefaultImageWriter(),

        // The markup editor default options, tools, shape style controls
        ...markup_editor_defaults,

        // The finetune util controls
        ...plugin_finetune_defaults,

        // This handles complex shapes like arrows / frames
        shapePreprocessor: createDefaultShapePreprocessor(),

        // This will set a square crop aspect ratio
        imageCropAspectRatio: 1,

        // The icons and labels to use in the user interface (required)
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
            ...plugin_finetune_locale_en_gb,
            ...plugin_annotate_locale_en_gb,
            ...markup_editor_locale_en_gb,
        },
    }
}

```

## Next steps

With the editor set up, we can continue to configure the editor to our liking by adjusting the available options exposed by [the editor API](../../api/image-editor/)