How to insert Java-script file into a angular component.ts Type-script file and execute the onClick function for MEAN stack

Question

import { Component } from '@angular/core';
import * as e from 'cors';


declare function click_fun():any;

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent {
  ngOnInit(): void{
  }

  click_fun(){
  
    alert('Welcome')
  }
}

"""How to call in JavaScript file that has all the code for database connection, storing data in MONGODB and credential authentication in click_fun()."""

Its already answered here, check this out -> https://stackoverflow.com/questions/44817349/how-do-i-include-a-javascript-script-file-in-angular-and-call-a-function-from-th — bhaginath, Dec 15 '22 at 06:19

d1fficult · Accepted Answer · 2022-12-15T10:29:27.350

1

- Let us assume our script file custom.js looks like this: -

var utilObj = {
    dummyFunc: () => {
        console.log('Calling dummy function!');
    }
}

- Add your javascript/script file in scripts array in angular.json file.

"scripts": [
    "src/custom.js" 
 ],

Should look like this: -

- Add below code snippet in typings.d.ts. If this file doesn't exist, create one in src folder.

declare var utilObj:any;

Keep your variable name similar to property of script file. Here utilObj is the property name.

- Now, You can consume this script/js file directly in your component or .ts file.

You need not import the file in component file or .ts file now as we have given the typing defination for the script file already in typings.d.ts file.

Example: -

ngOnInit() {
  console.log('Starting Application!');
  utilObj.dummyFunc();
}

- Output: -

edited Dec 15 '22 at 10:29

answered Dec 15 '22 at 07:55

d1fficult

931
8
18

Thank you for your quick response!! I have included my JS file in the scripts folder. – enzigartiger_coder Dec 15 '22 at 08:06
I have my authentication code in a JS file and instead of writing the whole function in the TS component file, I want to call that file in the form OnClick function. So how do I do that? – enzigartiger_coder Dec 15 '22 at 08:08
@enzigartiger_coder Please check the updated answer now, have explained it with an example. – d1fficult Dec 15 '22 at 10:33
Also, please do not forget to upvote or mark this as an answer if this helps you out. – d1fficult Dec 15 '22 at 10:44

How to insert Java-script file into a angular component.ts Type-script file and execute the onClick function for MEAN stack

1 Answers1