`Successful redirection after saving`

I'm looking for a solution to redirect/stay on the CREATE_PAGE in Angular/TypeScript when inserting a new item. I've tried using window.open and href functions without success. If you have any suggestions, please share them :) 

    private onSaveSuccess(result: WorkingOrderItems) {
        // this.spinner.hide();
        this.isSaving = false;
        console.log('IN ON SUCCESS');
        if (this.isCreatePage) {
            console.log('IS CREATE');
            // this.workingOrderItemsService.loadWorkingOrderItemsPageEmitter.emit({ id: result.id, shouldRouteToDetails: false });
            this.workingOrderItemsService.changeSelectedWorkingOrderItemsEmitter.emit();
            this.workingOrderItemsService.changePageTypeEmitter.emit(CREATE_PAGE);
            // this.workingOrderItems = {};
            location.reload()
            window.open('working-order-items-create')

        } else {
            console.log('NOT CREATE');
            this.workingOrderItemsService.loadWorkingOrderItemsPageEmitter.emit(result.id);
            this.router.navigate([this.rootRoute], {
                queryParams: {
                    activeTab: this.tabName,
                    tabMode: DETAILS_PAGE,
                    id: result.id
                }
            });
        }
        this.spinner.hide();
  
    }

angulartypescript

Answer №1

