Full crud with the delete

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

@@ -2,8 +2,11 @@
   <form [formGroup]="form" (ngSubmit)="onSubmit(model)">
     <span class="col col-form-label" *ngIf="loading$ | async">Loading...</span>
     <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
-    <button type="submit" class="btn btn-default">
-      {{resource_id === null ? "Create" : "Update"}}
+    <button color="primary"  type="submit" class="btn btn-default">
+      {{ this.isCreateForm() ? "Create" : "Update" }}
+    </button>
+    <button *ngIf="!this.isCreateForm()" (click)="onDelete()" color="danger" type="" class="btn btn-default">
+      Delete
     </button>
   </form>
 </div>

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

@@ -1,12 +1,12 @@
-import {Component, Input, OnInit} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { FormlyFieldConfig } from '@ngx-formly/core'
 import { FormlyJsonschema } from '@ngx-formly/core/json-schema';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { CrudService } from '../crud.service'
-import {BehaviorSubject} from "rxjs";
-import {JsonschemasService} from "../jsonschemas.service";
+import { BehaviorSubject } from "rxjs";
+import { JsonschemasService } from "../jsonschemas.service";
 
 export interface Model {
   email: string;
@@ -35,7 +35,8 @@ export class CardComponent implements OnInit {
   constructor(private crudService: CrudService,
               private jsonSchemasService: JsonschemasService,
               private formlyJsonschema: FormlyJsonschema,
-              private router: Router
+              private router: Router,
+              private route: ActivatedRoute,
   ) { }
 
     ngOnInit(): void {
@@ -70,6 +71,14 @@ export class CardComponent implements OnInit {
     }
   }
 
+    onDelete() {
+        this._loading$.next(true);
+        this.crudService.delete(this.resource!, this.model).subscribe((model: any) => {
+            this._loading$.next(false);
+            this.router.navigate(['../'], {relativeTo: this.route});
+        });
+    }
+
   isCreateForm() {
     return this.resource_id === null;
   }

front/app/src/common/crud/crud.service.ts

@@ -45,4 +45,10 @@ export class CrudService extends ApiService {
       model
     );
   }
+
+  public delete(resource: string, model: any) {
+    return this.http.delete<{ menu: [{}] }>(
+      `${this.api_root}/${resource.toLowerCase()}/${model._id}`
+    );
+  }
 }