Angular EventEmitter doesn't seem to work

I have a main component which calls a child component which is a toggle pannel, when I active the toggle it emits the value of the toggle (true or false)

toggle-pannel.component.ts

@Output() toggleChange = new EventEmitter<boolean>();

  onChange(event: MatSlideToggleChange) {
    this.toggle = event.checked;
    this.toggleChange.emit(this.toggle);
  }

When I use this component this way:

main.component.html

<app-toggle-panel
        [(toggle)]="toggleValue"
      >
</app-toggle-panel>

It works pretty well, the value of isToggle is changed.

But when I use it like that:

main.component.html

<app-toggle-panel
        (toggle)="onToggleChange($event)"
      >
</app-toggle-panel>

with this function in the main component:

main.component.js

  onToggleChange(event) {
    this.toggleValue = event;
    this.emit();
  }

the function onToggleChange is never called when I switch the toggle and I don't understand why.

The problem is that I have to call the function emit when the value of "toggleValue" change.

I also tried to use ngOnChanges for detecting the change of "toggleValue" but even if the emit function is call in the toggle-panel component, no change are detected by ngOnChanges.

ngOnChanges(changes: SimpleChanges) {
  console.log(changes)
}

How can I fix this problem?

You need to either mention a name for the output or bind to the variable that is emitted

Option 1

child.component.ts

@Output('toggle') toggleChange = new EventEmitter<boolean>();

parent.component.html

<app-toggle-panel (toggle)="onToggleChange($event)">

Option 2

child.component.ts

@Output() toggleChange = new EventEmitter<boolean>();

parent.component.html

<app-toggle-panel (toggleChange)="onToggleChange($event)">