Как передать данные из одного места в другое на одной странице?

Я новичок в проектах angular 2/4. в этом интерфейсе я получаю всплывающую вкладку поиска с редактируемым списком.

Но я не знаю, как получить данные в основной интерфейс для редактирования после того, как я нажму эту кнопку редактирования списка.

Мне просто нужно передать текущий элемент в основной вид редактирования.

Мой ТС файл

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>

мой HTML слева

  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>