Closing a tab in another part of the session using Typescript and Angular

Looking for a solution on how to close a tab within an Angular session that was opened from somewhere else in the same session.

For instance:

In Component A 


this.window = this.windowToken.open('Some URL', 'Some Tab Name', 'Some Tab Params');
In Some RouteGuard 

// Get reference to this.window object
this.window.close()

I attempted to store this data locally or in sessionStorage, but saving Window objects there seems not possible: 

localStorage.setItem('Window', this.window); -- this results in an error ('expects (string, string)')

What would be the recommended approach to achieve this?

angulartypescript

Answer №1

Check out this solution!

The easiest method to achieve this is by utilizing a service.

export class TabService {
  tab;

  constructor() { }

  openTab(url, spec) {
    this.tab = window.open(url, spec);
  }

  closeTab() {
    if(this.tab) {
      this.tab.close();
    }
  }

}

Live demo on Example

Please inform me if any modifications are required.

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

Intercepting Nested Requests in a Nest.js Application

Can you explain how to incorporate a nested interceptor in Nest.js? I currently have two interceptors: UsersInterceptor and PostsInterceptor UsersInterceptor: @Injectable() export class UsersInterceptor<T> implements NestInterceptor<T, Response& ...

node.jstypescriptnestjs

Issues encountered when setting up a Context Provider in React using TypeScript

I am currently in the process of setting up a Cart context in my React TypeScript project, inspired by the implementation found here: https://github.com/AlexSegen/react-shopping-cart/blob/master/src/contexts/CartContext.js. I'm encountering some conf ...

javascriptreactjstypescriptreact-context

Is it possible to combine two separate host listeners into a single function in Angular 2?

One solution is to combine 2 different host listeners into a single function so that it can be called whenever needed. @HostListener('window:unload', ['$event']) unloadHandler() { this.eventService.send({ name: 'onUnload' }) ...

angularangular2-servicestypescript-decorator

What is the best way to programmatically choose an option from a ng-select dropdown list?

My program displays a list to the user utilizing ng-select. This particular list is populated with various items: item 1 item 2 item N The user has two options when interacting with this list. They can either select an existing item or add a new one. If ...

angularangular-ngselect

Using the useRef hook to target a particular input element for focus among a group of multiple inputs

I'm currently working with React and facing an issue where the child components lose focus on input fields every time they are re-rendered within the parent component. I update some state when the input is changed, but the focus is lost in the process ...

javascriptreactjstypescriptreact-hooks

Angular displaying an Object result in place of data

I have been struggling to showcase the json result I receive from my backend on my Angular front-end. Unfortunately, I am facing challenges in displaying this json data fully as it contains characters like . and -. Currently, although I can display the nam ...

jsonangular

How can you make an IonPopover dynamically appear from a button with the perfect positioning?

I want to display a popover below a button when the button is clicked, similar to the example on the Ion docs page. However, I am having trouble implementing this in React as the code provided is only for Angular. Here is my current code: ... <IonButt ...

reactjstypescriptionic-frameworkpopoverionic-react

An issue occurred with Ionic 4: TypeError - Unable to access property 'name' as it is undefined

None of the answers to similar questions have provided a solution for me SITUATION: I've been setting up a SQL Server connection from my Ionic app. You can check out my previous question for more details The workflow goes as follows: Ionic connects ...

asp.net-mvcangulartypescriptionic-framework

Best practices for safely handling dynamic keys in Typescript

I am searching for a secure method to create keyed objects in this manner: interface Types { RED: 'RED'; BLUE: 'BLUE'; GREEN: 'GREEN'; } type TypeKeys = keyof Types; const COLORS: Types = { RED: 'RED', B ...

reactjstypescriptobjectkeytype-safety

Tips for sending arguments up in Angular2

I need to supply an argument to a function. <select class="chooseWatchlist" (change)="updateWatchlistTable(item.name)"> <option *ngFor="let item of _items">{{ item.name }}</option> </select> It's crucial for me, as I have ...

javascriptangular

Implementing Angular WebSocket to showcase elements in a sequential manner during chat

Currently, I am developing a chat application using Angular and socket.io. The server can send multiple events in rapid succession, and the front end needs to handle each event sequentially. // Defining my socket service message: Subject<any> = new S ...

angularwebsocket

Exploring Angular 9: Experimenting with iterating over a collection of objects and performing validations

Forgive me if this is a basic question, but I am new to Angular 9 and json. I am attempting to iterate through a list and only create a table row if the correct ID matches the ID passed from the previous page link. I am struggling to make the if statement ...

jsonangulartypescript

How to handle type errors when using properties in Vue3 Single File Components with TypeScript

I've hit a roadblock while attempting to utilize properties in Vue3. Despite trying various methods, I keep facing issues during the type-check phase (e.g.: yarn build). The project I'm working on is a fresh Vue3-ts project created using Vite. B ...

typescriptvue.jsvue-component

Angular 4 validation triggering the highlighting of control labels

In the process of implementing validation in my Angular 4 application, I have encountered an issue that needs some tweaking. The validation itself is functioning correctly, but I would like to modify the way error messages are displayed. Currently, when ...

angularangular-reactive-forms

What's the best way to implement satisfies with a generic type?

In my development process, I am working with components that have default values combined with props. To streamline this process, I created a single function for all components: export function getAssignProps <T extends {}>(propsMass:T[]){ return ...

reactjstypescripttypescript-typingstypescript-generics

Tips for incorporating the Sanitize library into Angular 6:

What is the most effective library for sanitization in Angular 6 to enhance security measures? Since injecting dependencies can be tricky, what are some recommended methods for implementing this in an Angular 6 project? ...

angularangular6

Is it true that Node.js can be used to run Angular and Ionic frameworks

During a conversation about performance, the following question came up: Do Angular and Ionic require Node.js to be served, or is it sufficient to just serve the dist folder on the client side app? Is Node.js purely a development tool, or is it also used ...

node.jsangularionic-framework

Differentiating body classes in Angular 5

I am working on a project with both a login screen and a dashboard screen. The body classes for these screens are different, as shown below: <body class="hold-transition skin-black-light sidebar-mini" > // for dashboard <body class="hold-transi ...

angularangular5

Creating a currency input field in HTML using a pattern textbox

In a project using HTML, Angular 2, and Typescript, I am working with a textbox. How can I ensure that it only accepts numbers along with either one dot or one comma? The input should allow for an infinite number of digits followed by a dot or a comma and ...

htmlangularjsdesign-patternstypescriptcurrency

What are the steps to integrating standard Bootstrap into an Angular application?

There are times when the navbar class, collapse class, and dropdown toggle button may not be supported in an angular application even after installing Bootstrap with scripts. I am interested in finding out how I can ensure that every Bootstrap class is fu ...

angularangular-bootstrapangular-bootstrap-toggle