0

I have one list Client list (agGrid) is used. on click, it navigates to editClient form aka childComponent. How can I pass the whole object from that client list component to edit client from the component? Please let me know the best way to do..

below is the object I want to pass

{
    "ClientTypeId": "3",
    "IsActive": "1",
    "CompByName": "Administration",
    "RTId": "8",
    "ALToName": "Sam Artho",
    "IsSecured": "1",
    "Status": null,
    "TTQStatus": "Active",
    "StsId": null,
    "ttqId": "3486",
    "FName": "Quto Iva",
    "ContactNo": "1111111111",
    "ACTTo": "8",
    "ACTBy": "4",
    "CrDate": "22/10/2021",
    "ModBy": "0",
    "ModDate": "",
    "Remark": " ",
    "IsView": "2"
}

I could get this object on the edit button click.

Raj
  • 15
  • 8
  • 1
    You would have to keep the object in state via a service, ngrx, etc, so that when you navigate, your child component can retrieve the item and display it. – Brandon Taylor Oct 22 '21 at 20:37

1 Answers1

1

I suggest you to achieve that this way:

  1. Create a service. (ng g s <service-name>)
  2. Put your variables in that service so you can reference them in both pages.
Mahdi Zarei
  • 5,644
  • 7
  • 24
  • 54
  • 1
    Thank you for your help. Actually, I have found very great solution for this this._router.navigateByUrl('/client/edit-client', { state: { editClient } }); I could access the Object on edit-client component by using window.history.state in ngOnInit() I think, it would be the best way to get the object/array/.. data on another component, I know the data will have vanished on page refresh but, I think, the service does the same! – Raj Oct 23 '21 at 13:55
  • yes you are right but this way also a hacker can access your data using `window` object. It is better to use services to keep data in memory level and make them not accessible. @Raj – Mahdi Zarei Oct 23 '21 at 14:22
  • Oh isn't it safe to use? I am using SSL so data will travel in the secure encrypted tunnel! – Raj Oct 23 '21 at 14:58
  • Open console and in it if you could log that it is not safe – Mahdi Zarei Oct 23 '21 at 14:58
  • You are right! I could access the data using the window object in the console. – Raj Oct 23 '21 at 15:18
  • Yes. I think if you use services it will be more secure @Raj – Mahdi Zarei Oct 23 '21 at 15:19
  • Thing is that I have already created separate services for both the component... now I have to create one more service called shared service which I can use for both components... I did not want to mess up with the structure so was avoiding it... – Raj Oct 23 '21 at 15:22
  • No you can import your child service in parent component and set it there @Raj – Mahdi Zarei Oct 23 '21 at 15:23
  • Maybe! that would be the best way... I really appreciate your help @skyBlue – Raj Oct 23 '21 at 15:25
  • Cant PetchValue after in subscribe? fillClientForm() { this._manageClientService.mySubject.subscribe ((response) => { this.client = response console.log("edit page", this.client) if (this.lead) { this.isEditMode = true this.addNewLeadFb.patchValue({ ClientTypeId: this.client.ClientTypeId, IsActive: this.client.IsActive, ... – Raj Oct 23 '21 at 18:10
  • You forgot to add 'asObservable()' before subscribing – Mahdi Zarei Oct 23 '21 at 18:14
  • And I think you can patchValue and it os probably a problem with the logic. – Mahdi Zarei Oct 23 '21 at 18:15
  • Hmmm... I can not help unless you can provide a stackblitz of this code example – Mahdi Zarei Oct 23 '21 at 18:37
  • I simply get the data in the console .. just can't PatchValue! in comon service someSubject = new Subject(); and in component this._addClientService.someSubject.next(editClient); this._router.navigateByUrl('/client/edit-client'); in edit client component: fillClientForm() { this._manageClientService.mySubject.subscribe ((response) => { this.client = response console.log("edit page", this.client) if (this.client) { this.isEditMode = true this.addNewClientFb.patchValue({ ClientTypeId: this.client.ClientTypeId, IsActive: this.client.IsActive, ... – – Raj Oct 23 '21 at 18:37
  • https://stackoverflow.com/a/54624854/17220996 I saw his example and followed it... I think it should work.. @skyBlue – Raj Oct 23 '21 at 18:48
  • I did some debug and found the route call after the value is set! How it is possible? any solution? @skyBlue – Raj Oct 23 '21 at 20:43
  • Lines will execute one after another. If you want to make it work like after last one finished you can add await – Mahdi Zarei Oct 23 '21 at 20:45
  • It's in order already and also tried async-await but nothing worked! – Raj Oct 23 '21 at 20:59
  • Wow! I tried settimeout to 5000 and it worked! HOW? await should work! – Raj Oct 23 '21 at 21:03
  • Hmmm don't know unless I can debug it myself – Mahdi Zarei Oct 24 '21 at 10:10
  • someSubject = new ReplaySubject(1); solved the issue @skyBlue subject did not work ..looks like it could not able to hold the object... – Raj Oct 25 '21 at 11:22
  • That's interesting I will read more about that – Mahdi Zarei Oct 25 '21 at 11:23