Ensure that only a single popup tab is opened utilizing Angular

Is there a way to open only one tab at a time, where the previous tab needs to be closed before opening another one? I have a button that opens the tab upon clicking:

onClick(){
        let url = this.router.createUrlTree(['/user/', this.id]);
        window.open(url.toString(), "_blank", "resizable=no, toolbar=no, scrollbars=no, menubar=no, status=no, directories=no, location=no, width=1000, height=600, left=" + horizontal + " top=100 " );
        console.log(this.data.maxtab);
        }

This action takes you to the "user" component which is nested within another component.

If one tab is already opened and an attempt is made to open another component, the focus should remain on the currently opened tab.

I've tried changing a variable called maxtab in the ngOnDestroy lifecycle hook of the component but it was unsuccessful. How can I achieve this functionality? Would using OnBeforeunload in JavaScript help (I researched it but couldn't implement it), or are there other methods available?

javascriptangulartypescript

Answer №1

give this a shot,

create a new variable within the component.ts file

private myNewWindow;

Next, implement this code inside your function:

if(this.myNewWindow) {
 this.myNewWindow.close();
}
this.myNewWindow = window.open(url.toString(), "_blank", "resizable=no, toolbar=no, scrollbars=no, menubar=no, status=no, directories=no, location=no, width=1000, height=600, left=" + horizontal + " top=100 ");

Answer №2

Make sure to include the name parameter when using window.open to specify the name of the window.

window.open(URL, name, specs, replace)

For example:

var myWindow = window.open(url.toString(), "mypopup", "resizable=no, toolbar=no, scrollbars=no, menubar=no, status=no, directories=no, location=no, width=1000, height=600, left=10 top=100");
if (myWindow) {myWindow.focus()}

You can choose any name instead of "mypopup".

By including a specific name, you won't have to close the previous popup as the new URL will load in the same window.

The myWindow.focus() function will focus on the existing popup while loading the new URL.

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 we stop Angular components from being destroyed during navigation?

Consider the scenario where I have two distinct Angular 2 components known as ComponentA and ComponentB. My goal is to navigate from ComponentA to ComponentB and then return to ComponentA without needing to reinitialize it. In the current setup of Angular ...

javascriptangulartypescriptangular-router

Is there a way to toggle glyphicons in Angular 2 while also triggering their functions? Maybe using *ngIf?

I am working on a feature to add items to favorites in my Angular 2 app. The code snippet provided below is able to display either a filled star or an empty star based on the current status of the object. It also triggers the appropriate function to favori ...

angular

Enhancing MongoDB performance with Mongoose for efficient array save or update operations

After a user saves a question, the question may include a list of "tags". To handle this data efficiently, I need to compare these tags with existing ones in the collection. If a tag already exists, its count should be updated; otherwise, it needs to be ...

javascriptnode.jsmongodbexpressmongoose

Display alternative component upon button click in React.js

After creating the default layout, I'm aiming for a scenario where clicking each button only alters specific parts of the layout through the content component. React router is being utilized to manage different pages. Each button corresponds to a uni ...

javascriptnode.jsreactjsmaterial-ui

Update the browser value using AJAX without the need to refresh the page

After retrieving a value from an XML file using ajax jquery, I encountered an issue. When I change the value in my XML file, it does not automatically update in the browser. <?xml version="1.0"?> <count><number>5</number></count ...

javascriptphpjqueryajaxxml

Utilizing the Controller with react-hook-form and material-ui to enhance the functionality of the FormControlLabel and

When using Material-ui with react-hook-form, it is recommended to use <Controller along with the render method instead of using "as = {xy-control}". Additionally, avoid mixing controller with inputRef = {register}. Using a single control is not an issue ...

reactjstypescriptreact-hook-form

Do Angular 2 component getters get reevaluated with each update?

What advantages do getters offer compared to attributes initialized using ngOnInit? ...

angulartypescript

What exactly are the implications of having dual type declarations in TypeScript?

I recently came across the Angular tutorial here In the code snippet below, there are double type declarations that I am having trouble understanding. handleError<T>(operation = 'operation', result?: T) { return (error: any): Observabl ...

angulartypescript

Arrange all absolute divs equidistant from each other

I'm struggling with positioning multiple absolute divs inside a relative container using the CSS 'left' property. I want these inner divs to be evenly spaced regardless of how many there are, without setting fixed values for each. Currently ...

javascriptjqueryhtmlcss

Divide and conquer - meteorjs

I am currently utilizing the most recent version of Meteor. Meteor is designed to keep everything within the same directory structure, like this: MeteorProject -- .meteor -- client -- imports -- server -- test -- node_modules -- packa ...

javascriptnode.jsmeteor

Having trouble with jQuery scrollTop not working after loading content with ajax?

When the html content is loaded via ajax, I need to scroll to a specific element. This element has the attribute data-event-id="". However, there are instances when the variable $('.timelineToolPanel[data-event-id="'+id+'"]').offset().t ...

javascriptjqueryhtmlajax

Issue of memory leakage while working with promises

My node.js cluster is set up with a primary that manages worker cycles (in the while loop) and listens to worker messages for progression in the cycle. (In this code snippet, I simplified the structure to highlight the issue) Server.js var cluster = requi ...

javascriptnode.jspromiseeventemitter

Running an HTTP request conditionally within combineLatest

I'm working on a combineLatest function that makes 2 http requests, but I only want the second request to be made if a specific condition is satisfied. combineLatest([ this.leadsService.fetchALLLeadsActivityChart(this.clientId, this.getParams(option ...

angulartypescript

Is there a TypeScript alternative to triggering a click event on a specific class using $(".class").click()?

I am currently utilizing a date range picker within an Angular project. <button type="button" class="btn btn-danger daterange-ranges"> <i class="icon-calendar22 position-left"></i> <span></span> <b class="caret"></b ...

jqueryangulartypescript

Resolving conflicts between class names for React-Icons in Typescript and Javascript (Answering my

After working with React in JavaScript, I made the switch to NextJs with TypeScript. I encountered an issue when trying to import react-icons such as BiUser. In React, adding a className to icons worked smoothly, but in TypeScript, it resulted in an error ...

javascriptreactjstypescriptnext.jscomponents

What is the best way to create a loop using JSON information?

Seeking assistance to create a loop using JSON data to display the title, link, and description of advertisements in HTML format. Provided is a JSON template with two ads, but my actual JSON contains 10-20 IDs. What am I overlooking in the code below? Sto ...

javascriptjquery

Utilizing React to retrieve a variable from a script within a component

Struggling to integrate an external library (Google Maps) for use in a React component. index.html file <div id="app"></div> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY_GOES_HERE&callback= ...

javascriptgoogle-mapsreactjs

Why isn't my ng-click function functioning properly on Google Maps in AngularJS?

i have two stores in my database and am attempting to display them on a Google map with markers. I have an ng-click function inside the info window to pass the store id, but it seems like ng-click is not working. Is there any alternative method to pass t ...

javascriptangularjsgoogle-maps

Error message: The Bootstrap .dropdown() method failed because it encountered an "Uncaught TypeError: undefined is not a function"

I've encountered an issue that seems to be a bit different from what others have experienced. Despite trying various solutions, I still can't seem to fix it. I suspect it might have something to do with how I'm importing my plugins. The erro ...

javascriptjqueryhtmltwitter-bootstrap

Methods for adjusting data based on the current user's login

I'm currently working on integrating a user login feature using Angular 6 for a stock management system. The user credentials are saved in the database, and I have successfully retrieved them into a component (login) for validation. After a successful ...

angulartypescriptangular6