Extract Data from Pipe in Angular 4 and Retrieve it Using Behavior Subject

Welcome to my DetailService.ts:

Send Detail()

sendDetail(id: number) {
    console.log("Sending detail");

    const url = this.rootUrl + 'api/Details/Select?ID=' + id;

    this.http.get(url).pipe(
      retry (3)
    ).toPromise()
    .then((data: any) => {
        this.detailSubject.next(data.Entity);
    });
}

GetDetail()

getDetail() {
    console.log("Getting detail");
    console.log(this.detailSubject);
    return this.detailSubject;
}

Now let's look at Resolver.ts:

Resolver.ts

resolve(route:ActivatedRouteSnapshot, state:RouterStateSnapshot): Observable<any> {
    return this.DetailService.getDetail()
        .pipe(
            map(object => 
            {
                console.log(object); //Data retrieved successfully
                return object;           
            })
        );
}

Routing to Child Component:

{
  path: 'edit/:state',
  component: DetailComponent,
  data: {
    text: 'edit',
    nav: true,
    breadcrumbs: true
  },

  resolve: {
    object: Resolver
  },
  canActivate: [AuthGuard]

},

 providers: [ Resolver, DetailService ]

Routing to Parent Module:

 {
      path: 'detailsModule',
      loadChildren: 'app/layout/Details/some- 
 details/some-details.module#SomeDetailsModule',
      data: {
          preload: false,
          text: 'trans Amendment'
       },
       canActivate: [AuthGuard]
 },

Issue: There seems to be an issue with navigation to the component. Upon tracing, it appears that ResolveEnd is not triggered. Here is how I am calling the service within the component:

ngOnInit() {
  console.log("Object from Route");
  console.log(this.route.snapshot.data['object']);   
  this.object = this.route.snapshot.data['object'];
}

If you have any insights on where I might be going wrong, please feel free to share. Thank you!

Answer №1

Figured it out. I realized that ResolveEnd was not being triggered because I forgot to add `this.tranDetailSubject.complete(); in Send Detail() right after next().

SendDetail():

sendDetail(id: number) {
console.log("Snd trandetail");

const url = this.rootUrl + 'api/Details/Select?ID=' + id;

this.http.get(url).pipe(
  retry (3)
).toPromise()
.then((data: any) => {
    this.detailSubject.next(data.Entity);
    this.detailSubject.complete(); //This ensures that ResolveEnd is triggered as the observable is now complete.

});
}

`

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

Tips for deleting markers from a TomTom map on a web application using Angular 5

I have integrated the TomTom map into my web application to display vehicles on the map. While I have successfully displayed the vehicles, I am now facing an issue with removing markers that have been added to the map. Please refer to the attached screens ...

Invalid Type Property - Request and Response Express Types

When I try to utilize the Request or Response types in this manner: app.use('*', (req: Request, res: Response, next: NextFunction) => { res.set('Cache-Control', 'no-store'); const requestId: string = req.headers[&a ...

Is passing data through interfaces a suitable practice in TypeScript?

In my project, I have come across instances where an interface is being utilized instead of a class. For example: function check(car: ICar) { //perform some actions } this.check({mark: "Toyota", colour: "blue"}); Is it acceptable to continue using inter ...

Angular: How can I apply animation to rotate an image within a component?

Within my map application, I have implemented a component called compass component. I am seeking a way to programmatically rotate this compass with animation as the map is rotated. The solution involves utilizing angular animation. To achieve this functio ...

Navigating in an Electron app using Angular

It appears that I am encountering difficulties with routing pages in my angular electron desktop application. Despite configuring the routing similar to an angular app, nothing seems to be functioning properly. I have specified router links such as "/hom ...

Injecting styles haphazardly using styled-components

When populating a grid with various controls such as an up-down counter and a text box, I currently inject styles into the cls member. For example, classes like wide-input and narrow-input: render(): ReactNode { const input: CellItem[] = [ { i ...

Guide to implementing autocomplete feature using API in Angular with the Material Design framework

I am facing a challenge while trying to implement Angular Material in my project. Despite getting all the companies, the autocomplete feature is not functioning properly. I have also tried using the async pipe but keep encountering the following error: ...

Issue: A 404 Not Found error was encountered while attempting to load the app.js file at http://localhost:3622/(...) along with angular 2

Currently, I am in the process of developing an Angular 2 application using TypeScript within Visual Studio 2015. The application is based on Angular release candidate 1. While running the application, I encountered the following error message in my brows ...

How to prevent unnecessary new instances from being created by the Inject() function in Angular

Can someone please clarify if the inject() function provides different instances of a service? I suspect this might be why my code is not functioning as expected. Let's examine the code snippet below: { path: 'recipes', comp ...

Upgrading from Angular 10 to 13 resulted in an error that required adding 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas'. Although this fix was implemented, the issue still persists and the application remains broken

Here are a few examples of errors: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurred in the template of component ShochatactivestreamviewShellComponent. Error: src/app/money_makers/shochat_guts/shochat_content_creato ...

Hold off until all commitments are fulfilled in Firestore

Is there a way to ensure that all promises are resolved before moving on to the next line of code? Currently, it seems like it's moving to the next line without completing the operation below. I want to make sure that the forEach loop is fully execute ...

Preserve Angular 2 service instances while navigating between routes

I am faced with a scenario where I have three components that are all utilizing the same DataService. This is not because they share the same data, but rather because they use the exact same methods and patterns: @Component({ templateUrl: './data ...

Beware: The use of anonymous arrow functions in Next.js can disrupt Fast Refresh and lead to the loss of local component state

I am currently encountering a warning that is indicating an anonymous object in a configuration file, and even specifying a name for it does not resolve the warning. Below you will find the detailed warning message along with examples. Warning: Anonymous ...

Is there a similar function to $.ajax for React.js and Angular.js?

Can you guide me on how to send data using both React and Angular? Is there a similar function to $.ajax in React and Angular frameworks? I am looking for a post function that works like the one shown below in both React and Angular: $.ajax{ url:"test.p ...

Tips for showing the data from a JSON object with numerous arrays in Angular HTML

I managed to create a JSON object by parsing CSV file fields using the papa Parse library. Now, my goal is to showcase this data on an HTML page. However, I'm struggling with how to extract the arrays from the JSON object and transfer them into a vari ...

Angular: Unable to locate route declaration in the specified path /src/app/app-routing.module.ts

Whenever I attempt to set up automatic routing for components that have been created using the command below ng generate module orders --route orders --module app.module I encounter the following error message The requested URL /src/app/app-routing.mod ...

Is it possible to set up TypeScript npm packages to be installed in their original TypeScript format rather than JavaScript for the purpose of examining the source code?

Despite my lack of expertise in the inner workings of how a TypeScript library compiles itself to JavaScript before being placed in the node_modules directory, I have a question: Coming from a PHP background, I am accustomed to being able to explore any l ...

Specify the return type based on specific parameter value

I'm facing a situation where I have two definitions that are identical, but I need them to behave differently based on the value of the limit parameter. Specifically, I want the first definition to return Promise<Cursor<T>> when limit is g ...

What causes the lack of minlength validation when the form is in its initial state?

Check out the code snippet below: <input [(ngModel)]="someProperty" minlength="5" /> I recently ran my app and used the browser debugger tool to inspect the state of this input field. Surprisingly, I noticed that it was marked as ...

Invalid for the purpose of storage

Encountering the following error message: The dollar ($) prefixed field '$size' in 'analytics.visits.amounts..$size' is not valid for storage. return Manager.updateMany({}, { $push: { & ...