CODEWITHSUNDEEP
angulartypescriptangular2-templateangular4-formsangular4-router
Brock James
Brock James

Reputation: 196

How to pass angular2/4 parameter in single page

I have an interface in which interface I get a popup search tab with an editable list.

But I am not aware of the method to get data to the 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.if any body can help me

My code:

enter image description here

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.......)
</ng-container>

Upvotes: 0

Views: 90

Answers (1)

Akash Gupta
Akash Gupta

Reputation: 34

You have made your list by using *ngFor directive when calling the method by clicking the button you are calling the method 'Editmodeclose()' just pass the 'item' or the reference variable which you have taken at the time of running loop in HTML like Editmodeclose(item), it will be going to call the method & pass the current clicking item(object) in to the method in component like

`Editmodeclose(item){console.log(item)};`

after that, you can assign this item to another variable 'data' & use this data variable to display data

Upvotes: 1

Related Questions