Angular 4: Bind two HTML components with the same value

Question

I am new to Angular. I have a row in a table which is binded to the value item.md_id as shown below:

<tr *ngFor="let item of driverData">
   <td class="align-right" id="md_id" [(ngModel)]="item.md_id" name="driverId" ngDefaultControl (click)="runPromo(item)">
        {{item.driver_name}}
   </td>
</tr>

I want to use that binded value in another HTML component of the same page:

<div>
  <button class="active"  id="md_id" [value]="item.md_id" (click)="runPromo(item.md_id)" >First</button>
</div>

I am able to retreive the value in the row of a table from the service. But I am not able to use that particular value for my second HTML component Could you please help. Thanks

Answer 1

Angular 2 or higher: *ngFor directive

When you want to iterate an array and access to each element of it, you use *ngFor. In this piece of your code:

   <tr *ngFor="let item of driverData">
      <td class="align-right" id="md_id" [(ngModel)]="item.md_id" name="driverId" ngDefaultControl (click)="runPromo(item)">
    {{item.driver_name}}
   </td>
   </tr>

tr tag iterate the list and in td tag you have access to list items and you can bind to input or any other html.

<div>
  <button class="active"  id="md_id" [value]="item.md_id" 
  (click)="runPromo(item.md_id)" >First</button>
</div>

You can't access to the data of members outside of this loop unless you put your code inside the td tag.

Notice: When you iterate a loop, members are only accessible inside the context of the loop.