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.......)

try to change your alert(this.ItemID);//(here item id show undefined) to alert(ItemID); //(here item id show undefined) — Najam Us Saqib
– Najam Us Saqib, Commented Oct 8, 2018 at 6:11
yes i also change like that.and in my console the item id is null — Akhil
– Akhil, Commented Oct 8, 2018 at 6:11
when you opening popup , pass Json to edit button method , then you will get data of entire row ,you can access value of which one you like — Amit Rai
– Amit Rai, Commented Oct 8, 2018 at 6:14
@AmitRai actually i am new to this so i dont know to pass json method — Akhil
– Akhil, Commented Oct 8, 2018 at 6:17
in Html , you have line <ng-container *ngFor="let items of defaultdata;"> , where items is json for each line , on pass this items and you can access it on ts file . for example in html file you call a function xyz(items); define xyz in ts — Amit Rai
– Amit Rai, Commented Oct 8, 2018 at 7:12

madhukar reddy · Accepted Answer · 2018-10-09 13:04:14Z

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");
        }
    }

tech-y · Accepted Answer · 2018-10-08 07:32:49Z

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>

Sunil · Accepted Answer · 2018-10-08 20:26:45Z

0

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
    });
  }

answered Oct 8, 2018 at 20:26

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

6 Comments

Akhil Over a year ago

here already i tried using ItemID.but didnot get so i add this.Itemid

Akhil Over a year ago

here i want to display the item id in same url or page

Sunil Over a year ago

Post your URL routing declaration here -

Sunil Over a year ago

ex : { path: 'NewStockCount/:code', component: MyComponent }

Akhil Over a year ago

{ path: 'NewStockCount/:code', component: NewStockCountComponent },

|

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Related