how to loop form in sibling component in angular

Question

so i have a service which send the increment value from message component to notify component but im not sure how to loop form based on the increment value in notify component as well as decrement the form

thanks to anyone who can help me

this is my service file

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class NotificationServiceService {
public notificationSubject =  new Subject<any>();
  constructor() { }
  sendNotification(data: any){
    this.notificationSubject.next(data)
  }
}

message.ts

import { Component, OnInit } from '@angular/core';
import { NotificationServiceService } from '../notification-service.service';

@Component({
 selector: 'app-message',
 templateUrl: './message.component.html',
 styleUrls: ['./message.component.css']
})
export class MessageComponent implements OnInit {
 count:any=0
 constructor(private notificationS: NotificationServiceService) { }

 ngOnInit(): void {
 }
 increment(data: any){
   this.count=this.count+1;
   this.notificationS.sendNotification(data.value)
 }
 decrement(){
   this.count=this.count-1
 }
}

message.html

<button (click)="increment(mess)" >ADD</button>
<input type="number" #mess [value]="count">
<button (click)="decrement()">SUB</button> 

notify.ts

import { Component, OnInit } from '@angular/core';
import { NotificationServiceService } from '../notification-service.service';
import { FormBuilder, FormGroup, FormArray, Validators, FormControl } from '@angular/forms';


@Component({
  selector: 'app-notify',
  templateUrl: './notify.component.html',
  styleUrls: ['./notify.component.css']
})
export class NotifyComponent implements OnInit {
  mycount: any[]=[];
  
  constructor(private notificationS:NotificationServiceService,private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.notificationS.notificationSubject.subscribe(d =>{
      this.mycount=d;
      console.log(this.mycount)
    })
    
  }
  

  }
}