studymaterial stock

src/app/views/studymaterial/studymaterialstock/studymaterialstock.component.html

@@ -76,19 +76,29 @@
            <th>Action</th>
           </tr>
         </thead>
-        <tbody>
-         <tr *ngFor="let stock of studymaterialDetails">
+        <tbody  *ngFor="let stock of studymaterialDetails; let i = index">
+         <tr>
             <td>{{stock.universityname}}</td>
              <td>{{stock.coursename}}</td>
              <td>{{stock.semyear}}</td>
             <td>{{stock.registration}}</td>
 		      	<td>{{stock.stock}}</td>
          <td>
-            <i class="fa fa-eye" tooltip="View More"  (click)="viewstock()"></i>
+            <i class="fa fa-eye" tooltip="View More"  (click)="viewstock(i); showDetails = true"></i>
           </td>
 
           </tr>
          
+         <tr *ngIf="showDetails && viewId === i" style="background-color:lightblue">
+            
+             <td><strong>Date</strong></td>
+             <td><strong>Details</strong></td>
+             <td><strong>Incoming</strong></td>
+             <td><strong>Outgoing</strong></td>
+             <td><strong>Balance on Hand</strong></td>
+           <button (click)="showDetails = false"  class="btn btn-sm btn-danger"><i class="fa fa-ban"></i>cancel</button>
+          
+         </tr>
          
           
         </tbody>

src/app/views/studymaterial/studymaterialstock/studymaterialstock.component.ts

@@ -11,6 +11,7 @@ export class StudymaterialstockComponent implements OnInit {
   public myModal;
   public myModalData;
   studymaterialDetails: any;
+  stockdetails:any;
   constructor() { }
 
   ngOnInit() {
@@ -37,11 +38,35 @@ export class StudymaterialstockComponent implements OnInit {
         stock: '80'
       }
     ]
+
+     this.stockdetails = [
+      {
+       date: '10/08/2018',
+        details: 'MCA',
+        incoming: '100',
+        outgoing: '30',
+        balanceonhand: '70'
+      },
+      {
+      date: '12/08/2018',
+        details: 'MCA',
+        incoming: '60',
+        outgoing: '30',
+        balanceonhand: '30'
+      },
+      {
+        date: '14/08/2018',
+        details: 'MCA',
+        incoming: '50',
+        outgoing: '0',
+        balanceonhand: '50'
+      }
+    ]
   }
-  getModelWindowDetails(stuCent) {
-    this.myModalData = stuCent||null;
-  }
-    viewstock(){
+  viewId: any;
+    viewstock(i){
+      this.viewId = i;
      this.show = !this.show;
+
 }
 }