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()."""

Answer 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: -