Complete

src/app/components/general/collection/collection.component.html

@@ -7,4 +7,5 @@
                 style="width: 200px; height: 200px;"></ng-template>
     </div>
     <p style="margin-left: 20px;" class="text-collection">Name: {{name}} <br /> Has {{num}} image</p>
-</div>
+</div>
+<button (click)="DeleteCollection()" class="btn btn-danger">Remove</button>

src/app/components/general/collection/collection.component.scss

@@ -19,3 +19,13 @@ img {
     border-radius: 15px;
 }
 
+.btn {
+    position: absolute;
+    top: 8px;
+    left: 280px;
+    opacity: 0;
+}
+
+.btn:hover {
+    opacity: 1;
+}

src/app/components/general/collection/collection.component.ts

@@ -1,3 +1,4 @@
+import { CollectionsService } from './../../../services/collections.service';
 import { Component, OnInit, EventEmitter, Output, Input, ViewChild, ElementRef } from '@angular/core';
 
 @Component({
@@ -11,14 +12,16 @@ export class CollectionComponent implements OnInit {
   @Input() num: number;
   @Input() date: Date;
   @Input() index: number;
+  @Input() id: string;
   @Output() viewCollection = new EventEmitter<number>();
+  @Output() deleteCollection = new EventEmitter<number>();
 
   @ViewChild('imagePreview') imagePreview: ElementRef;
   isHasImage: boolean;
   limitSize: number = 345;
 
   @Output() viewImage = new EventEmitter<any>();
-  constructor() { }
+  constructor(private collectionService: CollectionsService) { }
 
   ngOnInit(): void {
     if (this.preview) {
@@ -34,13 +37,13 @@ export class CollectionComponent implements OnInit {
     const width = this.imagePreview.nativeElement.width;
     const height = this.imagePreview.nativeElement.height;
     if (width / height > 0.5 && width / height < 1) {
-      console.log(width / height);
+      // console.log(width / height);
       this.limitSize = 250;
     }
     let newWidth = width;
     let newHeight = height;
 
-    console.log(width, height);
+    // console.log(width, height);
 
     if (width > this.limitSize) {
       newHeight = this.limitSize * height / width;
@@ -62,4 +65,10 @@ export class CollectionComponent implements OnInit {
   ViewCollection(): void {
     this.viewCollection.emit(this.index);
   }
+
+  DeleteCollection(): void {
+    this.deleteCollection.emit(this.index);
+    // console.log(this.index);
+    this.collectionService.DeleteCollection(this.id).subscribe(data => {});
+  }
 }

src/app/page/profile/collections/collections.component.html

@@ -28,8 +28,8 @@
     <div class="gallery w-100 h-100 ">
         <div class="grid-container">
             <div class="image-list" id="image-list" *ngFor="let pic of collections; let i=index">
-                <app-collection (viewCollection)="ShowFullImage($event)" [name]="pic.name" [date]="pic.date"
-                    [preview]="pic.src[0]" [num]="pic.src.length" [index]="i">
+                <app-collection (deleteCollection)="DeleteCollection($event)" (viewCollection)="ShowFullImage($event)" [name]="pic.name" [date]="pic.date"
+                    [preview]="pic.src[0]" [num]="pic.src.length" [index]="i" [id]="pic._id">
                 </app-collection>
             </div>
         </div>

src/app/page/profile/collections/collections.component.ts

@@ -43,43 +43,6 @@ export class CollectionsComponent implements OnInit {
       });
   }
 
-  View(): void {
-  }
-
-  sort(): void {
-    this.collection = this.collection.sort((a1, a2) => {
-      if (a1.title > a2.title) {
-        return 1;
-      }
-
-      if (a1.title < a2.title) {
-        return -1;
-      }
-      return 0;
-    });
-  }
-
-  sortIncrease(): void {
-    this.collection = this.collection.sort((d1, d2) => d1.date.valueOf() - d2.date.valueOf());
-  }
-  sortReduce(): void {
-    this.collection = this.collection.sort((d1, d2) => d2.date.valueOf() - d1.date.valueOf());
-  }
-
-  removeAll(): void {
-    this.cnfrmMessage = confirm('Are u sure?')
-    if (this.cnfrmMessage === true) {
-      $(document).ready(function () {
-        $("#delete").ready(function () {
-          $(".image-list").remove();
-        });
-      });
-    }
-    else {
-      alert('Cancelled..!!!');
-    }
-  }
-
   AddCollection(): void {
     if (this.collections.map(x => x.name).indexOf(this.newTitle.nativeElement.value) < 0 && this.newTitle.nativeElement.value !== '') {
       let newCollection: any;
@@ -98,6 +61,11 @@ export class CollectionsComponent implements OnInit {
     }
   }
 
+  DeleteCollection(index: number): void {
+    console.log(index);
+    this.collections.splice(index, 1);
+  }
+
   ShowFullImage(collectionIndex: number): void {
     this.profileDataService.UpdateCollectionIndex(collectionIndex);
     // console.log(this.profileDataService.GetCollectionIndex());

src/app/services/collections.service.ts

@@ -31,6 +31,10 @@ export class CollectionsService {
     return this.http.get<any>(this.collectionsURL, { headers: this.httpHeaders });
   }
 
+  DeleteCollection(id: string): Observable<any> {
+    return this.http.delete<any>(`${this.collectionsURL}/${id}`, { headers: this.httpHeaders });
+  }
+
   AddCollectionsData(collection: any): Observable<any> {
     return this.http.post<any>(this.collectionsURL, collection, { headers: this.httpHeaders });
   }