flattened result

src/app/users/users.component.html

@@ -94,6 +94,15 @@
         </rb-array-input>
       </td>
       <td>
+        <rb-icon-button icon="delete" mode="danger" class="space-below"
+                        (click)="deleteConfirm(modalDeleteConfirm, user.name)">
+          Delete
+        </rb-icon-button>
+        <ng-template #modalDeleteConfirm>
+          <rb-alert alertTitle="Are you sure?" type="danger" okBtnLabel="Delete user" cancelBtnLabel="Cancel">
+            Do you really want to delete this user?
+          </rb-alert>
+        </ng-template>
         <rb-icon-button icon="save" mode="primary" (click)="saveUser(user)"
                           [disabled]="nameInput.invalid || emailInput.invalid || locationInput.invalid">
           Save

src/app/users/users.component.scss

@@ -1,3 +1,12 @@
 ::ng-deep td .error-messages {
   position: absolute;
 }
+
+td:last-child rb-icon-button {
+  width: 100px;
+  float: left;
+
+  ::ng-deep button {
+    width: 100%;
+  }
+}

src/app/users/users.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {ApiService} from '../services/api.service';
 import {UserModel} from '../models/user.model';
 import {LoginService} from '../services/login.service';
+import {ModalService} from '@inst-iot/bosch-angular-ui-components';
 
 
 @Component({
@@ -17,7 +18,8 @@ export class UsersComponent implements OnInit {
 
   constructor(
     private api: ApiService,
-    public login: LoginService
+    public login: LoginService,
+    private modal: ModalService
   ) { }
 
   ngOnInit(): void {
@@ -45,4 +47,14 @@ export class UsersComponent implements OnInit {
     this.newUser = this.newUser ? null : new UserModel();
   }
 
+  deleteConfirm(modal, username) {
+    this.modal.open(modal).then(result => {
+      if (result) {
+        this.api.delete('/user/' + username, () => {
+          this.users.splice(this.users.findIndex(e => e.name === username), 1);
+        });
+      }
+    });
+  }
+
 }