adding a create button in lists

front/app/src/common/crud/list/list.component.html

@@ -1,4 +1,8 @@
 <form>
+
+	<button class="btn btn-success btn-lg float-end" type="button" (click)="onCreate()">
+	    Create {{ this.schema }}
+	</button>
 	<div class="mb-3 row">
 		<label for="table-complete-search" class="col-xs-3 col-sm-auto col-form-label">Full text search:</label>
 		<div class="col-xs-3 col-sm-auto">
@@ -12,21 +16,22 @@
 		</div>
 		<span class="col col-form-label" *ngIf="loading$ | async">Loading...</span>
 	</div>
-
-	<table class="table table-striped">
-		<thead>
-			<tr>
-				<th *ngFor="let col of this.displayedColumns" scope="col" sortable="name" (sort)="onSort($event)">{{ col }}</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr *ngFor="let row of listData$ | async" (click)="onSelect(row._id)">
-				<td *ngFor="let col of this.displayedColumns">
-					<ngb-highlight [result]="row[col]" [term]="searchTerm"></ngb-highlight>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+	<div class="table-responsive-md">
+		<table class="table table-striped">
+			<thead>
+				<tr>
+					<th *ngFor="let col of this.displayedColumns" scope="col" sortable="name" (sort)="onSort($event)">{{ col }}</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr *ngFor="let row of listData$ | async" (click)="onSelect(row._id)">
+					<td *ngFor="let col of this.displayedColumns">
+						<ngb-highlight [result]="row[col]" [term]="searchTerm"></ngb-highlight>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
 
 	<div class="d-flex justify-content-between p-2">
 		<ngb-pagination [collectionSize]="(total$ | async)!" [(page)]="page" [pageSize]="pageSize">

front/app/src/common/crud/list/list.component.ts

@@ -103,6 +103,10 @@ export class ListComponent implements OnInit {
       this.router.navigate([`../${id}`], {relativeTo: this.route});
   }
 
+  onCreate() {
+        this.router.navigate([`../new`], {relativeTo: this.route});
+  }
+
   get listData$() {
       return this._listData$.asObservable();
   }