pass variable to parrent component

src/app/components/add-task/add-task.component.html

@@ -72,7 +72,24 @@
           <app-assigned
             [filteredUsers]="filteredUsers"
             [searchInput]="searchInput"
-          ></app-assigned>
+            (assignedChange)="receiveAssigned($event)"
+          >
+            ></app-assigned
+          >
+          }
+        </div>
+        <div class="assigned-badget">
+          @for (user of taskData.assigned; track user ) {
+          <div
+            class="circle"
+            [ngStyle]="{
+              'background-color': firebaseService.getUserDetails(user, 'color')
+            }"
+          >
+            <div class="initials">
+              {{ firebaseService.getUserDetails(user, "initials") }}
+            </div>
+          </div>
           }
         </div>
       </div>

src/app/components/add-task/add-task.component.ts

@@ -4,6 +4,7 @@ import { FormsModule, NgForm, NgModel } from '@angular/forms';
 import { AssignedComponent } from './assigned/assigned.component';
 import { User } from '../../interfaces/user.interface';
 import { FirebaseService } from '../../services/firebase.service';
+import { TaskData } from '../../interfaces/task-data.interface';
 
 @Component({
   selector: 'app-add-task',
@@ -23,10 +24,11 @@ export class AddTaskComponent {
   searchValue: string = '';
   searchInput: boolean = false;
   filteredUsers: User[] = [];
+  parentAssigned: string[] = [];
 
   constructor(public firebaseService: FirebaseService) {}
 
-  taskData = {
+  taskData: TaskData = {
     title: '',
     description: '',
     date: this.currentDate,
@@ -35,6 +37,10 @@ export class AddTaskComponent {
     assigned: [],
   };
 
+  receiveAssigned(assigned: string[]) {
+    this.taskData.assigned = assigned;
+  }
+
   ngOnInit() {
     const storedTaskData = localStorage.getItem('taskData');
     if (storedTaskData) {

src/app/components/add-task/assigned/assigned.component.ts

@@ -1,24 +1,31 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FirebaseService } from '../../../services/firebase.service';
 import { CommonModule } from '@angular/common';
 import { User } from '../../../interfaces/user.interface';
+import { AddTaskComponent } from '../add-task.component';
 
 @Component({
   selector: 'app-assigned',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, AddTaskComponent],
   templateUrl: './assigned.component.html',
   styleUrl: './assigned.component.scss',
 })
 export class AssignedComponent {
   @Input() filteredUsers: User[] = [];
   @Input() searchInput: boolean = false;
+  @Output() assignedChange = new EventEmitter<string[]>();
+
   assigned: string[] = [];
 
   constructor(public firebaseService: FirebaseService) {
     this.loadTaskAssigedData();
   }
 
+  updateAssigned() {
+    this.assignedChange.emit(this.assigned);
+  }
+
   addAssignedToTask(userId: string) {
     if (!this.assigned.includes(userId)) {
       this.assigned.push(userId);
@@ -26,6 +33,7 @@ export class AssignedComponent {
       this.assigned.splice(this.assigned.indexOf(userId), 1);
     }
     this.saveTaskData();
+    this.updateAssigned();
   }
 
   saveTaskData() {

src/app/interfaces/task-data.interface.ts

@@ -0,0 +1,8 @@
+export interface TaskData {
+  title: string;
+  description: string;
+  date: string;
+  priority: string;
+  category: string;
+  assigned: string[];
+}