The question is how one can achieve similar *"thing"* in Angular 2+ to that
I managed to do in AngularJS. What the *"thing"* is I will describe below.
*Question description*
So the process that I created in AngularJS can be described as follows:
- We want to inject a custom dynamic content into a page, let's call it
a plugin
- That content *is not defined* in the web-client, instead it is being
retrieved from a server in a structured form
That is we receive from the server *html* and *js* files that are necessary
for the plugin to function and we load and display on the page. On the
client I create an AngularJs directive to hold the necessary logic if the
plugin.
Here is the code example for javascript plugin code:
() => {
return {
templateUrl: 'directive-template-name',
restrict: "E",
controller: ['$scope', ... /* other dependecies */, function ($scope
, ...) {
/* directive code */
}]
};
}
Here is the code example for plugin loader code:
// evaluate js function and compile directive
var diretiveFactory = eval(content.jsFile);
// AngularJS CompileProvider
CompileProvider.directive.apply(null, [content.name, diretiveFactory]);
// append html code to element using angular
var wrapper = angular.element("#" + wrapperName);
wrapper.html(requestedDirective[0].htmlContent);
// initialize dynamic content
var wrapperScope = wrapper.scope();
this.$compile(wrapper)(wrapperScope);
As one can see, this method allows to load a valid javascript and
*"compile"* it into a AngularJS directive and then display it on the page
at will.
*Angular 2+*
The problem with new angular is that concept of the *directive*, as far as
I understand, is replace by a concept of *component*. Moreover, all
client-side code is now written in typescript and transpiled into
javascript for the client's browser. As far as I understand, all
dependencies are being resolved in the traspilation process.
*That creates some problems *that prevent from creating dynamic plugins for
Angular 2+:
- A do not know how to inject dependencies into a dynamically created
component as I do not know what exactly do I need when the transpilation
happens.
- Let's say I want several components to co-exist simultaneously (for
example a parent dynamic components that holds children componets) and be
able to communicate, in the case of AngularJs I could solve this problem by
using scope variable. In case of Angular 2+ components are isolated so how
to I go about this problem.
- Moreover, I do not know how one can go about creating *ViewContainerRef
*to hold the dynamically created component in evaluated javascript code.
(See code examples below)
I will provide code examples of I got so far below. Content loader
typescript code:
//some imports
import { Component, ComponentRef, Compiler, Injector, NgModule, NgModuleRef,
ViewContainerRef} from '@angular/core';
// plugin content structure
class DynamicPageModel {
name: string;
htmlFile: string;
jsFile: string;
}
export class DynamicContentService {
constructor(
private _compiler: Compiler,
private _injector: Injector,
private _m: NgModuleRef<any>
) { }
public LoadDynamicContent(container: ViewContainerRef, content:
DynamicPageModel) {
// evaluate js function and compile component
var tmpCmp = Component({
template: content.htmlFile,
selector: content.name
})(eval(content.jsFile)());
var tmpModule = NgModule({declarations: [tmpCmp as any]})(class {
});
var factories = this._compiler.compileModuleAndAllComponentsSync(
tmpModule)
var f = factories.componentFactories[0];
var cmpRef = f.create(this._injector, [], null, this._m);
// insert component into the container
container.insert(cmpRef.hostView);
}
}
For reference to what is going on in this piece of code, I got it from here
<https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e>
.
Plugin example javascript code:
() => {
function dynamicMain() {
this.componentName = 'Dynamic Example Main';
}
return dynamicExampleMain;
}
As one can see, this is quite simple dynamic plugin that is unable to
*Expected answer*
As an answer to my question I would like to hear a solution(s) to the
problems I encountered when trying to create dynamic plugins for the
Angular 2+.
If you know a better approach to creating dynamic plugins (remember: they
are retrieved from a server) at run time in Angular 2+, I would like to
hear it too.
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
