To get the row data is simple:
<tr *ngFor="let item of data | filter: search">
.....
<button type="button"
(click)='rowData(item)'
class="btn btn-outline-secondary">
Details
</button>
</tr>
Note: see the click event of button we are passing entire row data to click event
rowData(record: any) {
// now play with your record
}
.test {
overflow-y: auto !important;
height: calc(100vh - 54px);
}
::-webkit-scrollbar {
width: 8px;
height: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background: #c2c9d2;
}<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<div class="ml-auto">
<input
class="form-control"
name="search"
[(ngModel)]="search"
type="search"
placeholder="Search"
/>
</div>
</nav><br><br><br>
<div class="container-fluid">
<section class="row">
<div class="col-md-8 col-12 overflow-auto test">
<table class="table table-hover">
<tr>
<th>Date</th>
<th>List Name</th>
<th>No. of Entities</th>
<th>Actions</th>
</tr>
<tbody>
<tr *ngFor="let items of data | filter: search">
<td>{{ items.date }}</td>
<td>{{ items.name }}</td>
<td>{{ items.entities }}</td>
<td>
<button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
Details
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4 col-12 overflow-auto test">
<div class="alert alert-dark">No description yet <span class="font-weight-bold">+Add Description</span> </div>
<p>{{s}}</p>
</div>
</section>
</div>I am new to angular. I have 2 problems.one is adding scrollbar height dynamically to the div. I have added a scroll bar by giving height in pixels. it worked but it is fixed. I want it to be dynamic. so I tried by giving height in percentage but it didn’t work.
Another problem is i need to split the string with a comma to a new line. I have tried using split and join function. it is removing commas only but not printing in the new line.
I am trying to implement search, table and side details from the image 
getdetails(x:any){
this.detail = x.details;
this.s = this.detail.split(',').join('n').test{
overflow-y: auto !important;
height: 100% !important;
}<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<div class="ml-auto">
<input
class="form-control"
name="search"
[(ngModel)]="search"
type="search"
placeholder="Search"
/>
</div>
</nav>
<br /><br />
<section>
<div class="w-75 float-left overflow-auto test">
<table class="table table-hover">
<tr>
<th>Date</th>
<th>List Name</th>
<th>No. of Entities</th>
</tr>
<tbody>
<tr *ngFor="let items of data | filter: search">
<td>{{ items.date }}</td>
<td>{{ items.name }}</td>
<td>{{ items.entities }}</td>
<td>
<button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
Details
</button>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<br />
<aside>
<div class="w-20 float-right overflow-auto test">
<div class="alert alert-dark">+Add Description</div>
<p>{{s}}</p>
</div>
</aside>