How to get table's first column td value in angular 6 - angular6

Question

Tried to get table's first column td value after selected dropdown change values but not working.
I want to get first column td value after selected dropdown in angular 6.
I have given my code below. Anyone can have idea?please help to find the solution.
<table class="table table-striped table-hover" id="wrapperTbl">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Job</th>
<th>YearJoined</th>
<th>Missions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let astronaut of astronautsToBeSelected" class="clickable">
<td (click)="selectAstronaut(astronaut)">{{astronaut.id}}</td>
<td (click)="selectAstronaut(astronaut)">{{astronaut.name}}</td>
<td (click)="selectAstronaut(astronaut)">{{astronaut.job}}</td>
<td (click)="selectAstronaut(astronaut)">{{astronaut.year_joined}}</td>
<select (change)="selected()">
<option *ngFor="let mission of astronaut.missions" [selected]="mission.name == 'back'">{{mission}} </option>
</select>
</tr>
</tbody>
Demo:
https://stackblitz.com/edit/how-to-show-the-dynamic-table-with-dropdown-in-angular-todepv?file=app%2Fapp.component.html

Answer 1

You can do the following -
<tbody>
<tr *ngFor="let astronaut of astronautsToBeSelected" class="clickable">
<td (click)="selectAstronaut(astronaut)">{{astronaut.id}}</td>
<td (click)="selectAstronaut(astronaut)">{{astronaut.name}}</td>
<td (click)="selectAstronaut(astronaut)">{{astronaut.job}}</td>
<td (click)="selectAstronaut(astronaut)">{{astronaut.year_joined}}</td>
<td><select (change)="selected($event, astronaut.id)">
<option *ngFor="let mission of astronaut.missions" [selected]="mission.name == 'back'">{{mission}} </option>
</select>
</td>
</tr>
</tbody>
When you want to access any event, you will need the $event in the html. You can also pass additional parameters you want.
selected(event, id){
//tbal id is wrapperTbl
alert(event.target.value + '|' + id )
}
Hope this helps.