How to pass id(Parameter ) from one place to another in same page?

Question

I am new to angular 2/4 projects. in this interface I get a popup search tab with editable list.

But I am not aware of the method to get data to main interface for edit after I click this list edit button.

Simply what I need is to pass the id of the current item to main edit view as a parameter.

My code:

This is my TS file:

 Editmodeclose(value: any) {
 { 
     let ItemID: number =this._activatedRoute.snapshot.params['code'];

     alert(this.userid);
     alert(this.shopid);
     alert(this.ItemID);//(here item id show undefined)
     this._enqService.FetchStockitem(ItemID, this.shopid, this.userid).subscribe(defaultdatas => this.defaultdata = defaultdatas,
          error => {
                    console.error(error);
                    this.statusMessage = "Problem with the service.Please try again after sometime";
                });
            $("#SearchModal").modal("hide");
        }
    }

My html

      <div class="col-md-2 col-sm-2 col-xs-12 text-right">
                                <span class="btn btn-success Editmode-Btn" (click)="Editmodeclose()"><i class="glyphicon glyphicon-pencil"></i></span>
                            </div>
                        </div>
<ng-container *ngFor="let items of defaultdata;">
                    <a [routerLink]="['/NewStockCount',items.ItemID]">
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label>Item Code</label>
                                    <span>{{items.ItemCode}}</span>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label>Item Description</label>

                                    <span>{{items.ItemDescription}}</span>
                                </div>
                            </div>
                        </div>
                    </a>(....etc.......)

Answer 1

In edit button click, pass 'items' object => (click)="Editmodeclose(items)"

try like :-

<ng-container *ngFor="let items of defaultdata;">
.
.
.
.
<button (click)="Editmodeclose(items)">Edit Button</button>
</ng-container>

.ts file:-

Editmodeclose(value: any) {
 { 
     alert(value.userid);
     alert(value.shopid);
     alert(value.ItemID);//(here item id show undefined)
     this._enqService.FetchStockitem(value.ItemID, value.shopid, this.userid).subscribe(defaultdatas => this.defaultdata = defaultdatas,
          error => {
                    console.error(error);
                    this.statusMessage = "Problem with the service.Please try again after sometime";
                });
            $("#SearchModal").modal("hide");
        }
    }

Answer 2

It will be better if you move your search item popup code into a component(for example, searchItem.component.ts), and then include your component in your existing component. In your search component, use an event emitter( https://angular.io/api/core/EventEmitter ) for output. If you still want to stick to your existing implementation, you should write a (click) handler on your "edit" button, where you will set your id in your main component.

In your component ts file

selectedId: number;

selectItem(id: number){
this.selectedId = id;
}

In your html,

<button (click)="selectItem(items.id)">Your edit button</button>

Answer 3

Perform the following check --

{ path: 'NewStockCount/:code', component: MyComponent } // Check you have right param name 'code'

You have declared the local variable

let ItemID: number =this._activatedRoute.snapshot.params['code'];

but you are trying to use by this keyword which is using. you should simply use ItemID

Here is the better way to handle the URL params

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       let code = params['code'];
       // execute these codes whenever param value changes
    });
  }