Learn how to open links in a new tab or window and customize the behavior to direct specific links to that same window using Angular

const newChildWindow = window.open(
    url, "_blank", `width="${altScreen.availWidth}", height="${altScreen.availHeight}"`
);

newChildWindow?.resizeTo(altScreen.availWidth, altScreen.availHeight);
newChildWindow?.moveTo(altScreen.left, 0);

fun1() {
    this.doSetup("http://www.google.com");  
}

fun2() {
    this.doSetup("http://www.twitter.com");
}

fun3() {
    this.doSetup("http://www.linkedin.com");
}

These functions correspond to three different buttons. Providing the URL as an argument is working fine. However, due to the "_blank" attribute, every link opens in a separate window. I want to keep the "_blank" attribute but have the links override the specific window only.

Is there a way to achieve this?

angulartypescript

Answer №1

If you want to achieve this, consider the following approach: When using your code for the first time:

const popUpWindow = window.open(
              url, "_blank", `width="${altScreen.availWidth}", height="${altScreen.availHeight}"`
            );
            popUpWindow?.resizeTo(altScreen.availWidth, altScreen.availHeight);
            popUpWindow?.moveTo(altScreen.left, 0);

Then, utilize this variable a second time with the following logic:

popUpWindow.location.replace("http://www.website.com");

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

Is it acceptable to manipulate the prevState parameter of the setState function as mutable?

It is commonly known that directly modifying this.state is not recommended, and instead setState should be used. Following this logic, I assumed that prevState should also be treated as immutable, and setState should always involve creating a new object i ...

javascriptreactjstypescript

TypeScript encountered an error with code TS2305, stating that the module "constants" does not have any exported members

My Vite + React + TypeScript application has the following structure: src constants a.ts b.ts index.ts components Comp.tsx tsconfig file with "baseUrl": "src" The content of a.ts is as follows: export const ARRAY = ...

reactjstypescriptvitereact-typescript

Troubleshooting the challenge of transitioning from Angular 4 to Angular 9 with flatMap

In my Angular 4 code, everything runs smoothly: public resolve(): Observable<GridViewDtcConfig> { const permissionResponse = this.flowsService.getPermissions(); return permissionResponse.flatMap((permissions) => { c ...

angularrxjs

Observable - initiating conditional emission

How can I make sure that values are emitted conditionally from an observable? Specifically, in my scenario, subscribers of the .asObservable() function should only receive a value after the CurrentUser has been initialized. export class CurrentUser { ...

angulartypescriptrxjsrxjs5

When invoking the function, the original state remains unaffected within a separate function

Whenever I click on an 'item', it should establish an initial value for me to use in a comparison within another function that involves the mousemove event. However, when the mousemove function is triggered, the initial state remains at 0. imp ...

reactjstypescriptnext.js

The name 'Diagnostics' cannot be located

I've downloaded the Typescript repository and am currently reviewing the code. However, I keep encountering this recurring error message: Cannot find name 'Diagnostics' This error pops up on lines that are similar to this: Diagnostics._ ...

typescript

Using TypeScript and Node.js with Express; I encountered an issue where it was not possible to set a class property of a controller using

I have a Node application using Express that incorporates TypeScript with Babel. Recently, I attempted to create a UserController which includes a private property called _user: User and initialize it within the class constructor. However, every time I ru ...

node.jstypescriptexpress

Embedding Globalize.js into an Angular component

Hey there! I'm currently working on building an Angular 4 application that needs to support L10n. I've decided to incorporate globalize into my project. Below is a snippet of my App component: import { Component, OnInit } from '@angular/c ...

angulartypescriptglobalizationglobalize

Installing Angular CLI

Upon installing the Angular CLI, I encountered the following warning: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\@angular\cli\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEP ...

node.jsangulartypescript

Show the chosen autocomplete value on the table for visibility

Currently, I am utilizing the autocomplete and table components simultaneously on the same page/component. When a particular player is selected from the autocomplete component, I aim to showcase the details of the chosen player (such as NAME and AGE) on th ...

angularangular-materialangular6

Issue with second button in Angular Onclick() not been resolved

I'm experiencing an issue with the onClick() methods in my code. There are two onClick() methods present on the UI, but when I click on the second one, it does not call the method while the first one does. I am struggling to figure out why this is hap ...

javascriptangularhtml

Steps to eliminate the typescript template from create-react-app

Initially, I decided to incorporate TypeScript into my React project, which led me to run the command npx create-react-app my-app --template typescript. However, now I'm looking for a way to revert back and remove TypeScript from my setup. Is there a ...

reactjstypescript

Picture fails to load until a recompilation of my application is done (angular2, typescript, nodejs)

In my application, I am facing an issue with storing and retrieving images. Storing the image in a specific server path is working perfectly fine, but when it comes to retrieving the image, it does not load in the browser unless I recompile my application ...

node.jsimageangulartypescript

ESLint detecting error with returning values in async arrow functions

Currently facing a minor inconvenience instead of a major problem. Here is the code snippet causing the issue: export const getLoginSession = async (req: NextApiRequest): Promise<undefined | User> => { const token = getTokenCookie(req) if (!t ...

javascripttypescript

Is it possible to enable full screen window functionality in Angular 2 by simply clicking a button? Let's find out

After successfully creating the user login page, I am facing an issue. When the submit button is clicked, the page should navigate to a specific component (test.component.ts and test.component.html). My goal now is to make that window go into full screen m ...

typescriptangular2-routingangular2-servicesangular2-directives

I can see my Angular 2 object displayed on the console, however, the specific properties are not showing up in the template

Below is the template and component code snippet that I am working with: Template: <div *ngIf="newJobCreated"> <h3>Name: {{newJob.name}}</h3> <h3>Job: {{newJob.job}}</h3> <h3>ID: {{newJob.id}}&l ...

javascriptangular

ngx-translate is failing to display any text within a lazily-loaded module

We are currently utilizing Angular 6 within our application and have recently initiated the process of preparing our app for lazy-loading. Our application consists of multiple lazy-loaded routes, and our goal is to utilize a single language file for all ro ...

angularlazy-loadingangular6ngx-translate

The responsive table fails to completely fill the column it is contained within

In my Angular application, I am integrating Bootstrap 4. Within one of the component's HTML files, I am attempting to embed a responsive table within a grid row. I have followed the instructions by nesting the "table" div inside another div with the ...

angulartwitter-bootstrapresponsive-designbootstrap-4angular6

Working with TypeScript to set a value for an object's field

I have two objects of the same model: interface Project { _id?: string title: string description: string goal: string tasks?: Task[] createdAt?: Date updatedAt?: Date } The first object contains all fields from the interface, while the secon ...

typescriptexpress

Determine the duration of an HTTP request in Angular applications

Is there a way to accurately measure the execution time of an HTTP request in Angular (specifically version 5)? The following code snippet is giving incorrect values because of its asynchronous nature: myFunction(someVariable):void { let startTim ...

angularhttp