What is the best way to retrieve the previously chosen item from an array?

I have successfully implemented dynamic pill tabs with one minor issue remaining. The most crucial aspect is that when I remove a pill, I want it to return to the previously opened tab. I have provided a StackBlitz example without routes on this page: -> https://stackblitz.com/edit/pills-tabs?file=app/app.component.html

Below is all the code excluding the router page. The only difference is in line 15 of the ts file where I use routerLink="{{ tab.path }}": 

<mat-chip color="primary" selected [removable]="removable" (removed)="removeTab(fruit)" routerLink="{{ tab.path }}">   {{ tab.name }}     <mat-icon matChipRemove *ngIf="removable" class="x-icon">  ✖ </mat-icon>  </mat-chip

I need some help with setting up the question again. The current setup works fine, but when I remove a pill, I want to navigate back to the previous tab similar to using router.go(-1) in Vue.js. How can I achieve this?

javascripthtmlcssangularangular-material

Answer №1

To make use of the location service in Angular, follow these steps:

import { Location } from '@angular/common';

...

constructor(private _location: Location) {}

...

navigateBackToPreviousUrl() {
  this._location.back();
}

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

Continuously make Ajax requests to populate numerous div elements

There are two div elements present on my webpage. <div id="1"></div> <div id="2"></div> I am attempting to dynamically populate these divs using the following php call. <script> var queries = ["SELECT * from table1", "S ...

javascriptphpjqueryhtmlajax

What is the best way to make an element fixed vertically in a mobile browser while also enabling horizontal scrolling?

When using a Desktop browser, I have found a javascript code that allows me to vertically fix an element while still enabling horizontal scrolling. The element is repositioned with each scroll event. You can test this out by trying both horizontal and vert ...

javascriptmobile

Let us know when the information on a different tab is updated

I have multiple tabs and I want to indicate when a change occurs on another tab that the user hasn't clicked. For example, if the user hits the run button while on the Data pane, I would like the Errors tab to change to red to show that there was a ch ...

javascriptcss

Error: The function Undefined is not recognized by express.io

Struggling to configure express.io with individual files for each route? Check out the examples provided. Currently, I have a typical Express setup that I want to transition to express.io: Project app.js routes servepage.js Views ...

javascriptexpressexpress.io

Jquery doesn't immediately hide an element after the first click.TabPage.getSelection().extentNode rectangular_HTML

I'm experiencing a peculiar issue with an event listener $(document).on('click', '.suggested-location-item', function(event) { event.preventDefault(); $('#IDsuggestedLocationsList').html(''); $(&apo ...

javascriptjqueryhtml

Issues with Angularjs $http.get functionality

On the server side of my ASP.net MVC application, I have a method that looks like this: [HttpGet] public JsonResult GetTrenings(string treningId) { var tempId = Guid.Parse(treningId); var trening = TreningService.GetTreningById ...

javascriptasp.net-mvcangularjshttp-get

Crop and resize a portion of an image using CSS

Is there a way to display just part of an image on a webpage and scale that specific area either larger or smaller using CSS? A common method is by using the following code: $("#myDiv").css({ width: 100, height: 100, background: "url('myurl.jpg ...

htmlcssimage-scalingimage-extraction

Incorporating user names into socket.io chat for disconnect functionality

I've recently started using socket.io and have been developing a messaging chat feature. By adding usernames to the chat upon login and message submission, everything seemed to be working smoothly. However, I'm facing an issue with retrieving use ...

javascriptnode.jssocket.iomessage

What is Node.js's approach to managing concurrent operations?

Recently, I've been engrossed in this fascinating book that delves into JavaScript. In one section, it emphasizes that Node.js stands out due to its unique single-threaded event-based concurrency through an asynchronous-by-default API. I find it puz ...

javascriptnode.js

Tips for employing e.preventDefault within the onChange event handler for a select element

Is there a way to prevent the select tag value from changing using preventDefault? I have successfully prevented input from changing the value with event.preventDefault, but have not been able to do the same for the select tag. Here is an example code sni ...

javascripthtmlselectdom-eventspreventdefault

Attempting to choose everything with the exception of a singular element using the not() function in Jquery

Within the mosaic (div #mosaique) are various div elements. My goal is to make it so that when I click on a specific div, like #langages or #libraries, the other divs become opaque while the selected div undergoes a size change (which works correctly in t ...

javascriptjqueryhtmlcssselector

Changing a single array into a series of arrays

I'm attempting to reverse the flattening process of an array. The JSON array I have as input contains 4 elements: [ { "nestedObj": { "id":12 } }, { "nestedObj": { "id":555 } ...

javascriptarraysreduce

"Is there a way to separate and iterate through the results of a Group_Concat

Fetch Data from MySQL with Group Concat $result = $con->prepare("SELECT results.StuID, subjects_d.SubjectID, exams.ID, GROUP_CONCAT(results.ExamID,',',results.Exam1,',',results.Exam2,',',results.Exam3 ORDER ...

phphtmlmysql

Unraveling the mystery behind table cells failing to wrap their content when set to 100% height

Original inquiry (REVISED) CSS: Why does a table-cell sibling with a height of 100% exceed the body of the table-row? Experimenting with CSS tables, I am striving to achieve an evenly spaced column layout. I aim to have an "aside" on the left side th ...

htmlcsscss-tables

Tips on extracting a value from a subscription

I am trying to figure out how to pass a value from a subscribe function to a variable so that I can manipulate it later on. For example: getNumber: number; I need to be able to access and use the variable getNumber in the same .ts file. someMethodT ...

javascriptangulartypescript

JavaScript library error: "Uncaught ReferenceError: numjs is undefined"

Hi there! I've recently started learning JavaScript and am currently exploring the functionalities of NumJS. However, I've encountered an error that's got me stumped. Even though the file "numjs.js" is included locally within the HTML, I kee ...

javascript

Typescript error handling: Handle 404s on all Koa routes

Issue Encountering problems while setting up Auth Controllers Difficulty using Bcrypt and JWT for encryption All POST Calls to Koa resulting in 404 errors Calls to other routes are functioning correctly Potential issue with the scope of the code. impo ...

javascriptnode.jstypescriptkoakoa-router

Establish a predetermined selection for a drop-down menu

How can I set a default value for a dynamically filled dropdown menu featuring all 12 months in KnockoutJS? I want the default value to be the current month. This is how I am populating the dropdown with information: self.setMonthData = (data ...

javascriptjqueryhtmlknockout.jsdrop-down-menu

How to vertically align an image within a div that has a variable height

Is there a way to center an image vertically within a div that is 1/5 of the screen's height? I have managed to horizontally center the image, but vertical alignment seems tricky. Here's the code I've tried so far: http://jsfiddle.net/ws911 ...

htmlcssvertical-alignmentviewport-units

Web addresses and the presence of secure HTTP protocol?

Can someone confirm if it is true that when using https, URLs should begin with //[your-domain]/? A friend using WordPress mentioned this but I haven't been able to find specific information on the topic. ...

htmlurlhttps