AngularJS integration guide

ImageEngine has a dedicated package for Angular projects. This package can be found on npmjs.org: @imageengine/angular

This article explains how to get started with the @imageengine/angular package based on the Angular sample app.

Preparations

If you havn't got your ImageEngine account yet, make sure to sign up on imageengine.io. When done, you'll get an ImageEngine delivery address which you'll need later.

Next, you'll need to have Node.js,  NPM  (that comes with node.js ), and Angular CLI installed.

With those installed, from the command line run, (answering "N" to the prompt for Angular Router and choosing CSS for the styles):

ng new ie-angular-sample
cd ie-angular-sample

At this stage we have an Angular sample app that can be viewed in the browser by starting a server locally on your computer by executing this command `ng serve` and head to http://localhost:4200/ in your browser.

Install the ImageEngine package

Back in the terminal, execute this command to download the ImageEngine package:

npm install @imageengine/angular

Next, edit src/app/app.module.ts and make sure it looks like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { NgxImageengineModule } from "@imageengine/angular";

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

The NgxImageengineModule is the module exported from the @imageengine/angular package. Now we're ready to use the image component in our app.

Integrate with your app

The implementation of this step is obviously highly dependent of how your app is laid out, so the following will demonstrate the basics which should be enough to understand how you best can make use of ImageEngine in your Angular app.

In the `src/app/app.component.html` file we can now add an image using the `<ngx-imageengine>`:

<ngx-imageengine 
  path="assets/image.jpeg" 
  host="http://YOUR-ADDRESS-IN-IE.cdn.imgeng.in/">
</ngx-imageengine>

Note that the `host` is the delivery address you obtained when signing up for ImageEngine.

`path` is the local path to the image at your origin.

Note that ImageEngine requires the origin image to be reachable from the internet, so an image stored on localhost will not work. The image must be stored and available in the origin you defined when setting up your ImageEngine delivery address.

Absolute image sources

If your app provide absolute image references, like `https://host.com/image.jpeg`, which is common when the app is built on top of a headless CMS for example, we need to strip off the host part of the image url. This can be done using the `strip_from_src` option:

<ngx-imageengine
  strip_from_src="https://images.ctfassets.net/"
  path="https://images.ctfassets.net/assets/image.jpeg"
  host="http://YOUR-ADDRESS-IN-IE.cdn.imgeng.in/">
</ngx-imageengine>

In the example above, the string `https://images.ctfassets.net/` will be stripped from the value of `path` so that the final image src will be a valid ImageEngine url: `http://YOUR-ADDRESS-IN-IE.cdn.imgeng.in/assets/image.jpeg`

Advanced use

The above is a very simple demonstration of how to get started with ImageEngine and Angular. For a full list of features please see the package documentation.

Further, the package @imageengine/imageengine-helpers may be of good help when utilizing the ImageEngine directives.