There is no need to "redirect" to a page or use "location.reload()" as it reloads the entire page. Instead, you can use router.navigate by calling router.navigate([path],..., where the path parameter can be a string or a variable. If you are using a Subject, remember to subscribe to it in your ngOnInit method.

ngOnInit(){
  this.workingOrderItemsService.changePageTypeEmitter.subscribe(res=>{
   ...perform actions when data is received..
  })
}

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

Steps for managing files in Ionic Native: creating, reading, and writing them

Struggling to find proper examples for file operations like creating, reading, and writing text or logs into a file? I've done a lot of research but haven't stumbled upon any suitable solutions. The examples provided in this link seem helpful, ho ...

angulartypescriptionic2ionic3ionic-native

Tips for deleting row data that was mistakenly added as true in response in Angular 2 when it should actually be false

Hello, I have a set of data that is initially pushed to the response as true. However, before submitting the form, I need to change some options so that I receive a false response. In order to do this, I must remove a specific item from the array. TS: on ...

angulartypescript

How to Pass Data as an Empty Array in Angular 6

After successfully implementing a search function that filters names from an array based on user input, I encountered an issue when trying to make the searchData dynamic by fetching it from a Firebase database: getArray(): void { this.afDatabase.list( ...

angulartypescriptfirebasefirebase-realtime-database

Ways to resolve the issue of "Property 'tenant' does not exist on type"

I have a request and I have exported this json body. export const settingsReq = { "states": [ { "initial": false, "style": "plain", "elements": [ { "type" ...

javascriptnode.jsreactjsjsontypescript

What steps can be taken to avoid the expansion of a table cell when nesting an input tag within

When it comes to nesting the input tag based on a condition, I follow this structure: <td *ngFor="let cell of row.Persons"> <span cell.editable === true "> <input type="number" [(ngModel)]="cell.PersonCount" autofocus /> ...

htmlangularhtml-tabletablecell

Error: The function list.forEach does not exist within service.buildList [as project]

Today, I've been grappling with a challenging issue. As someone new to Typescript and Angular, I'm attempting to make a call to my backend API. However, when trying to populate an array for display, I keep encountering an error that says rawRegis ...

angulartypescriptapirest

What is the process of incorporating a JavaScript node module into TypeScript?

Having trouble importing the xml2js module as I keep getting a 404 error stating that it's not found. import xml2js from 'xml2js'; Any suggestions on how to properly import JavaScript modules located in the node_modules directory when work ...

javascripttypescriptnpmnpm-install

What is the best way to retrieve information from the server at regular intervals?

I am utilizing Angular 6 and attempting to retrieve JSON data from the server at a 5-second interval. Check out this JSFIDDLE This is my service code: getExample(): Observable<any> { console.log('getExample'); return Observable ...

javascriptangulartypescriptrxjs

In what situations might a finally block fail to execute?

Are there any circumstances where the code in a finally block may not be reached, aside from the usual suspects like process exit(), termination signal, or hardware failures? In this TypeScript code snippet that usually runs smoothly in node.js, occasiona ...

javascriptnode.jstypescript

Checking the functionality of a feature with Jasmine framework in an Angular application

I am working on writing unit test cases and achieving code coverage for the code snippet below. Any advice on how to proceed? itemClick($event: any) { for (let obj of this.tocFiles) { let results = this.getchildren(obj, label); if (results) { conso ...

angulartypescriptunit-testingkarma-jasmine

Combine a main document with a document located within its sub-collection

I am managing a database within firestore that has the following structure: -> Chat Room -> Users Within the "ChatRoom" collection, there is a "Users" collection. Each document in the users collection includes a field "read: true/false" to trac ...

angulartypescriptgoogle-cloud-firestore

Executing RxJS calls in a sequential manner while allowing inner calls to operate in

I want to achieve a scenario using rxjs where a group of http calls are made with the value returned from a previous call. The inner calls should run in parallel, while still being able to return the value from the first call as soon as it's available ...

typescriptrxjs

Utilizing an external type definition in JSDoc @typedef

I'm encountering an issue with reducing redundancy when defining my imported types. I am trying to streamline the process, but unfortunately I am running into errors. /** @typedef {import("../types/util")} util @typedef {util.mapBehaviors} m ...

javascripttypescriptjsdoc

Can you guide me on how to programmatically set an option in an Angular 5 Material Select dropdown (mat-select) using typescript code?

I am currently working on implementing an Angular 5 Material Data Table with two filter options. One filter is a text input, while the other is a dropdown selection to filter based on a specific field value. The dropdown is implemented using a "mat-select" ...

javascripthtmlangulartypescript

What is the method for retrieving the second type of property from an array of objects?

I have a collection of objects that map other objects with unique identifiers (id) and names (name). My goal is to retrieve the name corresponding to a specific id. Here is my initial approach: const obj = { foo: { id: 1, name: 'one' }, ...

typescripttypestypescript-generics

What steps should be taken to enable SCSS in Jest for unit testing in TypeScript Next.js?

I am facing an issue with the scss import in my project. I have attempted to solve it by using mockup and identity-obj-proxy, but neither of them seems to work. I suspect that there might be a problem with my regex expression. The specific error arises fr ...

reactjstypescriptsassjestjsnext.js

Submitting a form using an anchor tag in Angular 8: A step-by-step guide

I have a question about how to submit form data using hidden input fields when a user clicks on an <a> tag. <form action="/submit/form/link"> <input type="hidden" [attr.value]="orderNumber.id" /> <input type="hidden" [attr.value]= ...

javascriptangulartypescriptformssubmit

Tips for Logging HTTP Communication Errors in Angular

When making an HTTP put call to update a record in my .Net MVC application, I have noticed that the controller's put logic is not being triggered as expected compared to other types of HTTP requests. I want to implement error handling by using the Ha ...

c#angularasp.net-mvctypescript

Troubleshooting Authorization Header Issue in Angular 5

I created an Interceptor to include an Authorization token in all HTTP Requests, but unfortunately it's not functioning as expected. I've double-checked my code and everything seems correct, so I'm wondering if there's something crucial ...

angularinterceptor

The handler for the ActionSheet is unable to retrieve the class variable

Exploring the capabilities of the Ionic Framework, I delved into using ActionSheet and ActionSheetController for a Proof of Concept. Everything was functioning smoothly until I came across an unexpected error. When assigning a function as a handler that I ...

angularionic-frameworkcallbackhandler