Retrieving data and parameter data simultaneously from the ActivatedRoute

I am currently utilizing Angular and have a webpage where I need to send data to another page.

  1. Transmit an array of selected values
  2. Generate multiple records (associating with a model)

    this.activatedRoute.data.subscribe(({ model] }) => {
        setTimeout(() => {
            this.ngbModalRef = this.modalService.open(... as Component, { size: 'lg', backdrop: 'static' });
            this.ngbModalRef.componentInstance.model = model;
            this.ngbModalRef.result.then(
                result => {
                    console.log(result);
                   // this.router.navigate(['/order', { outlets: { popup: null } }]);
                    //this.ngbModalRef = null;
                },
                reason => {
                    console.log(reason);
                   // this.router.navigate(['/order', { outlets: { popup: null } }]);
                    //this.ngbModalRef = null;
                }
            );
        }, 0);
    });
    
    
    this.activatedRoute.params.subscribe((params: any) => {
        setTimeout(() => {
            this.ngbModalRef = this.modalService.open(... as Component, {
                size: 'lg',
                backdrop: 'static'
            });
            this.ngbModalRef.componentInstance.listOfNum = params['listOfNum'];
            this.ngbModalRef.result.then(
                result => {
                    this.router.navigate(['/order', { outlets: { popup: null } }], {
                        replaceUrl: true,
                        queryParamsHandling: 'merge'
                    });
                    this.ngbModalRef = null;
                },
                reason => {
                    this.router.navigate(['/order', { outlets: { popup: null } }], {
                        replaceUrl: true,
                        queryParamsHandling: 'merge'
                    });
                    this.ngbModalRef = null;
                }
            );
        }, 0);
    });
    

Please provide guidance on how to retrieve both messages. So far, I have only managed to access the model data in this manner.

Answer №1

If you want to wait for multiple observables to complete before taking action, you can utilize the forkJoin method from rxjs.

ForkJoin takes an array of observables and only emits a value when all of them have completed.

forkJoin(
     this.activatedRoute.data,
     this.activatedRoute.params
).subscribe(([model, params]) => {

    this.ngbModalRef = this.modalService.open(... as Component, {
        size: 'lg',
        backdrop: 'static'
    });
    this.ngbModalRef.componentInstance.listOfNum = params['listOfNum'];
    this.ngbModalRef.componentInstance.model = model;
});

Remember, the code in the subscribe block will only execute when both observables have completed their tasks.

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

Transform an Angular 2 application to seamlessly incorporate an SDK

I have been working on an Angular 2 application and I am curious if it is feasible to transform this into an SDK that can be easily integrated into other applications by simply adding script tags in their headers. If this conversion is not achievable, co ...

A guide on transitioning from using require imports to implementing ES6 imports with the concept of currying

Currently in the process of migrating a Node/Express server to TypeScript. I have been using currying to minimize import statements, but now want to switch to ES6 import syntax. How can I translate these imports to ES6? const app = require("express")(); ...

What is the best way to divide percentages accurately in Angular?

I am currently working on splitting percentages dynamically with Angular. For example, if txtBox1 has 75%, I want to split the remaining 25% between txt2 and txt3. If I change txt1 to 50%, then I want txt2 and txt3 each to receive 25%. The values may vary, ...

Which superclass does ReadonlyArray extend from?

Looking at this TypeScript code snippet: const arr: ReadonlyArray<string> = [ "123", "234" ]; arr.push("345"); An error is thrown by the TS compiler: Property 'push' does not exist on type 'ReadonlyArray<string>&apo ...

Ensuring type safety at runtime in TypeScript

While delving into the concept of type safety in Typescript, I encountered an interesting scenario involving the following function: function test(x: number){ console.log(typeof x); } When calling this method as test('1'), a compile time er ...

Compile a roster of service providers specializing in unit testing imports

Recently joining a new team that works with Angular, they asked me to implement unit testing on an existing project built with Angular 8. After researching the best approach, I decided to use Karma + Jasmine for testing. I set up a .spect.ts file structure ...

