Guide to embedding a Java-script file within an Angular component.ts Type-script file and triggering the onClick function for a MEAN stack application

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 would you go about utilizing a JavaScript file that contains code for database connection, storing data in MongoDB, and credential authentication within the click_fun() function."""

Answer β„–1

- Imagine our script file custom.js appears as follows: -

var utility = {
    sampleFunction: () => {
        console.log('Calling sample function!');
    }
}

- Insert your javascript/script file into the scripts array in angular.json file.

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

The entry should look like this: -

https://i.sstatic.net/oIdhC.png

- Add the following code snippet to typings.d.ts. If this file is missing, create one in the src folder.

declare var utility:any;

Ensure the variable name matches the property of the script file. In this case, utility is the property name.

- Now you can directly use this script/js file in your component or .ts file.

You do not need to import the file into the component or .ts file anymore since we have provided the typing definition for the script file in typings.d.ts.

Example: -

ngOnInit() {
  console.log('Starting Application!');
  utility.sampleFunction();
}

- Output: -

https://i.sstatic.net/LLjnT.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to switch routes in redux saga upon successful login?

Greetings! I'm a newcomer to React and I've been using React hooks and redux-saga for my project. I have a requirement where I need the router to navigate to /home upon successful login. I attempted to achieve this using connected-react-router an ...

What are the best practices for implementing image-slice in node.js?

I attempted to utilize image-slice to divide an image into multiple parts using Node.js. I tried installing npm i image-to-slices, sudo port install cairo, npm i canvas, and brew install pkg-config cairo pango libpng jpeg giflib. However, I still encounte ...

Unable to Achieve Full Height with Vuetify Container

Challenge: I'm facing an issue with my <v-container> component not consistently spanning the entire height of the application. Despite trying various methods such as using the fill-height property, setting height: 100%;, height: 100vh;, and expe ...

Connecting to an Oracle database using Alfresco's Javascript API may seem daunting at first, but

Currently, I am working on a project that involves using Alfresco. One of the new requirements for this project is to retrieve a sequence number from our Oracle database and populate a custom property within an Alfresco space. var conObj = new ActiveXObje ...

Receiving the [object HTMLInputElement] on the screen rather than a numerical value

I have an input box where a user can enter a number. When they click a button, I want that number to be displayed on the page. However, instead of seeing the number, I am getting the output as [object HTMLInputElement]. Below is my TypeScript code: let qu ...

Express.js not recognizing the spread operator

app.post('/addfriends', (req, res) => { let newFriend = req.body.name; friends.push(newFriend) res.redirect('/friends') }) I am currently working on this code snippet and I am exploring alternative ways to add a new friend usi ...

β€œIn NodeJS, the response varies depending on the type of request made.”

As I am new to NodeJS and the ExpressJS framework, I have a question regarding how they handle multiple requests. If the system receives numerous requests, does the server return different responses for each user without affecting one another? For instanc ...

Is your CSS looking chaotic on both the login and dashboard pages?

I am facing a major issue with my CSS not cooperating properly with my Angular project. When I attempt to log in on the login page username = toto password = 123 I have set up a demo here. https://i.sstatic.net/NBeWA.png I expect to see this view htt ...

Modify the events JSON URL when the Full Calendar changes its display period

Whenever I switch between months or weeks, I need the JSON URL link to update accordingly. For example: The initial JSON URL is: /json/?start=2018-01-28&end=2018-03-10 When moving to the next month, the URL changes to: /json/?start=2018-02-25&am ...

Styling for older versions of Internet Explorer (IE10 and earlier)

Could it be true that IE 10, 9, and others no longer support conditional statements? Is it also accurate to say that JQuery does not support the browser object above version 1.9? I am facing an issue with CSS rendering differently in Chrome and IE. A Goog ...

Observable emitting individual characters instead of the entire string in an optional parameter of an activated route

Within an Angular component, I have a method with the following content: this.route.paramMap.pipe( switchMap((params: ParamMap) => { let fooValue = params.get('selectedid'); console.log("inside switch map with value as " + ...

Forward the request from Node.js to a Spring Boot service and return a response

Currently, I have an angular UI running on localhost:4200, a node server running on localhost:4000, and a spring boot service running on localhost:8080. My goal is to establish a flow from angular to node, then redirect to the spring boot service which co ...

Expand the size of the imported gltf model within Three.js

After successfully loading a 3d model with a gltf extension using the GLTFLoader in Three.js, I encountered a new challenge. I needed to adjust the dimensions of the model dynamically when the window is resized, based on the values of window.innerWidth and ...

transmitting an image via a router using ExpressJS

How can I pass an image through a router as a response in my Express application (referencing the line of code with message: ...)? The current behavior returns it as a string. router.post('/authorization_cub', function (request, response) { ...

Validate the checkbox with Vuelidate only when the specified property is set to true

I have a website login form where users may need to check a specific checkbox before logging in. Here is part of the Vue component code that handles this functionality: <script setup lang="ts"> import {ref, defineProps} from 'vue&a ...

A commitment was formulated within a handler but failed to be returned from it

After a user clicks on the button (#lfdsubmit), it triggers the function (LFD_SearchContainer()) which is expected to return a promise. However, errors are occurring at LFD_SearchContainer('EISU1870725') .then(container => { ST2.db2(contai ...

Navigate through an object without changing its original sequence

I understand that the order in which an object's properties are stored or read is not guaranteed. The issue I'm facing is that I am required to work with a large and deeply nested JSON file like the one shown below: { "occasion": 23, "mayorstip ...

Obtain the query parameter before undergoing redirection within Angular version 14

In my Angular application, I am facing a challenge where I need to display a specific message to the user once they click on a link that has been sent to them via email. The link is intended to open a page within the app at the URL: "localhost:8080/?d ...

Tips for concealing a button post-click

Just updated my code, please take a look! I have created a button using HTML, CSS, and JavaScript and I am trying to figure out how to hide it once it's clicked. Below is the HTML for the button that should play music when clicked: <audio id="my ...

Stepping up Your Next.js Game with the Razorpay Payment Button Integration

When using the Razorpay payment button on a website, it provides a code snippet like this: <form> <script src = "https://cdn.razorpay.com/static/widget/payment-button.js" data-payment_button_id = "pl_FNmjTJSGXBYIfp" data ...