Open layer in new tab button

Frontend/src/app/modules/layers/layers-list/layers-list.component.html

@@ -35,7 +35,17 @@
     <td mat-cell *matCellDef="let element">{{LayerType[element.type]}}</td>
   </ng-container>
 
+  <ng-container matColumnDef="opt">
+    <th mat-header-cell *matHeaderCellDef>&nbsp;</th>
+    <td mat-cell *matCellDef="let element">
+      <button mat-icon-button (click)="$event.stopPropagation(); openInNewTab(element)">
+        <mat-icon>add_to_home_screen</mat-icon>
+      </button>
+    </td>
+  </ng-container>
+
   <tr mat-header-row *matHeaderRowDef="displayedColumns, sticky: false"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['Detail/', row.id]"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['Detail/', row.id]"
+    style="cursor: pointer"></tr>
 </table>
 <div (diunabiScrollEnd)="loadMore()"></div>

Frontend/src/app/modules/layers/layers-list/layers-list.component.ts

@@ -5,7 +5,7 @@ import { MatTableModule } from '@angular/material/table';
 import { Layer, LayerType } from 'src/app/models/layer.model';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatSelectModule } from '@angular/material/select';
@@ -26,7 +26,7 @@ import { Subject, debounceTime, distinctUntilChanged } from 'rxjs';
       MatChipsModule, MatIconModule, NgFor, ScrollEndDirective, KeyValuePipe]
 })
 export class LayersListComponent implements OnInit {
-  displayedColumns = ['number', 'name', 'type'];
+  displayedColumns = ['number', 'name', 'type', 'opt'];
   dataSource!: Layer[];
   LayerType = LayerType;
 
@@ -41,6 +41,7 @@ export class LayersListComponent implements OnInit {
 
   constructor(
     private _http: HttpClient,
+    private _router: Router
   ) { }
 
   async ngOnInit() {
@@ -66,5 +67,13 @@ export class LayersListComponent implements OnInit {
       await Layer.getList(this._http, this.start, this.limit, this.name, this.type)
       );
   }
+
+  openInNewTab(element: Layer) {
+    console.log(element);
+    const url = this._router.serializeUrl(
+      this._router.createUrlTree([`/app/layers/Detail/${element.id}`])
+    );
+    window.open(url, '_blank');
+  }
 }