Implemented action buttons with ng-template!!!

2 files changed, 5 insertions, 20 deletions

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index b19c33d..ffed91d 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -20,24 +20,9 @@
                 <progress [value]="need.current" [max]="need.maxGoal"></progress>
             </div>
         </div>
-
-<!--        <div class="actionArea">-->
-<!--            <button *ngIf="isHelper()" (click)="add(need)">-->
-<!--                <span class="icon">add</span>Add To Basket-->
-<!--            </button>-->
-<!--            <button *ngIf="isManager()" (click)="select(need)">-->
-<!--                <span class="icon">edit</span>Edit Need-->
-<!--            </button>-->
-<!--            <button *ngIf="isManager()" (click)="delete(need.id)" >-->
-<!--                <span class="icon">delete</span>Delete Need-->
-<!--            </button>-->
-<!--        </div>-->
-<!--        <div class="actionArea">-->
-<!--            <input type="number" placeholder="Quantity" min="1" id={{need.id}} class="contribution">-->
-<!--            <button class="removeNeed" title="delete need" (click)="this.usersService.removeNeed(need.id)">-->
-<!--                <span class="icon">delete</span> Remove from Basket-->
-<!--            </button>-->
-<!--        </div>-->
+        <div *ngIf="actionArea" class="actionArea">
+            <ng-container [ngTemplateOutlet]="actionArea" [ngTemplateOutletContext]="{$implicit: need}"/>
+        </div>
     </div>
 </div>
 
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index cd7debb..7e5c3f4 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,6 +1,5 @@
-import {Component, Input, OnChanges, OnInit} from '@angular/core';
+import {Component, Input, OnChanges, TemplateRef} from '@angular/core';
 import {Need} from '../../models/Need';
-import {Observable} from 'rxjs';
 
 @Component({
     selector: 'app-need-list',
@@ -12,6 +11,7 @@ export class NeedListComponent implements OnChanges {
 
     @Input({required: true}) needs!: Need[]
     @Input() itemsPerPage: number = 5;
+    @Input() actionArea: TemplateRef<any> | null = null
 
     visibleNeeds: Need[] = [];
     currentPage: number = 0;