0.0.11 • Published 4 years ago
ngx-plugins v0.0.11
ngx-plugins
Create components that can be dynamically loaded at runtime into a "plugin host". A plugin host is any element that has the ngxPluginHost
directive which will be used as the location to render the plugin component.
This library is built on top of the Portal package from @angular/cdk.
Installation
npm install --save ngx-plugins
Usage
Create a plugin
import { Component, Inject, OnInit } from '@angular/core';
import { NGX_PLUGIN_DATA, Plugin } from 'ngx-plugins';
import { Observable } from 'rxjs';
@Component({
selector: 'ngx-my-plugin-with-data',
templateUrl: './my-plugin-with-data.component.html',
styleUrls: ['./my-plugin-with-data.component.scss']
})
@Plugin({
selector: 'ngx-my-plugin-with-data',
hostNames: ['MyPluginHost']
})
export class MyPluginWithDataComponent implements OnInit {
constructor(@Inject(NGX_PLUGIN_DATA) public data: Observable<Date>) {}
ngOnInit() {}
}
<p>
my-plugin-with-data works! Data: {{data | async | date:'medium'}}
</p>
You must add the plugin component to the declaring module's entryComponents
.
Create a plugin host
From the component where you want to host plugins
<div>
<p>Plugins will show underneath:</p>
<ng-template
ngxPluginHost
hostName="MyPluginHost"
[pluginData]="myData"
></ng-template>
</div>
A plugin host can host multiple plugins, just add the host to the hostName
list of all the plugins.
A plugin can be hosted in several hosts, just add the names of all the hosts in the plugin's hostName
list.