ABC page has both a "Back" and "Next" button. After clicking the "Next" button, I am directed to the XYZ page, which also includes a "Back" button. When I click the "Back" button on the XYZ page, I should be brought back to the ABC page without seeing the "Back" button on the ABC page as per the requirement. How can I achieve this functionality using Angular 9?
To maintain a record of your browsing history, consider using a service to store it. You can add URLs to the history when navigation ends and remove them when the back button is pressed.
Here is an example of a NavigationService class:
export class NavigationService {
public history: string[] = [];
constructor(private router: Router) {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
if (this.history[this.history.length - 1] != event.urlAfterRedirects)
this.history.push(event.urlAfterRedirects);
}
});
}
back(): void {
if (this.history.length > 1) {
const route = this.history.pop();
this.router.navigate([this.history[this.history.length - 1]]);
}
}
}
You can add a button to your component and inject the NavigationService into its constructor:
constructor(public navigationService:NavigationService) {}
<button [disabled]="navigationService.history.length<=1"
(click)="navigationService.back()">back</button>
Does anyone have any information on this? ...
Hi there! I'm facing 2 issues with my code, you can find a DEMO here When adding a product to the sale form, the input field for `description` changes for all products. Changing the input product in the sale does not reflect the change. I have shar ...
I was hoping that when the button is clicked, the scroll would move in the direction of the click while holding down the button. Initially, it worked flawlessly, but suddenly it stopped functioning. export default function initCarousel() { const carous ...
Hi there, I need help with the following code snippet: function getLocation() { var positionLeft = $('#element').position().left; var positionTop = $('#element').position().top; } I also have this line of code: $('ul#con ...
$sql=mysql_query("SELECT b.book_id,u.user_id,user_name,book_name,review_date,book_rating,review FROM tbl_books b,tbl_user u,tbl_book_reviews br WHERE b.book_id=br.book_id AND u.user_id=br.user_id ...
I am currently researching the number of moves each Pokemon from the first generation could learn. After some exploration, I came across a helpful website that provides this information: The website lists 151 Pokemon, and for each of them, their move set ...
I'm attempting to create a layout where divs are displayed from top to bottom, but once they reach the bottom of the browser window, any additional divs will overflow to the right. You can take a look at the desired layout here: https://i.stack.imgur. ...
CLICK HERE FOR THE IMAGE So, let's tackle the issue at hand. I have an array that contains data fetched from an API. These data points are essentially messages. Now, below is the TypeScript file for a component where I aim to display all these messag ...
Is there a way to make the entire screen reset to its original state with just one click anywhere on the screen, rather than having to click a specific button? Any assistance on this matter would be greatly appreciated. Thank you! JQUERY CODE $(".readNow ...
I'm working on creating an AR effect by placing a simple rectangle on my camera preview. The goal is to have the rectangle stay fixed in position even as the camera moves. I understand that I need to access the gyroscope of my smartphone to achieve th ...
I am working with an images array that contains three jpg files. I am trying to set the background image of a class called pic using images from the array. The issue I'm facing is that the images are stored in an images folder with the URL images/. I ...
One key element in the application is the <app-tabs-components> component. This component retrieves data from a service. The service contains a variable called show: boolean, which controls whether the component is displayed or hidden on the page. ...
Looking to set up an ion-select menu in Ionic4 where users can pick a value between 20 and 220 without manually typing each number. I attempted to use the approach detailed in this post Tersest way to create an array of integers from 1..20 in JavaScript ...
I have 2 separate divs displayed on a website: <button class="form-control margin btn btn-warning hide_all" id="addLinks">Link Pages</button> <button style="display: none" class="form-control margin btn btn-primary hide_all" id="hideLinks"& ...
I'm looking to access and read files as well as subfolders within a folder that is selected using <input type="file"> I understand that I could potentially use <input type="file" multiple webkitdirectory />, but this solution is specific ...
My iPhone lockscreen theme features various elements displaying weather facts such as text and small images. Currently, these elements are positioned in the middle of the screen and I want to move them all to the top. Each element has a unique position abs ...
In my current project, I am utilizing React Material Autocomplete fields, which includes a nested TextField. I have successfully implemented standard styles for when the field is empty and only the label is visible, as well as different styles for hover ef ...
I've been trying to adjust the height of a vertical slider in vuetify2, but setting it to "800px" or using style="height:800px" doesn't seem to work as intended. Even though the box within my grid expands, the height of the slider remains unchan ...
When using jQuery to dynamically add content to a "div" element, the content is visible in the DOM but not in the view page source. For example: <div id="pdf"></div> $("#btn").click(function(){ $("#pdf").html("ffff"); }); How can I ensur ...
I have a tab within a div that includes text and an svg icon as shown herehttps://i.stack.imgur.com/TjwIK.png When I click on the tab, it expands like this https://i.stack.imgur.com/XNuBi.png After expanding, I want the svg icon to change to something e ...