how to make a js function public in angular 5

187
March 09, 2018, at 02:07 AM

I'm using Angular 5 to develop my application.
In assets/js folder, I have a js file test.js. I have a variable data and a function Loaddata() in this js file. I want to be able to access these in my app.component.ts.

I was able to make the variable scope public and was able to access it in component.ts, but I failed to do the same with the function.

This is the process I followed for the variable:
1. Add reference of js file in angular-cli.json

        "scripts": [
                "assets/js/test.js"
         ]

2. Added the variable name in typings.d.ts file.

       declare var data:any;

Now I was able to access this variable in app.component.ts.
I want to be able to access even the function in the similar manner.
Can anyone explain me how to do it.

Answer 1

This seems like an awesome use case for using an Injectable Service. Create a loadData.service.ts file in the src/app directory of your application(if you are using Angular CLI), and then format it like this.

import { Injectable } from '@angular/core';
@Injectable()
export class LoadDataService {
    data = [
        // Your Data Here
    ]
    constructor() {};
    loadData(params?) {
        // your code here
    }
}

Then, whenever you need to use that function in a component, just import the service into your component, create a local instance of it in your constructor, and then use it! To access the data, just set it equal to another variable in that components constructor.

import { LoadDataService } from '../loadData.service';
@Component({
    //whatever
})
export class YourComponent {
    dataFromService: [];
    constructor(private loadDataService: LoadDataService) {
        this.dataFromService = this.loadDataService.data;
    }
    runThisToGetData() {
        this.loadDataService.loadData(yourParams).subscribe(r => r);
    }
}

Best of luck!

Answer 2

Take a look at: https://nodejs.org/api/modules.html

You could just use exports to do what you are asking for.

foo.js
module.exports = {
  hello: () => alert('hello from foo!')
};

EDIT ---- Fixed syntax

bar.js
const foo = require('./foo.js');
foo.hello();
Rent Charter Buses Company
READ ALSO
Custom Summernote Button to create links with classes

Custom Summernote Button to create links with classes

So I'm thoroughly confused as how to make a custom SummerNote button which will allow me to either add classes to an already inserted HTML element (ie

288
How to use mask with coffeescript

How to use mask with coffeescript

hi i need help to use coffee with rails 51 I'm trying to use a mask for the rg id = rg

203
Slick Slider - Save images on mobile by holding the image

Slick Slider - Save images on mobile by holding the image

I am using SlickSlider (which is an amazing slider) for my gallery page of my site

224
Rails, auto-submit form after input blur returns: ActionController::UnknownFormat

Rails, auto-submit form after input blur returns: ActionController::UnknownFormat

The Goal: Auto submit the form after blur from any input

170