There is an issue with the Angular Delete request functionality, however, Postman appears to be

HttpService delete<T>(url: string): Observable<T> { return this.httpClient.delete<T>(`${url}`); } SettingsService deleteTeamMember(companyId: number, userId: number): Observable<void> { return this.httpService.delete< ...

Exploring the weather API integration with Angular 4

I've embarked on a journey to teach myself Angular4 by creating a Weather app. However, I'm facing challenges in connecting the API. Despite consulting various resources, such as: https://medium.com/craft-academy/connecting-an-api-to-an-angular- ...

How to handle multiple formData input in NestJS controller

How can I create a controller in Nest.js that accepts two form-data inputs? Here is my Angular service code: public importSchema(file: File, importConfig: PreviewImportConfig): Observable<HttpEvent<SchemaParseResponse>> { const formData = ...

Can you provide information on the latest stable release of animations for Angular 4?

Encountering an error during npm install Warning - @angular/[email protected] requires a peer of @angular/[email protected] but none was installed. Error encountered during npm start Issue with node_modules/@angular/platform-browser/animations ...

Having trouble utilizing the DatePicker component in my react native application

I've encountered an issue while using DatePicker in react native. Whenever I try to use it, an error pops up saying: "render error a date or time must be specified as value prop". Here is the link to my repository: my github repository const [date, se ...

The object is classified as 'undetermined' (2571) upon implementation of map() function

Despite conducting a thorough search about this error online, I still haven't been able to find a solution. Let's jump into an example with data that looks like this: const earthData = { distanceFromSun: 149280000, continents: { asia: {a ...

Template for typed variable - `ng-template`

How can the parent component correctly identify the type of let-content that is coming from ngTemplateOutletContext? The current usage of {{content.type}} works as expected, but my IDE is showing: unresolved variable type Is there a way to specify the ...

Encountering an issue with Angular2 while attempting to map data from a WebAPI (Error: Unable to perform data differentiation

I've been struggling to retrieve data from an API and display it in a list using ngFor. I've experimented with promises, observables, map, subscribe, async pipe, but haven't had any success. It seems like the API is being called, but I keep ...

Troubleshooting: The canvas texture in Phaser 3's Update() function is not functioning

I've been attempting to transform this tutorial into Phaser 3: but have encountered an issue with the update() function not working. I also tried using the refresh() function, but that didn't solve the problem either. In my file a.ts, I have cre ...

I encountered an error while attempting to create an npm package from a forked repository on GitHub

Check out this GitHub repository: https://github.com/jasonhodges/ngx-gist Upon running the package command, I encounter an error: rimraf dist && tsc -p tsconfig-esm.json && rollup -c rollup.config.js dist/ngx-gist.module.js > dist/ngx- ...

Unable to find solutions for all parameters needed by a CustomComponent within Angular

Whenever I attempt to compile the project for production, an error pops up: There is a problem resolving all parameters for EmployeeComponent in C:/.../src/app/employee/employee.component.ts: (?, ?, ?). Oddly enough, when I run the application, every ...

Issue with Angular 6 and Chrome: Event listener ($event) occasionally throws the error "unable to access property 'value' of null"

It appears that the buttons are being iterated correctly using ngFor, and upon inspection they have the correct attributes. However, when clicked, the function in the controller sometimes claims the parameter is 'undefined', happening randomly ab ...

Creating a structured state declaration in NGXS for optimal organization

Currently, I'm delving into the world of NGXS alongside the Emitters plugin within Angular, and I find myself struggling to grasp how to organize my state files effectively. So far, I've managed to define a basic .state file in the following man ...

Is there a possibility of Typescript expressions `A` existing where the concept of truthiness is not the same as when applying `!!A`?

When working with JavaScript, it is important to note that almost all expressions have a "truthiness" value. This means that if you use an expression in a statement that expects a boolean, it will be evaluated as a boolean equivalent. For example: let a = ...