Getting Started

For help getting started with a new Angular app, check out the Angular CLI.

For existing apps, follow these steps to begin using Angular Material.

Step 1: Install Mime

npm install --save @nationallibraryofnorway/ngx-mime

Step 2: Install Angular Material

npm install --save @angular/material

Step 3: Install Angular CDK

npm install --save @angular/cdk

Step 4: Install Angular Flex Layout

npm install --save @angular/flex-layout

Step 5: Animations

Mime depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app.

npm install --save @angular/animations

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class LibraryAppModule { }

If you don't want to add another dependency to your project, you can use the NoopAnimationsModule.

import { NoopAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})
export class LibraryAppModule { }

Step 6: Import the component modules

Import the NgModule for the component:

import { MimeModule } from '@nationallibraryofnorway/ngx-mime';

@NgModule({
  ...
  imports: [MimeModule],
  ...
})
export class LibraryAppModule { }

Be sure to import the Mime module after Angular's BrowserModule, as the import order matters for NgModules.

Step 7: Gesture Support

Mime rely on HammerJS for gestures. In order to get the full feature-set of these components, HammerJS must be loaded into the application.

You can add HammerJS to your application via npm, a CDN (such as the Google CDN), or served directly from your app.

To install via npm, use the following command:

npm install --save hammerjs

After installing, import it on your app's root module.

import 'hammerjs';

Step 8: Add Material Icons

load the icon font Material Design Icons in your index.html.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Step 9: Add openseadragon

npm install --save openseadragon

Add "../node_modules/openseadragon/build/openseadragon/openseadragon.min.js" to the scripts tag in .angular-cli.json

Step 10: Add d3

npm install --save d3

Step 10: Add Mime Viewer to the component

<mime-viewer [manifestUri]="manifestUri" [canvasIndex]="canvasIndex" [q]="q" [config]="config"></mime-viewer>

manifestUri: string

Must be the uri to your manifest file.

canvasIndex: number (optional)

The initial canvas within the sequence to display.

q: string (optional)

Content search query string.

config: MimeViewerConfig (optional)

• attributionDialogEnabled: boolean (true)
• attributionDialogHideTimeout: number (-1 meaning no timeout)
• navigationControlEnabled: boolean (true)
• initViewerMode: ViewerMode (ViewerMode.PAGE)

Appendix: Configuring SystemJS

If your project is using SystemJS for module loading, you will need to add @nationallibraryofnorway/ngx-mime to the SystemJS configuration:

System.config({
  // existing configuration options
  map: {
    // ...
    '@nationallibraryofnorway/ngx-mime': 'npm:@nationallibraryofnorway/ngx-mime/bundles/ngx-mime.umd.js',
    // ...
  }
});