Communicating Progress Updates from C# to Angular 6 Using HttpPost

I'm building an Angular 6 application with a progress bar that displays the rendering and downloading progress of a PDF file as a percentage. Here's my Post call:

renderReport(renderObjectId: number): Observable<HttpEvent<Blob>> {
    return this.httpService.post('/render/report/' + renderObjectId, {
        observe: 'events',
        responseType: 'blob'
    });
}

The corresponding backend method looks like this:

[HttpPost]
[Route("report/{renderReportId}")]
[ResponseType(typeof(HttpResponseMessage))]
public HttpResponseMessage PrintReport(int renderReportId)
{
    var man = new RenderingManager();
    MemoryStream pdfFileStream = man.RenderReport(renderReportId);
    return CreatePdfDownload(pdfFileStream);
}

The RenderReport() method takes some time because it involves writing and validating XML. I want to be able to subscribe to updates from the backend in the frontend, such as "currently in step 5 of 12 in RenderReport()". Is there a way to achieve this, possibly by manually returning status updates after each method call within RenderReport?

c#asp.netangulartypescripthttp

Answer №1

If you have a time-consuming task that needs to be run when your API is called, consider running it asynchronously. Instead of waiting for the task to finish, return an Accepted (202) status code immediately along with a Location header. Users can then continuously poll this location to check the status of the task using a unique identifier stored in-memory. Once the task is complete, remember to delete this identifier to signal completion.

For more information, check out:

Learn about long-running operation polling at:

This method allows you to avoid waiting for the task to finish and instead keep track of updates by continuous polling.

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

Pause for Progress - Angular 6

I'm looking for a solution to solve the following issue. I need to access a property that will store data from an http request. Therefore, I want to verify this property only after the transaction is completed. validateAuthorization(path: string): ...

angulartypescript

The date displayed in the table is incorrectly showing 04 instead of 03 when using the pipe

{{element.createdAt | date: 'MM/dd/yyyy h:mm'}} why are the dates in the database all showing as 23 but some values are displaying as 24? Please confirm. The first two values created in the db show a createdAt time of 3, but the table is showing ...

angularangular-materialmaterial-ui

The "number" input type is functioning correctly on Chrome, but on Firefox, it is accepting characters other than numbers

While developing in Angular, I encountered a challenge where I needed to create an input that only accepts numeric characters. Initially, I tried using type="number" which worked perfectly in Google Chrome but surprisingly allowed non-numeric characters ...

angulargoogle-chromefirefoxinputnumbers

The @output decorator in Angular5 enables communication between child and

Hello fellow learners, I am currently diving into the world of Angular and recently stumbled upon the @output decorators in angular. Despite my best efforts to research the topic, I find myself struggling to fully grasp this concept. Here's a snippet ...

javascriptangulartypescript

Controlling the visibility of an element in Angular2 by toggling it based on an event triggered by a

Within my component, there is a child element: <fb-customer-list (inSearchMode)="listIsInSearchMode = event$"></fb-customer-list> This child element emits an event that contains a boolean value to indicate when it changes modes. In the paren ...

angulartoggle

Executing a cloud function in Firebase from an Angular-Ionic application by making an HTTP request

I am a newcomer to GCP and app development, so please bear with me if this question seems mundane. Currently, I have an angular-ionic app that is connected to Firebase allowing me to interact with the Firestore database. Now, my challenge is to invoke a ht ...

javascriptangularfirebasegoogle-cloud-functions

The function "AAA" is utilizing the React Hook "useState" in a context that does not fit the requirements for either a React function component or a custom React Hook function

Upon reviewing this code snippet, I encountered an error. const AB= () => { const [A, setA] = useState<AT| null>(null); const [B, setB] = useState<string>('0px'); ..more} ...

reactjstypescriptfunctionreact-hooks

Please ensure that the table contains all the records corresponding to the respective days

I am struggling with figuring out how to display a record of classes in my table view. The UX prototype I need to follow is shown https://i.stack.imgur.com/CISYn.png (the days of the week are in Portuguese: horario = time, segunda = Monday, terça = Tuesda ...

reactjstypescriptmaterial-ui

Ways to RESOLVE implicit any for accessing array property

Check out the code snippet below: function getUsername(): string { return 'john_doe'; } function sampleFunction(): void { const data = {}; const username: string = getUsername(); const age: any = 30; data[username] = age; // ...

typescripttsconfig

Posting JSON data to a WebApi Controller in Objective-C

I'm working on implementing a javascript function that sends data to an ASP.NET Web Api controller. Here's the code snippet: var d = { NorthEastPoint: { Latitude: boundingBox.ne.lat, Londitude: boundingBox.ne.lng }, S ...

asp.netobjective-cjsonasp.net-web-apinsurlconnection

An error occurred in Angular 4 where an expression was changed after it had been checked, causing a

Encountering an error and struggling to debug from the console: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'Main Bike Trails'. at viewDebugE ...

angular

The property 'matCellDefTrackBy' cannot be bound to 'mat-cell' as it is not recognized as a valid property

Wondering how to implement trackBy in Angular Material? I encountered the error message below: Can't bind to 'matCellDefTrackBy' since it isn't a known property of 'mat-cell' html: <mat-table [dataSource]="data" ...

angularangular-material

This element is not suitable for use as a JSX component since its return type 'void' is not a valid JSX element. Please check the return type to ensure it is compatible with

I have been working on this code snippet: function searchData(searchWord: any) { if (originalData.length > 0) { if (searchWord !== "") { setDataList([...originalData.filter((svc: any) => ...

javascriptreactjstypescriptjsxtsx

Tips for making a oneOf field nullable using TypeScript and AJV

A field named platform exists in my code, and it can hold either a string or an array of strings (string[]). The field can also be nullable or undefined if not passed as input. TypeScript Interface export interface IEntityLeaderboardQuery { rank: stri ...

node.jstypescriptajv

To generate a FHIR REST query, utilize the Firely .NET SDK available at https://github.com/FirelyTeam/fire

I am attempting to craft a FHIR REST request to the NHS eReferral system in order to retrieve a worklist. The JSON structure in the example is currently as follows: { "resourceType": "Parameters", "meta": { ...

c#jsonhl7-fhir

React Hook Form is flagging missing dependencies in the useEffect function

Before posting this question, I made an effort to search for a solution on Google. However, I am puzzled by the warning that the linter is giving me regarding my code. The warning message reads: ./components/blocks/Contact.tsx 119:6 Warning: React Hook us ...

reactjstypescriptnext.js

Opting out of notifications using Angular's NGXS

I'm new to NGXS in Angular and have recently learned that you don't need to manually unsubscribe when using the async pipe. However, I am currently subscribing to both query parameters and dispatched actions. Do I still need to manually unsubscri ...

angularrxjsangular6ngxs

The `Required<Partial<Inner>>` does not inherit from `Inner`

I stumbled upon a code snippet that looks like this: type Inner = { a: string } type Foo<I extends Inner> = { f: I } interface Bar<I extends Inner> { b: I } type O<I extends Partial<Inner>> = Foo<Required<I>> & B ...

typescript

Struggling to modify a string within my React component when the state is updated

Having a string representing my file name passed to the react-csv CSVLink<> component, I initially define it as "my-data.csv". When trying to update it with data from an axios request, I realize I may not fully understand how these react components w ...

htmlreactjstypescriptaxioscomponents

Is it possible to showcase a variety of values in mat-select?

Is it possible to pass different values to the .ts file in each function? For example, can I emit a String with (selectionChange)="onChangeLogr($event)" and an object with (onSelectionChange)="onChangeLogr_($event)"? How would I go about doing this? ...

angulartypescript