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

Arranging the output of a Typescript project

I'm currently advocating for Typescript to be implemented in our web application. Can anyone provide insight on the best method for structuring Javascript output files? Should they be excluded from source control? And when it comes to testing, is it p ...

typescript

Consecutive HTTP requests in Angular using rxjs

Currently working on a function that utilizes concatMap to perform sequential HTTP calls, such as adding a person, using the returned information to add a contact, and then adding some accounts. This function takes in a list (in my case, portfolios) and f ...

angulartypescriptrxjsobservable

How to Manually Update the Angular Release Version in your environment.ts File using the CLI

Within the environment.ts file, we store the release version. I am looking for a command to increment the minor version from the Command Line Interface (CLI) in order to use it within a Jenkins build job. export const environment = { … version: ' ...

angularjenkinsangular-cliversioning

Generate a customizable form by utilizing a JSON file as a template. The JSON file can be easily modified by clicking a button, allowing for real-time

My goal is to develop a dynamic form using the guide provided at https://angular.io/guide/dynamic-form. I am utilizing two JSON files, namely sbb.json and gx.json. The initial creation of the form from the JSON file works flawlessly. However, I encountered ...

jsonangulardynamicform

Which delivers better performance: HTTP request from server or client?

Considering the optimal performance, is there a difference in using Angular's HTTP request within a MEAN-stack environment compared to utilizing Request.js or similar for server requests? ...

javascriptnode.jsangular

Creating Angular components and attaching them to the body tag is a simple yet

My goal is to create a component at the root element of the page. I have come across some resources that are similar to what I need, but they use the DynamicComponentLoader which is now considered deprecated. public component: any; constructor( public ...

angular

Is it possible to inject a descendant component's ancestor of the same type using

When working with Angular's dependency injection, it is possible to inject any ancestor component. For example: @Component({ ... }) export class MyComponent { constructor(_parent: AppComponent) {} } However, in my particular scenario, I am tryin ...

angulartypescript

Tips for retrieving data sent through Nextjs Api routing

Here is the API file I have created : import type { NextApiRequest, NextApiResponse } from 'next/types' import { PrismaClient } from '@prisma/client' const prisma = new PrismaClient() export default async function handler(req: NextApi ...

reactjstypescriptnext.js

What is the most effective way to refresh SCSS in a current Angular project?

I'm in the process of updating the SCSS version within my angular project. From the beginning, I selected scss in the angular cli for this project, so I have been using SCSS already. However, now I need to incorporate a spacing library that requires t ...

angularsass

A detailed guide on preserving session in Angular 4: a step-by-step approach

I am a beginner with Angular 4 and I'm unsure of how to implement session functionality. Can someone please explain the step-by-step process of implementing this feature in Angular 4, including where to write the necessary code? Below is an example co ...

angular

Transferring data to .NET using Angular's POST method

I am encountering an issue when trying to send parameters to the .net side as they are coming back as undefined. The main problem I am facing is that I have two post methods with the same parameters, so I attempted to send a string along with the other one ...

angular

Typescript: How to Ensure Tuple Type is Explicit and Not Combined

I have a code snippet that defines a person object and a function to get its values: const person = { name: "abc", age: 123, isHere: true }; const getPersonValues = () => { return [person.name, person.age, person.isHere]; }; const [n ...

typescripttypescript-typings

Generate random entries from an object based on specific criteria and append them to a fresh object using Typescript

Experimenting with Ionic2 and Typescript has been my recent focus. I have an object that contains various meals, calorie counts, and meal types (such as vegan). This is how the object looks: [ { "id":14093, "name":"Proteinshake mit Wasser ...

angulartypescriptionic2

Automatically adjust padding in nested lists with ReactJS and MaterialUI v1

How can I automatically add padding to nested lists that may vary in depth due to recursion? Currently, my output looks like this: https://i.stack.imgur.com/6anY9.png: However, I would like it to look like this instead: https://i.stack.imgur.com/dgSPB. ...

cssreactjstypescriptmaterial-uinested-lists

bind a class property dynamically in real-time

I need to dynamically generate a TypeScript class and then add a property to it on the go. The property could be of any type like a function, Promise, etc., and should use this with the intention that it refers to the class itself. let MyClass = class{ ...

javascripttypescriptclass

Is it possible to create my TypeORM entities in TypeScript even though my application is written in JavaScript?

While I find it easier to write typeorm entities in TypeScript format, my entire application is written in JavaScript. Even though both languages compile the same way, I'm wondering if this mixed approach could potentially lead to any issues. Thank yo ...

javascriptnode.jstypescriptarchitecturetypeorm

AngularFire2 Firestore Custom Query: retrieve documents based on current date and time.startTime

Welcome to the world of AngularFire2 and Firestore! My objective is clear: Query data from Firestore where startTime matches currentDateRange. I am facing some challenges with creating a dynamic query in Firestore. After going through the official docume ...

typescripttimestampangularfire2google-cloud-firestore

Issue encountered in ../../../../ Unable to locate namespace 'Sizzle'

Following the execution of npm install @types/jquery, I encountered a compilation issue while running my Angular project with ng serve ERROR in ../../../../../../AppData/Roaming/JetBrains/WebStorm2020.1/javascript/extLibs/global-types/node_modules/@types/j ...

jqueryangulartypescriptnpm

Instructions for invoking an extra npm start script within Angular 2 cli configuration

Currently working on two different projects: Main angular 2 project which is launched using the cli/ng serve and runs on localhost:4200. Also working on Reveal.js, started using npm start and runs on localhost:8000 I'm interested in a way to stream ...

angularnpmangular-cli

Error: Unable to locate script.exe when spawning the Nodejs process

When trying to run an exe in my electron app, I am encountering an error. Even though the path is correct, it still throws an error. Uncaught Error: spawn exe/0c8c86d42f4a8d77842972cdde6eb634.exe ENOENT at Process.ChildProcess._handle.onexit (inter ...

node.jstypescriptelectronipcelectron-forge