Dynamically inject and use javascript code in Angular 5

Question

I've been working in project for almost an years, we are using Angular 2 since its rc versions. At the moment we are already in version 5.

Our app has a need to have javascript code transpiled from typescript injected and being able to use it.

Imagine the following: I can create an app with pages inside each page has controls, then each control has an ID; (We already have this) I create a script that I can add behaviours to those controls. Things like when the user clicks inside a control, or change event. If I have in the script and event for that click event, I would execute what is in it.

So my application, creates an "app", and this app has controls and one script file that will listen to the events coming from the app.

In the scripting I would have to register the controls and assign the event to it, like we normally do in Javascript.

For instance i would have a local api that i would also inject so the app could reuse some common functions, below is how the script for the app would be:

var myPage = myApp.Page("myPageID");
myPage.registerControls('txt1', 'txt2');

myPage.txt1.Events.Click(myClickFunction);

function myClickFunction(sender, event) {
 //Do something here
}

So when I have this app open in my application, the script would be inject when i open the app, and removed when i closed.

Is there any way to achieve this?

I still trying to find a kind of JSFiddler where i can add typescript code and get the result transpiled export to a file to have it injected when I open the app.

mohit uprim · Accepted Answer · 2017-12-02 06:26:59Z

Using OpaqueToken, we can inject the third party javascript library as a service and can use it with the component.

For example, i am using "toastr" library to display the messages. Following are the steps.

1- Include the library reference in index.html.

<script src="node_module/toastr/build/toastr.min.js"></script>

2- Create a token which will be used inside dependency injection registry while registering the global service in AppModule.

toastr.service.ts:

import { OpaqueToken } from '@angular/core';

export let Toastr_TOKEN = new OpaqueToken('toastr');

3- Register in AppModule.

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';

import { AppComponent }         from './app.component';
import { ParentComponent }   from './parent.component';

import { Toastr_TOKEN } from './toastr.service'

declare let toastr:any; //a globall toastr object

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
  ],
  declarations: [
    AppComponent,
    ParentComponent,
  ],
  providers: [
    { provide: Toastr_TOKEN, useValue: toastr }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

4- Using @Inject decorator, use toastr object inside the componnet.

import { Component, Inject } from '@angular/core';
import { Toastr_TOKEN } from './toastr.service';

@Component({
  selector: 'parent',
  template: `
    <button class="btn btn-primary" (click)="displayMessage()">Display #</button>

  `
})
export class ParentComponent implements OnInit {
  prime;

  constructor(@Inject(Toastr_TOKEN) private toastr) {

  }

  displayMessage() {
    this.toastr.success('Hello');
  }


}

The application I’m doing are dinamic forms, so for each form i will have a JavaScript file associated to it, and I can’t predict the name and so on. Before it is created. I won’t be able to have the opaqueToken registered because needs to be dinamic. I need a thing were i can load the JavaScript file an be able to use the functions of it.

Collectives™ on Stack Overflow

Dynamically inject and use javascript code in Angular 5

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related