diff --git a/src/angular/components/folder-add-edit.component.ts b/src/angular/components/folder-add-edit.component.ts
new file mode 100644
index 0000000000..c84be649c1
--- /dev/null
+++ b/src/angular/components/folder-add-edit.component.ts
@@ -0,0 +1,84 @@
+import {
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { FolderService } from '../../abstractions/folder.service';
+import { I18nService } from '../../abstractions/i18n.service';
+import { PlatformUtilsService } from '../../abstractions/platformUtils.service';
+
+import { FolderView } from '../../models/view/folderView';
+
+export class FolderAddEditComponent implements OnInit {
+    @Input() folderId: string;
+    @Output() onSavedFolder = new EventEmitter<FolderView>();
+    @Output() onDeletedFolder = new EventEmitter<FolderView>();
+
+    editMode: boolean = false;
+    folder: FolderView = new FolderView();
+    title: string;
+    formPromise: Promise<any>;
+    deletePromise: Promise<any>;
+
+    constructor(protected folderService: FolderService, protected i18nService: I18nService,
+        protected analytics: Angulartics2, protected toasterService: ToasterService,
+        protected platformUtilsService: PlatformUtilsService) { }
+
+    async ngOnInit() {
+        this.editMode = this.folderId != null;
+
+        if (this.editMode) {
+            this.editMode = true;
+            this.title = this.i18nService.t('editFolder');
+            const folder = await this.folderService.get(this.folderId);
+            this.folder = await folder.decrypt();
+        } else {
+            this.title = this.i18nService.t('addFolder');
+        }
+    }
+
+    async submit(): Promise<boolean> {
+        if (this.folder.name == null || this.folder.name === '') {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('nameRequired'));
+            return false;
+        }
+
+        try {
+            const folder = await this.folderService.encrypt(this.folder);
+            this.formPromise = this.folderService.saveWithServer(folder);
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: this.editMode ? 'Edited Folder' : 'Added Folder' });
+            this.toasterService.popAsync('success', null,
+                this.i18nService.t(this.editMode ? 'editedFolder' : 'addedFolder'));
+            this.onSavedFolder.emit(this.folder);
+            return true;
+        } catch { }
+
+        return false;
+    }
+
+    async delete(): Promise<boolean> {
+        const confirmed = await this.platformUtilsService.showDialog(
+            this.i18nService.t('deleteFolderConfirmation'), this.i18nService.t('deleteFolder'),
+            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
+        if (!confirmed) {
+            return false;
+        }
+
+        try {
+            this.deletePromise = this.folderService.deleteWithServer(this.folder.id);
+            await this.deletePromise;
+            this.analytics.eventTrack.next({ action: 'Deleted Folder' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('deletedFolder'));
+            this.onDeletedFolder.emit(this.folder);
+        } catch { }
+
+        return true;
+    }
+}