Angular sharing data between components - input() / output() / model() signals

app.component.html

<div class="p-5">
    <h1>
        Parent component
    </h1>
    <hr>
    <div class="card card-body bg-warning text-bg-warning">
        Value from parent: {{counter}}
    </div>
    <hr>
    <input type="number" [(ngModel)]="counter" class="form-control">
    <hr>
    <app-child-output-signal [counter]="counter" (counterEmit)="receiveCounter($event)"></app-child-output-signal>
</div>

app.component.ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { ChildOutputSignalComponent } from "./child-output-signal/child-output-signal.component";
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule, ChildOutputSignalComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {

  public counter: number = 25;

  public receiveCounter(value: number) {
    this.counter = value;
  }
}

child-output-signal.component.html

<h2>
    Child component
</h2>
<hr>
<div class="card card-body bg-secondary text-bg-secondary">
    Value from child: {{counter()}}
</div>
<hr>
<input type="number" [(ngModel)]="counter" (input)="changeValue()"  class="form-control">

child-output-signal.component.ts

import { Component, input, InputSignal, model, ModelSignal, output, OutputEmitterRef } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-child-output-signal',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './child-output-signal.component.html',
  styleUrl: './child-output-signal.component.scss'
})
export class ChildOutputSignalComponent {

  // public counter: number =  75;

  // counter: InputSignal<number> = input<number>(50);

  public  counter: ModelSignal<number> = model<number>(77);
  public counterEmit: OutputEmitterRef<number> = output<number>()

  public changeValue() {
    this.counterEmit.emit(this.counter())
  }
}