Как передать значение из одной карты div в другую

Question

Я создал компонент с тремя параллельными картами Div в начальной загрузке.

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

Я пытался вызвать метод при нажатии на список, который работал, когда это был один список.

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

`
<div class="row">
  <div class="col-md-2">
      <div class="card">
        <div class="input-group">
            <input type="text" id="search" class="form-control" placeholder="Search" name="search">
            <button class="btn-primary" routerLink="/template/{{id}}"> <i class="material-icons"> add_circle</i></button>

        </div>

        <ul class="list-group" *ngFor="let temp of templates"> 
            <a routerLink=" " class="list-group-item" (click)="temp(1)">{{temp.name}}</a>         
        </ul>
</div>
  </div>
  <div class="col-md-5 pd-2" >
    <div class="card">
        <button class="btn btn-primary" id="btn" routerLink="/template/{{id}}"><i class="material-icons">
            create
            </i></button>
        <div class="template-output">
            {{tempList}}
        </div>

    </div>
</div>

<div class="col-md-5">
    <div class="card">
        <form >
          <mat-form-field>
              <mat-label>Send Form</mat-label>`

Answer 1

Вы можете передать индекс элемента в функции при нажатии:

<ul class="list-group" *ngFor="let temp of templates; let i = index"> 
   <a class="list-group-item" (click)="temp(i)">{{temp.name}}</a>         
</ul>

Затем в вашем контроллере вы можете установить текущий элемент, используя индекс.

currentTemp:Template;

temp(index:number) {
   this.currentTemp = this.templates[index];
}

Наконец,во второй карточке вы можете отобразить информацию о выбранном вами предмете:

<div class="card">
  <button class="btn btn-primary" id="btn" routerLink="/template/{{currentTemp.id}}">
    <i class="material-icons">create</i>
  </button>
  <div>{{currentTemp.name}}</div>
</div>