Как передать значение формы из одного компонента в список в другом компоненте с помощью сервисов angular?

Я пытался разработать проект списка дел. У меня есть четыре компонента: Daily, Item-List, Item и Add-task

Ежедневный компонент содержит форму и список, в котором отображаются значения из формы. Далее я собираюсь создать форму в модальном диалоговом окне (новый отдельный компонент) и добавить ее значение в список в ежедневном компоненте.

Ниже приведены коды:

Daily.service.ts

Этот служебный код используется для получения значения из формы и добавления его в список.

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { DailyTask } from './models';

@Injectable({ providedIn: 'root' })
export class DailyService {

private _dailies$ = new BehaviorSubject<DailyTask[]>([]); 
public getDailies(): DailyTask[] {
return this._dailies$.getValue();
}

public setDailies(data: DailyTask[]): void {
 this._dailies$.next(data);
}

public getDailiesObservable(): Observable<DailyTask[]> {
return this._dailies$.asObservable();
}

public createTask(newTask: string): void{

console.info( "check");

  const dailyTask: DailyTask = { task: newTask, type: 'DAILY' };
  this.setDailies([dailyTask, ...this.getDailies()])
 }
}

Суточная.компонент.Ц

export class DailyComponent implements OnInit {
  public dailyList$: Observable<DailyTask[]> | null = null;

  constructor(private _dailyService: DailyService) {}

  ngOnInit(): void {
    this.dailyList$ = this._dailyService.getDailiesObservable();
  }

  public addDaily(name: string) {
     this._dailyService.createTask(name);
  }
 }

Daily.component.html

 <mat-card>
   <h1>Daily</h1>
    <app-item-list
      [type] = "'DAILY'"
      [initialData$] = "dailyList$"
      [onAddItem] = "addDaily.bind(this)"
    ></app-item-list>
 </mat-card>

Item-List.component.html

<div>
 <mat-form-field appearance = "outline">
 <input
  matInput
  placeholder = "Add a Task"
  (keyup.enter) = "addTask()"
  autocomplete = "off"
  [formControl] = "nameControl"/>
 </mat-form-field>
</div>

<ng-container *ngIf = "filteredData$ | async as data">

<app-item
  [value] = "value"
  *ngFor = "let value of data; index as index"
  (inputDataChange) = "removeTask(data, index)"
>
</app-item>
</ng-container>

Item-list.component.ts

export class ItemListComponent implements OnInit {
   
   nameControl = new FormControl('');
   @Input() public type: ItemType | null = null;
   @Input() public onAddItem: Function | null = null;
   
   constructor(private _homeService: HomeService) {}
   ngOnInit(): void {}

   addTask() {
     if (this.onAddItem) {
        this.onAddItem(this.nameControl.value);
        this.nameControl.reset();
   }
 }

item.component.html

<div class = "displayTask">
  <div class = "displayvalue" [ngClass] = "{ 'line-through': value.task }">
     {{ value.task | uppercase }}
  </div>
</div>

item.component.ts

export class ItemComponent implements OnInit {
  @Input()
   value: any;
  constructor() {}
  ngOnInit(): void {}
 }

Приведенный выше набор кодов работает отлично, ниже код для нового компонента task-dailog

задача-dailog.html

<div mat-dialog-title class = "dailogHeader">
   <h1 >Create Daily</h1>
</div>

<div mat-dialog-content>
    <div class = "dialogContent">
      <p>Task</p>
    <mat-form-field appearance = "outline">
    <input
        matInput
        placeholder = "Add a new Task"
        autocomplete = "off"
        (keyup.enter) = "addDailogTask()"
        [formControl] = "nameControl"
    />
    </mat-form-field>
    </div>
</div>

задача-dailog.component.ts

export class TaskDialogComponent implements OnInit {
  nameControl = new FormControl('');

  constructor(
    public dialogRef: MatDialogRef<TaskDialogComponent>,
    private _dailyService: DailyService,
  ) {}

  ngOnInit(): void {}

  onNoClick(): void {
    this.dialogRef.close();
  }

  addDailogTask(){
    const value$ =   this.nameControl.value;
    this.nameControl.reset();
    console.info(value$);
  }
 }

Здесь, в task-dialog.component.ts, у меня есть функция для получения значения из формы, но я застрял здесь и не знаю, что делать дальше. Я хотел бы узнать, как отправить это значение формы из TaskDialogComponent в список внутри DailyComponent.

Вот также Stackblitz для проекта.

Может кто-то помочь мне с этим . Я относительно новичок в angular и был бы очень признателен за помощь. Заранее спасибо!.