如何将数据从同一位置的一个地方传递到另一个地方？

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 current item to main edit view.

My TS file

Editmodeclose() {
        $("#SearchModal").modal("hide");
}

onSelected(IStockdetails: IStockdetails): void {
    this.selectedStock = IStockdetails;

}
my html in modal
 <div class="searchResult-Container">
                    <ul>
                        <li *ngFor="let stocks of stockdetail"
                            [class.selected]="stocks === selectedStock"
                            (click)="onSelected(stocks)">

                            <div class="row searchItem" style="margin:0px;">
                                <!--search item starts-->
                                <div class="col-md-10 col-sm-10 col-xs-12">
                                    <div class="row">
                                        <div class="col-md-6 col-sm-6 col-xs-12">

                                            <label>Item</label>
                                            <span>{{stocks.ItemID}}</span>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-xs-12">

                                            <label>Item Code</label>
                                            <span>{{stocks.ItemCode}}</span>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <label>Item Desc</label>
                                            <span>{{stocks.ItemDescription}}</span>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <label>Packing Type</label>
                                            <span>{{stocks.PackingtypeName}}</span>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <label>Stock</label>
                                            <span>{{stocks.Stock}}</span>
                                        </div>
                                    </div>
                                </div>

                                <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>
                        </li>
                    </ul>
                </div>

my html in left side

  enter code here
    <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="form-group">
                            <label>Item ID</label>
                            <div *ngIf="selectedStock">
                                <input [(ngModel)]="selectedStock.ItemID" id="ItemID" placeholder="name" class="form-control" name="ItemID" #ItemCode="ngModel" ngModel>
                            </div>
                        </div>
                    </div>
                </div>

Answer 1

Try out this :

 Editmodeclose(IStockdetails: IStockdetails): void { console.log(IStockdetails); } onSelected(IStockdetails: IStockdetails): void { this.selectedStock = IStockdetails; } my html in modal <div class="searchResult-Container"> <ul> <li *ngFor="let stocks of stockdetail" [class.selected]="stocks === selectedStock" (click)="onSelected(stocks)"> <div class="row searchItem" style="margin:0px;"> <!--search item starts--> <div class="col-md-10 col-sm-10 col-xs-12"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12"> <label>Item</label> <span>{{stocks.ItemID}}</span> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <label>Item Code</label> <span>{{stocks.ItemCode}}</span> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <label>Item Desc</label> <span>{{stocks.ItemDescription}}</span> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <label>Packing Type</label> <span>{{stocks.PackingtypeName}}</span> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <label>Stock</label> <span>{{stocks.Stock}}</span> </div> </div> </div> <div class="col-md-2 col-sm-2 col-xs-12 text-right"> <span class="btn btn-success Editmode-Btn" (click)="Editmodeclose(stocks)"><i class="glyphicon glyphicon-pencil"></i></span> </div> </div> </li> </ul> </div>