How to pass the data from list Component to edit component for data modification

Question

//edit file

export class EditStoreComponent implements OnInit {
name = '';
id: ''

  constructor(private api:APIService, private router:Router, private cookieService: CookieService, private route:ActivatedRoute) {

      }
  ngOnInit() {

  }

  async updateStore(){
    let req = {
      id:this.id,
      name:this.name
    }
    console.log(req)
  let result = await this.api.UpdateStore(req)

  if (result){
    this.router.navigate(['../admin/liststore']);
    console.log(result)
    }
  }   
}

//list file

  rawlist;
  name = '';
  id = '';
  storeid = "";
  store: Store;

  constructor(private api: APIService, private router: Router, private route: ActivatedRoute, private cookieService: CookieService) { }

  ngOnInit() {
    this.storelist();

  }
  //store list
  async storelist() {
    this.rawlist = await this.api.ListStores();
    this.storelist = this.rawlist.items;
  }

I am not sure how to pass ID from list to edit component. Basically i calling the api to update my data in the list. I only can passing the name, but I can not pass the id for specific user

Answer 1

There are multiple way to pass data

1. using Subject.
2. using @input, @output decorator
3. using services

But if you want to pass ID or name (something like that ), you can just append id to route params.Like

this.router.navigate(["path", extra params(id)]);

Answer 2

First you should do this in the list file :

      import { Modal, BSModalContext } from 'angular2-modal/plugins/bootstrap';

      this.modal.open(EditComponent, overlayConfigFactory({ 
      dataToBePassed }, BSModalContext));

Then in the EditComponent do the following:

      export class AdditionPopupWindowData extends BSModalContext {
      public dataToBePassed: any;
       }

       context: AdditionPopupWindowData;
       public dataToBePassed: any;

Then inside the constructor do the following:

      this.context = dialog.context;
      this.dataToBePassed = this.context.dataToBePassed;

Cheers !