Update information in a component without having to refresh it when navigating to a different route

I am currently facing a challenge with my components B and A. Component B has a post method that inserts new data and navigates directly to component A, which has a get method to display the inserted data.

My issue is how to retrieve the new data without refreshing the page. I have managed to make it work by placing navigation end in both ngOnInit and constructor.

constructor(private auth: FirstAksamProspectService, private router: Router) {

this.router.events.subscribe((router) => {
  if (router instanceof NavigationEnd) {
    this.getlistAffectaion_employe();
  }
});
  }

  ngOnInit(): void {

this.router.events.subscribe((router) => {
  if (router instanceof NavigationEnd) {
    this.getlistAffectaion_employe();
  }
});

this.getlistAffectaion_employe();


}

Is there an alternative way to achieve this?

Thank you for any assistance provided.

Answer №1

If you're looking for a solution, you could utilize a service that manages a BehaviorSubject and an observable:

private subject: BehaviorSubject<any> = new BehaviorSubject<any>(); public myObservable: Observable<any> = this.subject.asObservable();

To trigger updates, call the next() method on the BehaviorSubject within a public function in your Service. Then, in Component A's ngOnInit lifecycle hook, subscribe to myObservable. Inside the subscription, you can execute this.fetchEmployeeList();

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 an array based on numerical values embedded in strings

My array is as follows: var arr = [ '4msterdam', 'Par1s', 'N3w York', '2urich']; Is there a way to sort the elements of this array based on the numbers included in each string? ...

Personalizing buttons on a carousel in React-bootstrap

I am facing an issue with my carousel and buttons placement. The buttons need to be outside of the carousel, but I'm unsure how to connect them effectively. React-Bootstrap's activeIndex option was suggested, but since my carousel is not cyclic l ...

What is the best way to obtain a virtual in mongoose when a property is excluded?

Imagine I have a post Model with fields like UserId, Title, Desc, and a likes array which references UserIds. When querying, I have a virtual property to calculate the number of likes a post has: schema.virtual("numLikes").get(function () { return this. ...

Angular: Enhancing View Attribute by Eliminating Extra Spaces

I'm using an ng repeat directive to dynamically set the height in my code. <ul> <li ng-repeat="val in values" height-dir >{{val.a}}</li> </ul> app.directive('heightDir',function(){ return { restrict: ' ...

JavaScript's getDate() function is failing to properly adjust the date when performing addition and subtraction operations

I have been facing an issue with a JavaScript function that is supposed to adjust the date when a button is clicked. The function is intended to utilize the getDate() function to subtract 7 days from the current date value displayed in the textbox. However ...

Tips for preserving the current DOM using Ajax, jQuery, and PhP

I made some changes to my page by adding new divs, and now I want to save all of it, replacing the old content. Example of the DOM body: <body> <div id="save_dom">Save</div> <div class="box">111</div> <div cla ...

End all occurrences of XMLHttpRequest

In my code, I am calling the function SigWebRefresh at specific intervals of 50 milliseconds. tmr = setInterval(SigWebRefresh, 50); The function SigWebRefresh utilizes XMLHTTPRequest: function SigWebRefresh(){ xhr2 = new XMLHttpRequest(); ...

Troubleshooting tip for React JS: encountered an unexpected object error when trying to import components

I've been working on building a react app with Create React App, and everything was going smoothly until I encountered a frustrating error message: Element type is invalid: expected a string (for built-in components) or a class/function (for composite ...

Connecting to another page based on data list selection

I have created a datalist with multiple options and now I want to redirect to another page when one of the options is selected. Here is my initial attempt where I tried to directly add a hyperlink to the option label, but it didn't work as expected. ...

Incorporating i-frame or software development kit (SDK) to integrate Google

Does anyone know how to embed Google Meets in an Angular 12 web application using an i-frame or their SDK if available? When attempting to open a Google Meet meeting in an i-frame, I encountered the error message displayed below. I have not been able to f ...

Modifying webpage design using JavaScript for styling

Is there a way to change the css style(defined in the page source) dynamically with Java? I know it is possible to do it with JavaScript. If there isn't, are there other situations where JavaScript is the only choice developing a web app? ...

Dealing with undefined properties in Javascript can cause errors

[ { dateTime: '2016-03-30 05:55:53', value: '4.0' }, { dateTime: '2016-03-30 05:55:55', value: '17.0' }, { dateTime: '2016-03-30 05:55:57', value: '17.0' }, { dateTime: '2016-03-30 06:0 ...

Angular directive enabling two-way data binding

Feeling a bit lost with 2-way data binding in Angular. Take a look at this code snippet! the var bah can access the parent object $scope.something, but when I click the button, the value in the controller changes to false while it remains unchanged in the ...

Assign a value to the active textbox using JavaScript

Hello everyone, I am working on a page with three textboxes and one listbox. I would like to have functionality where if the user clicks on the first textbox and then selects an item from the list, that selected item should be automatically set as th ...

Exploring the child's type name with React Typescript

In my Typescript application, I am working with React Functional components extensively. I have been attempting to dynamically update certain child components within another component. Here is the code snippet: const memoizedIterateAndAddProps = useCallba ...

How do I resolve the issue of the `translate` array in `setup()` in `vuei18n` requiring an additional step or load to render the translations in the `<template/>`?

Apologies for the mention of the "extra step/load" aspect; I acknowledge that it may come across as vague and not the best choice of words. Allow me to illustrate with code snippets and two accompanying images. 1st: https://i.sstatic.net/QtDXD.png Here is ...

Send various arrays from a PHP file to JavaScript

Currently, I am extracting a large amount of data from a PHP file organized into multiple arrays. My goal is to transfer all this data to my JS file and then display each array in different sections of the website. To achieve this, I plan to consolidate al ...

transferring data from JavaScript on the client side to Express on the server side

Using JavaScript, I have created the HTML DOM that you see in the code below. Now, my goal is to send the value of an input created in JavaScript to the server side. The server is built with node.js and express framework. Once the value is sent to the serv ...

Using Angular to create an Echarts timeline that showcases 3 distinct categories

Here is an example graph created with Highcharts Struggling to replicate a chart like this using Echarts and ngx-echarts. Has anyone encountered this issue before? Currently utilizing the following dependencies: "@angular/animations": "^17 ...

Having trouble with jsPlumb accurately rendering lines

http://jsbin.com/ofapew/1/edit I am currently experimenting with jsPlumb to connect two points, specifically trying to link the green dots to the top of a black border box. One thing that is puzzling me is that even though the green dot end point appears ...