Open layer in new tab button

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');
+  }
 }