Navigating to an external URL using Angular 2

I need to redirect to an external URL after a certain action. Here is my code:

            this.http.get(this.apiurl+'api/insert.php?did='+this.did).subscribe(data=>{
                  var jsonData = data.json();    
                  let url = jsonData.urlpass;
// I want to redirect to this URL like https://flipkart.com with my affiliate parameters
window.open(url ,'_blank'); 
    });

The window.open(url ,'_blank'); function triggers the popup blocker.

To avoid this, I attempted the following approach:

<a #myDiv id="anchorID" href="url here" target="_blank"></a>
$("#anchorID")[0].click();

However, the click event does not get triggered within the subscribe method.

When I use

var newWin = window.open();
              newWin.location = url_pass;

It results in an error:

Cannot assign to 'location' because it is a constant or a read-only property.

I am looking for a solution to open this external URL in a new window without encountering issues with the popup blocker.

If anyone can provide assistance, it would be greatly appreciated.

Answer №1

Give this a shot

let newWindow = window.open('another_url');

Answer №2

Why not give this a shot:

In your component's HTML file, include a hidden link like so:

<a #popupLink class="btn-excel" (click)='popup()' 
                                       style="display:none">
    <span>Dummy link</span>
  </a>

Then in your component's TypeScript file:

@ViewChild('popupLink') popupLink;

   popup() {
    window.open("https://www.google.com", "_blank");
  }

  //somewhere in your code
  popupLink.click();

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

Can a custom type be created in Typescript that permits objects but excludes Errors?

Currently working on resolving an odd scenario with a logger. Essentially, calls like log({ info: 'information' }) function as expected, but log(new Error()) falls short. While no solution is readily available, the goal is to override the log m ...

A Javascript promise that perpetually stays in a pending state

Utilizing the rotateByDegrees function from a library called node-poweredup within a typescript project: motor.rotateByDegrees(20,10).then(function(value) {console.log("test");}, function(value) {console.log("error");}); Expecting to s ...

Tips for eliminating the page URL when printing a page using window.print() in JavaScript or Angular 4

Can someone help me with a function that uses window.print() to print the current page, but I need to remove the page URL when printing? I'm looking to exclude the URL from being printed and here is the code snippet where I want to make this adjustme ...

Importing files dynamically in an Angular 2 component based on environmental variables

I'm attempting to import customized files depending on the chosen environment by creating an environment file with a path variable. environment.test.ts export const environment = { production: true, file_path: '../../folder/file.ts&apos ...

ngFor displaying items in a stacked layout within a flexible carousel

Incorporating Angular 11 along with the https://www.npmjs.com/package/angular-responsive-carousel responsive carousel has been a part of my project. The carousel is filled with mat-cards through an array. However, upon initially loading the page, all the c ...

Can you explain the use of parentheses in a typescript type when defining a key?

Could someone provide an instance of an object that matches the TypeScript type below? I'm a bit confused because I've only worked with interfaces before and have only seen square brackets. type Hash = { (data: Uint8Array): Uint8Array blockLe ...

Deleting a particular item in Angular involves utilizing specific techniques for removal, while updating a

After connecting my reactive form app with a REST API, I encountered an issue while trying to delete a hotel. Instead of displaying the ID of the clicked hotel, it shows "Really delete the Hotel: (undefined)?" What could be causing this problem in my code ...

Trouble with fetching value from function in Angular 2

I have successfully implemented musale/angular2-stripe. Everything is functioning well, but I am encountering an issue extracting a value from the component. openCheckout() { this.disabled = true; var handler = (<any>window).StripeCheckou ...

Models reference each other incorrectly, causing a problem of circular dependencies

file-admin.ts import mongoose, { Schema, Document } from 'mongoose'; import UserRole, { IUserRole } from './user-role.model'; export interface IFileAdmin extends Document { role: IUserRole; } let fileAdminSchema = new Schema<IF ...

Retrieve the browser's language using a Service during initialization

Upon launching the application, I need to obtain the browser's language. To achieve this, I have created a service with the following code: import { Injectable } from '@angular/core'; import { TranslateService } from 'ng2-translate/ng2 ...

I'm puzzled as to why I have to encode the path parameter twice in order for the REST call to properly handle special characters

I have a challenge with a REST call that fetches a product's ingredients using the product name as the path variable. I allow for any character to be used, and I know I need to use encodeURIComponent(name) to encode characters such as "/" to prevent m ...

Angular 5: Transforming and Concealing CSS Class Names

Can CSS selectors be renamed or obfuscated in an Angular CLI project? Many top websites like Google and Facebook use randomized CSS names for various reasons, such as preventing website scripting through targeting static class names. I would like to imple ...

Limiting @Input Value to a Certain Number Range using Angular

I need to include an InputSignal in my Angular component that only accepts arrays of numbers. Each number in the array should fall between 0.01 and 10, and cannot have more than 2 decimal places. It is important to enforce these restrictions to ensure tha ...

Issue with Angular 6 Animation not showing up

Looking to incorporate an animation spinner into my Angular app Found this spinner example: https://codepen.io/z-/pen/OPzNLz spinner.component.html import { Component, OnInit } from '@angular/core'; @Component({ selecto ...

Display different text based on the property value

I need to display different text based on the value of a property, showing "offline" if camera.key is null and "online" otherwise. Here's the template I'm using: <h3>Camera sensors</h3> <table> <th>Name</th> ...

What is the best way to sort through this complex array of nested objects in Typescript/Angular?

tableData consists of an array containing PDO objects. Each PDO object may have zero or more advocacy (pdo_advocacies), and each advocacy can contain zero or more programs (pdo_programs). For example: // Array of PDO object [ { id: 1, ...

Ways to dynamically alter the appearance of a conditionally displayed element in Svelte

Currently experimenting with SvelteKit 1.0 by building a simple to-do app, but I'm having trouble implementing conditional text strikethrough. My goal is to have the text style change to include a strikethrough when the user clicks on the checkbox nex ...

There is no index signature that includes a parameter of type 'string' in the specified type

I have a background in mobile app development and am looking to learn more about TypeScript. How can I declare a map object with the form [string:any]? The error is occurring at line: map[key] = value; Element implicitly has an 'any' type becaus ...

Bringing TypeScript modules from a local module into a React application

As I work on organizing my projects and keeping logic separate in components that will eventually be published, I have a specific structure set up for now: I have a library of Typescript scripts within a project named project-a A separate React app create ...

Do other effects promptly process actions dispatched by one ngrx Effects effect?

I am facing an issue in my Angular (2) application where I have implemented four ngrx actions: START This action is not processed by the reducer, meaning there is no state change The ngrx Effect triggers an asynchronous task and maps it to either SUCCE ...