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.

angulartypescriptangular-routingangular-router

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

Adjusting the height dynamically of the final div to accommodate various screen resolutions using Angular 8

I am currently developing an enterprise application with Angular, featuring a Sidebar on the left and content on the right. The content container includes text at the top and dynamic elements like tables that need to be displayed below it. To achieve this ...

angularresponsive-design

Utilizing Class Types in Generics with TypeScript

Struggling to implement a factory method based on the example from the documentation on Using Class Types in Generics, but hitting roadblocks. Here's a simplified version of what I'm attempting: class Animal { legCount = 4; constructor( ...

typescript

Is there a way to reset the yAxes count of a chart.js chart in Angular when changing tabs?

I am currently using chart.js within an Angular framework to visually display data. Is there any method available to reset the y-axis data when changing tabs? Take a look at this Stackblitz demo for reference. Upon initial loading of the page, the data ...

htmlangulartypescriptchart.js

The best location for storing Typescript files within an ASP.NET Core project

My Typescript app is built on AngularJS 2 with ASP.NET Core, and currently I store my TS files in the wwwroot directory. While this setup works well during development, I am concerned about how it will function in production. I aim to deploy only minified ...

angulartypescriptgulpasp.net-core

Angular 7 and MVC: A Perfect Pair

After working on developing an SSO App that utilizes C# and AngularJs, I am now embarking on adding a new project to my existing SSO app. For this new project, I intend to leverage Angular 7 instead. Could you please provide guidance on how to incorporat ...

c#angular

Mapping Observable.forkJoin() responses to the respective requests can be achieved by following these steps

I have a tool that uses the httpClient to generate response observables for a pipe. I also have a collection of request URLs. This is how the code appears: let observables = urls.map(url=>myPipe.transform(url)); forkJoin(observables).subscribe(results=& ...

angular

What is the importance of a subclass providing services to a superclass in Angular?

While exploring some Angular code today, I stumbled upon this interesting snippet: export class ContentFormComponent extends FormBase { ... constructor( private authService: AuthService, private apiService: ApiService, private segmentService: Segme ...

angulartypescriptoopdependency-injectionfrontend

The TypeScriptLab.ts file is generating an error message at line 23, character 28, where it is expecting a comma

I am attempting to convert a ts file to a js file. My goal is to enter some numbers into a textarea, and then calculate the average of those numbers. However, I encountered an error: TypeScriptLab.ts(23,28): error TS1005: ',' expected. I have in ...

javascriptweb-servicestypescript

How can I enable SCSS/SASS support on Parcel-Angular5?

I started a project using angular cli. My intention is to incorporate scss into the project. In the terminal of WebStorm, I entered : ng set defaults.styleExt scss I proceeded by renaming all the .css files to .scss and adjusted the imports accordingly ...

angularsassangular-cliparceljs

Is there a way to run an observable only once?

Within our project, we have implemented a specific approach: instead of retrieving the value from the observable, we directly add the value to the store. See the code snippet below for an example: loadReport() { return this.http.get(url, { params: ht ...

angularangular-akita

Is there a way to detect and handle errors triggered by a callback function?

My component has the following code snippet: this.loginService.login(this.user, () => { this.router.navigateByUrl('/'); }); Additionally, my service contains this method: login(credentials, callback) { co ...

javascripttypescript

Obtain varied results from the Knockout module

In my application, I am utilizing Knockout and Typescript. One of the classes in my code is as follows: class Address { State :string; ZIP: string; Street: string; } I want to create a component that will handle the updating of an object of ...

typescriptknockout.jscomponents

Error TS2304: Unable to locate identifier 'QRScanner'

I am currently exploring https://www.npmjs.com/package/cordova-plugin-qrscanner in order to implement a QR scanning feature in my mobile application. As part of the initial steps, I have written the following code snippet in my typescript file: function o ...

node.jsangularcordovanpmplugins

Creating a custom event handler for form input changes using React hooks

A unique React hook was created specifically for managing form elements. This hook provides access to the current state of form fields and a factory for generating change handlers. While it works seamlessly with text inputs, there is a need to modify the c ...

javascriptreactjstypescript

Tips for transferring a column in an array to an object field within an array

I have a piece of code where I need to pass values from the 'dataList' array into this.data object's 'labels' and 'datasets'-> data. When I try to directly set the values, I get an undefined result. So I created a var ...

javascriptangulartypescript

Keying objects based on the values of an array

Given the array: const arr = ['foo', 'bar', 'bax']; I am looking to create an object using the array entries: const obj = { foo: true, bar: true, bax: false, fax: true, // TypeScript should display an error here becau ...

javascripttypescript

Elastic Beanstalk hosted apps do not support the transmission of large files

I've been working on a web application that requires storing large files, specifically mp4 videos with sizes sometimes exceeding 100mb. However, I encountered an error when trying to upload these files from a static Angular website hosted in an S3 buc ...

node.jsangularamazon-web-servicesamazon-s3amazon-elastic-beanstalk

Button in Angular gets stuck when a touchscreen is long pressed

In my Angular2 application, I am facing an issue with a button when running on a Windows 10 touchscreen PC in Chrome. Normally, the button works fine and executes the click function. However, if the button is held for 1-2 seconds, it gets stuck and fails t ...

cssangulartypescript

Enhancing Visuals with src="imageUrl within Html"

Is there a way to customize the appearance of images that are fetched from an API imageUrl? I would like to create some space between the columns but when the images are displayed on a medium to small screen, they appear too close together with no spacing. ...

htmlangulartypescriptbootstrap-4sass

I'm struggling to get a specific tutorial to work for my application. Can anyone advise me on how to map a general URL to the HTTP methods of an API endpoint that is written in C

I am struggling to retrieve and display data from a C# Web API using Typescript and Angular. As someone new to Typescript, I followed a tutorial to create a service based on this guide: [https://offering.solutions/blog/articles/2016/02/01/consuming-a-rest- ...

c#angulartypescript