Developing components and injecting them dynamically in Angular 2 using Typescript remotely

Question

Developing components and injecting them dynamically in Angular 2 using Typescript remotely

I am currently exploring the potential of Angular 2 as a foundational technology for a flexible administration dashboard, emphasizing the need for extensibility and customization. I envision an environment where external developers can create their own components and seamlessly integrate them into my pre-existing framework without needing access to the underlying source code. This would allow developers to focus solely on developing the necessary resources for their components (.html, .ts/.js files) without being burdened by the complexities of the main application structure. These components could then be served statically through servlets or other means. Is this concept even theoretically possible? Could I establish a "main" app module capable of dynamically importing, declaring, and understanding typescript-based components from a predefined location?

javascript angular typescript babeljs

Answer 1

Answer №1

Yes, I found a helpful example at this link.

It was by chance that I came across this specific example while browsing the Plunkr homepage.

An interesting concept is passing components as object parameters to a function for compilation.

import {Compiler, Component, NgModule, OnInit, ViewChild,
  ViewContainerRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `<h1>Dynamic template:</h1>
             <div #container></div>`
})
export class App implements OnInit {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private compiler: Compiler) {}

  ngOnInit() {
    this.addComponent(
      `<h4 (click)="increaseCounter()">
         Click to increase: {{counter}}
       </h4>`,
      {
        counter: 1,
        increaseCounter: function () {
          this.counter++;
        }
      }
    );
  }

  private addComponent(template: string, properties?: any = {}) {
    @Component({template})
    class TemplateComponent {}

    @NgModule({declarations: [TemplateComponent]})
    class TemplateModule {}

    const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule);
    const factory = mod.componentFactories.find((comp) =>
      comp.componentType === TemplateComponent
    );
    const component = this.container.createComponent(factory);
    Object.assign(component.instance, properties);
    // If properties are changed at a later stage, the change detection
    // may need to be triggered manually:
    // component.changeDetectorRef.detectChanges();
  }
}

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

Answer 2

Yes, I found a helpful example at this link.

It was by chance that I came across this specific example while browsing the Plunkr homepage.

An interesting concept is passing components as object parameters to a function for compilation.

import {Compiler, Component, NgModule, OnInit, ViewChild,
  ViewContainerRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `<h1>Dynamic template:</h1>
             <div #container></div>`
})
export class App implements OnInit {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private compiler: Compiler) {}

  ngOnInit() {
    this.addComponent(
      `<h4 (click)="increaseCounter()">
         Click to increase: {{counter}}
       </h4>`,
      {
        counter: 1,
        increaseCounter: function () {
          this.counter++;
        }
      }
    );
  }

  private addComponent(template: string, properties?: any = {}) {
    @Component({template})
    class TemplateComponent {}

    @NgModule({declarations: [TemplateComponent]})
    class TemplateModule {}

    const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule);
    const factory = mod.componentFactories.find((comp) =>
      comp.componentType === TemplateComponent
    );
    const component = this.container.createComponent(factory);
    Object.assign(component.instance, properties);
    // If properties are changed at a later stage, the change detection
    // may need to be triggered manually:
    // component.changeDetectorRef.detectChanges();
  }
}

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

Developing components and injecting them dynamically in Angular 2 using Typescript remotely

Answer №1

Similar questions

Recursive function: the process of storing numerous values in variables

Tips on successfully transferring row data that has been clicked or selected from one adjacent table to another table

Is it possible to store a randomly generated variable in JavaScript for future reference?

Using JavaScript to display content on the page after handling a form

AngularJS requires that JSON object property values be converted to strings in order to be displayed as actual templates

Emphasize the selected page number

Utilizing Next.js and Redux for Enhanced Authentication Experience

Typescript type/object's conditional property feature

Include a photo in the notification when utilizing the sendToTopic function

Tips for adding extra spacing between icon and text field using Vuetify

Retrieve the most recently updated or added item in a dropdown list using jQuery or AngularJS

Koffi organized a collection of structured arrays

Guide on creating my inaugural HTML embeddable widget?

Using v-for to pass two properties to a single component in VueJS

What steps do I need to take to modify the MUI Badge component and insert custom text inside?

Learn how to automatically update data in Vue JS after making a 'POST,' 'DELETE,' or 'PUT' request in Vue JS 2

Could the act of one function updating state and another immediately accessing it lead to a potential race condition occurring?

The issue of the selection option not being cleared after being set to 0 persists in JavaScript

After generating the token, where is the appropriate place to define the authorization header?

Incorporating an NPM JavaScript library into Laravel version 8