0.0.2 • Published 6 years ago
ngx-oc-component v0.0.2
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/oc.module';
@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>