Creating a connection to an external website through a JavaScript function within an Angular application

I am currently working on an Angular application. Within the index.html file, there is a header that contains links to external websites.

<a href="#" onclick="getExternalUrl('about.html');">Click here </a>

<script type="text/javascript">
    function getExternalUrl(page)
    {
        return "https://external-domain.com/"+page;
    }
</script>

Unfortunately, when I try to access the external website, my Angular application redirects me to localhost:4200 instead. I'm unsure why this is happening.

javascripthtmlangular

Answer №1

Make sure to modify the getUrl function in the following way:

<script type="text/javascript">
    function getUrl(link)
    {
    window.location.href = "https://new-website.com/"+link;
       
    }
</script>

By clicking on the link labeled "click here", you will be redirected to a different website without any issues.

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

The issue of AngularJS inline style color not functioning in Internet Explorer 11 has been identified

Hello, I am currently attempting to dynamically change the color of a p tag. However, I am facing issues with IE-11 not supporting this functionality. How can I resolve this problem? <p style="color:{{userData.color}} !important;">{{userData.someTex ...

htmlcssangularjsstylesinline

What is the best way to add items to arrays with matching titles?

I am currently working on a form that allows for the creation of duplicate sections. After submitting the form, it generates one large object. To better organize the data and make it compatible with my API, I am developing a filter function to group the du ...

javascriptarraystypescriptobject

Error in TypeScript: Typography type does not accept 'string' type as valid

As I attempt to implement the Typography component from material-ui using TypeScript, I encounter a perplexing error message TypeScript is throwing an error: Type 'string' is not assignable to type 'ComponentClass<HTMLAttributes<HTMLE ...

javascriptreactjstypescriptmaterial-ui

Is there a way to access the element reference of a component directly within the template?

When I mouse over certain elements, I use the following code to set focus: <div #divTemplateVar (mouseover)="divTemplateVar.focus()"></div> However, this method does not work for components: <component #componentTemplateVar (mouseover)="c ...

javascriptangulartypescript

Creating a div that displays only the initial 50 characters through CSS

My goal is to display only the first 100 characters of the Optional Clause in my card, but I'm running into problems with the CSS. The following 3 lines of code aren't working for me: white-space: nowrap; overflow: hidden; text-overflow: ellipsis ...

htmlcssstyling

What is the best way to display only a specific container from a page within an IFRAME?

Taking the example into consideration: Imagine a scenario where you have a webpage containing numerous DIVs. Now, the goal is to render a single DIV and its child DIVs within an IFrame. Upon rendering the following code, you'll notice a black box ag ...

javascripthtmlcssiframe

How to identify the character encoding in a node.js request

Did you know that Facebook chat has a feature where it automatically detects and displays messages in a left-to-right format when typing in English, but switches to right-to-left style when adding right-to-left characters? I'm curious about how Faceb ...

javascriptfacebook

Switching to a different view in a React Native application

I am encountering difficulties while navigating between pages in my React Native application. Whenever I try to use the button, an error message pops up saying: TypeError: undefined is not an object (evaluating '_this.props.navigation'). My app c ...

javascriptreactjsreact-native

Getting the string value from an observable to set as the source attribute for an

I am facing an issue with my image service. It requires the user_id to retrieve the id of the user's profile picture, followed by another request to get the JPG image associated with that id. To fetch the image, use this code snippet: <img [src]=" ...

angularobservable

Are JSON-Web Tokens (JWTs) used for both verifying identity and granting access privileges?

Currently, I am exploring the process of developing a blog website that permits users to log in and perform tasks such as editing or deleting their own blogs based on their user role. If a different user logs in and does not own a particular blog, they s ...

javascriptnode.jsreactjsjwt

Struggling to set up the connection between React-Redux connect and the Provider store

Currently utilizing Redux with React Native for state management. I've set up the store and Provider successfully it seems, as I can utilize store.getState() and store.dispatch(action()) from any component without issue. However, I'm encountering ...

javascriptreactjsreact-nativereduxreact-redux

Learn how to retrieve data from a JSON server in Angular 8 and then sort that data in a table by utilizing checkboxes

Currently, I'm in the middle of an Angular project where I could use some assistance on how to filter data through checkboxes within a table. The setup involves a home component that displays data from a JSON server in a tabular format using a service ...

javascriptangularangular6angular7angular8

Tips for troubleshooting objects within an Angular template in an HTML file

When I'm creating a template, I embed some Angular code within my HTML elements: <button id="btnMainMenu" class="button button-icon fa fa-chevron-left header-icon" ng-if="(!CoursesVm.showcheckboxes || (CoursesVm.tabSelected == 'curren ...

javascripthtmlangularjsgoogle-chrome

What is the reason for the manual update of a view when copying an object's attributes into another object, as opposed to using Object.assign()?

In my application, I have a parent component called 'EmployeeComponent' that is responsible for displaying a list of employees. Additionally, there is a child component named 'EmployeeDetailComponent' which displays the details of the s ...

angulartypescriptdata-binding

Error: Angular 2 - Node - gulp | Unable to locate module .component

I'm in the process of developing a complete TypeScript application with Node.js in TypeScript that is intended to be used with Angular 2 and built using Gulp as the build tool. The Gulp task successfully compiles all files from /src to /dist, convert ...

node.jstypescriptangulargulpgulp-typescript

Is it possible to dynamically update the contents of a modal body and modal footer using

I'm dealing with a modal that dynamically populates two sections: modal-body and modal-footer. However, the issue is that only the content of modal-body changes dynamically while modal-footer remains static. Here's an example of the HTML code (w ...

javascriptjqueryhtml

Switch image on click (toggle between pause and play buttons)

Having some difficulty setting up a 3D audio player in A-Frame where the pause and play button images need to change depending on whether the audio is playing or not. Interested in seeing my code in action? Check it out here. ...

javascripthtmlaframe

Even after diligently assigning a unique key to each child in react, why do I continue to encounter an error?

I've attempted this task previously and have provided a key, but for some reason I keep encountering an error. As I am relatively new to working with React, it's possible that there is a simple mistake hiding somewhere within my code. Update: Th ...

javascriptreactjsreduxreact-redux

The Spotify Whitelisted URI may show an error message: { "error": "invalid_grant", "error_description": "Redirect URI is invalid" }

Although there are similar questions out there, I'm facing a different issue. I am trying to obtain an access token from Spotify API, but all I keep getting is the dreaded "invalid redirect uri" error. Below is my API call: const request = require(& ...

javascriptexpressspotify

What role do colors and tables play in Javascript?

Preparing for my upcoming Web Development exam, I stumbled upon an intriguing question: Here's how I tackled it: function pallete() { var components = ["00", "33", "66", "99", "CC", "FF"]; var context = document.body; var ...

javascripthtmlweb-safe-colors