CODEWITHSUNDEEP
javascriptangular
Sole
Sole

Reputation: 3340

Angular how to display the result of a post request in a component

In my Angular application I am trying to display the result of a post request in another component (i.e. confirmation page). I wanted to know what would be the best way for this. In my component the code does a post request which posts to the server as follows: 

import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormGroup, FormControl } from '@angular/forms';
import { Validators } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { Request } from '../../models/request.model'
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AppComponent } from '../../../app.component';
import { nowService } from '../../services/now.service';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';




@Component({
  selector: 'app-service-request',
  templateUrl: './service-request.component.html',
  styleUrls: ['./service-request.component.scss']
})
export class ServiceRequestComponent implements OnInit {


  public loading = false;

  private customer_id = this.appComponent.customer_id;

  serviceForm;

  u_destination_country = [
    { value: 'Choose an option' },
    { value: 'United Kingdom', },
    { value: 'United States of America', },
    { value: 'Russia', },
    { value: 'Moscow', },
    { value: 'Africa', },
  ];

  users = [
    { id: 'Select an option', },
    { id: '1', },
    { id: '2', },
    { id: '3', },
  ];

  devices = [
    { id: 'Select an option', },
    { id: '1', },
    { id: '2', },
    { id: '3', },
  ];

  constructor(private service: nowService,
    private appComponent: AppComponent,
    private router: Router,
    private http: HttpClient

  ) {
  }

  ngOnInit() {
    this.serviceForm = new FormGroup({
      customer_id: new FormControl(this.customer_id),
      si_id: new FormControl('', Validators.required),
      u_destination_country: new FormControl(this.u_destination_country[0], Validators.required),
      u_short_description: new FormControl('', Validators.compose([
        Validators.required,
        Validators.minLength(5),
        Validators.maxLength(80)
      ])),
      u_message_description: new FormControl(''),
    });
  }

  onSubmit() {
    this.http.post("/api/inc",
      this.serviceForm.value,
      {
        headers: new HttpHeaders().set("Content-Type", "application/json")
      }
    ).subscribe((response: any) => {
      console.log(response);//On success response
      this.router.navigate(['/inc/confirmation']);
    }, (errorResponse: any) => {
      console.log(errorResponse); //On unsuccessful response
    });
    if(this.serviceForm.invalid) {
      this.serviceForm.setErrors({ ...this.serviceForm.errors, 'required': true });
      return;
    }
  }
}

So what I want to do is display the value of the display_value which is something like: 

result: Array(1)
0:
display_name: "number"
display_value: "INC001"
status: "inserted"
table: "incident"

Upvotes: 1

Views: 1175

Answers (1)

joka00
joka00

Reputation: 2547

For Angular 7.2.0 and higher:

You can make it by using NavigationExtras built into Angular Router. For this you have to add only two things.

First step:

Update this.route.navigate(['/inc/confirmation']) to this

this.router.navigate(['/inc/confirmation'],{state: {response}});

Second step:

In your second component you can access state by adding this to your code

const state = this.router.getCurrentNavigation().extras.state;
this.response = state.response;

Then you can display it.

For Angular 7 and lower:

First step:

Update this.route.navigate(['/inc/confirmation']) to this

this.router.navigate(['/inc/confirmation'],{queryParams: {value: response.result[0].display_value}});

Second step:

In your second component you can access state by adding this to your code

constructor(private route: ActivatedRoute){}
 ...
this.value = this.route.snapshot.queryParamMap.get('value');

Then you can display it.

When you don't want to use URL param:

You can create a service with one property

@Injectable({
  providedIn: 'root'
})
export class SharedDataService {
  public sharedData;
  constructor() {
  }
}

Then you can set sharedData before you redirect to another route.

constructor(private sharedService: SharedDataService){}
...
this.sharedService.sharedData = response;
this.route.navigate(['/inc/confirmation']);

You can get that data in your second component.

constructor(private sharedService: SharedDataService){}
...
this.response = this.sharedService.sharedData;

Upvotes: 1

Related Questions