NG SRM Wrapper

Easily integrate SRM into your Angular application

Table of contents

• Quick start
• API Reference
  • NgSRMWrapper

Quick start

Install @nicecactus/ng-srm-wrapper:

• with npm: npm install -S @nicecactus/ng-srm-wrapper
• with yarn: yarn add @nicecactus/ng-srm-wrapper

Add the module to NgModule imports

AppModule

import { NgSRMWrapperModule } from '@nicecactus/ng-srm-wrapper';

@NgModule({
  ...
  modules: [ NgSRMWrapperModule, ... ],
  ...
})

Create a loader component for your SRM.
We will assume that:

• the asset-manifest.json file url is stored in environment.assetManifestUrl
• once loaded, the SRM render() function is exposed in window.myOrg.myModule
• the module will be served with the relative path /my-module

my-module-loader.component.ts

import { Component } from '@angular/core';

import { environment } from 'projects/my-project/src/environments/environment';

@Component({
  selector: 'app-my-modue-loader',
  templateUrl: './my-modue-loader.component.html',
})
export class MyModuleLoaderComponent {
  const assetManifestUrl = environment.assetManifestUrl;
}

my-module-loader.component.html

<ng-srm-wrapper assetManifestUrl="{{assetManifestUrl}}" exportPath="myOrg.myModule" basename="/my-module"></ng-srm-wrapper>

Expose the loader in the app router

AppRoutingModule

const routes: Routes = [
  {
    path: 'my-module',
    children: [
        {
            path: '**',
            component: MyModuleLoaderComponent,
        },
    ],
  }
];

API Reference

NgSRMWrapper

Selector	ng-srm-wrapper

Inputs

assetManifestUrl	Type: string URL to the asset-manifest.json.
exportPath	Type: string Path to the exported render() function once the module has been loaded.
basename	Type: string Default value: / Relative path the module is being served from.
language	Type: string Default value: en Language used for i18n.
arguments	Type: object Default value: {} Extra arguments to pass to the render() function.
eventHandlers	Type: object Default value: {} Custom events that can be called by the SRM.

Outputs

loaded	Type: EventEmitter<HTMLElement> Emits an event when the module has been loaded.
rendered	Type: EventEmitter<any> Emits an event when the module has been rendered.