EMS Web Application Components: PageViewer

The PageViewer Angular.io module is authored for use within web applications developed by Educational Media Solutions.

Find the web application template source code on GitHub to review implementation in context.

Find a working example of this component here.

The embedded component and service expose interfaces for rendering dynamic page content and managing browser history.

When present on the containing page, Google Analytics page_view events are fired for each page change (with values that correspond to the page identifier, e.g., "page-1" below).

You can likely achieve comparable outcomes with angular routing, but we extend this simple implementation to meet custom client requirements for navigation and accessibility.

Note that this component currently supports only a single implementation per application, i.e., you can't have two separate page viewers on a single screen.

Also note that styling options are limited, and will need to be customized in your CSS files to meet the needs of your implementation.

This library was generated with Angular CLI version 13.2.0.

Note that this module has a peer dependency on ems-web-app-utils and underscore.js

npm i underscore ems-web-app-utils ems-web-app-page-viewer

Module Implementation

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

import { AppComponent } from './app.component';
import { PageViewerModule, PageViewerService } from "ems-web-app-page-viewer";

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

Component Implementation

import { Component } from '@angular/core';
import { PageViewerService } from "ems-web-app-page-viewer";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent  {
  public title: string = "Example Title";
  constructor(private viewer: PageViewerService) {}
  showPage1() {
     this.viewer.setCurrentPage("page-1");
  }
  showPage2() {
     this.viewer.setCurrentPage("page-2");
  }
}

Template Implementation

<div class="control-buttons">
	<button (click)="showPage1()">Show Page 1</button>
	<button (click)="showPage2()">Show Page 2</button>
</div>

<page-viewer class="content-panel" [history]="true">
	<page-template id="page-1" title="Page 1">
		<ng-template>
			<app-page1></app-page1>
		</ng-template> <!-- custom component -->
	</page-template>
	<page-template id="page-2">
		<ng-template>
			<!-- static html -->
			<h1>Page 2 {{ title }}</h1>
			<div>Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</div>
		</ng-template>
	</page-template>
</page-viewer>

Note that you must include the ng-template container around your content to prevent it from instantiating prematurely. This template is registered with the PageViewerService and rendered by the PagerViewerComponent.

Every <page-template/> node must define an "id" attribute

The optional "history" attribute on the page-viewer element enables browser history tracking when set to true. The default is boolean "false".

Code scaffolding

Run ng generate component component-name --project PageViewer to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project PageViewer.

Note: Don't forget to add --project PageViewer or else it will be added to the default project in your angular.json file.

Build

Run ng build PageViewer to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build PageViewer, go to the dist folder cd dist/page-viewer and run npm publish.

Running unit tests

Run ng test PageViewer to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.