guestlinelabs/ngx-oc-component

A component to allow OpenComponents inside Angular applications

ngx-oc-component

ngx-oc-component is an small Angular extension that facilitates the inclusion of any OpenComponents in angular applications.

It was built for modern browsers using TypeScript, CSS3 and HTML5 and Angular >=5.0.0

Installation

Install ngx-oc-component using npm:

npm i ngx-oc-component --save

Usage

1. Include the oc-client in your HTML:

The oc-client library is available inside your configured OC Registry. This can be achieved in multiple ways:

• directly in index.html

<script src="https://your-oc-registry.xyz/oc-client/client.js"></script>

or

• angular style (Note: it is recommended to include the sript in ngAfterViewInit method)

import { Component, Renderer2, Inject, AfterViewInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';

export class YourComponent implements AfterViewInit {
  private registry = 'https://your-oc-registry.xyz';
  constructor(private renderer: Renderer2, @Inject(DOCUMENT) private document) {}

  public ngAfterViewInit(): void {
    const s = this.renderer.createElement('script');
    s.src = `${this.registry}/oc-client/client.js`;
    this.renderer.appendChild(this.document.body, s);
  }
}

2. Import OcModule into your AppModule class

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { OcModule } from 'ngx-oc-component';

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

3. Build OcOptions for the template

import {OcOptions} from 'ngx-oc-component';

public ocOptions: OcOptions = {
    baseUrl: 'yourBaseRegistryUrl',
    name: 'yourComponentName',
    version: 'yourComponentVersion',
    parameters: yourAdditionalParameters
};

where parameters: any.

Also, define a public method for rendered event

public onRendered(e: any) {
    const event = e.event;
    const data = e.data;
    /* your code */
}

4. In template

<ngx-oc-component [options]="ocOptions" (rendered)="onRendered($event)"> </ngx-oc-component>