How to differentiate between EventEmitter and event handler method?

Question

The component html looks somewhat like this:

<form nz-form [formGroup]="form" (ngSubmit)="onSubmit()">
  <button nz-button type="button" (click)="cancel()">
    Cancel
  </button>

  <button nz-button type="submit" [nzType]="'primary'">
    Submit
  </button>
</form>

and the component class looks somewhat like this:

@Component({
  selector: "my-form",
  templateUrl: "./my-form.component.html",
  styleUrls: ["./my-form.component.scss"]
})
export class MyFormComponent {
  constructor(private fb: FormBuilder) {}

  @Output()
  onSuccess: EventEmitter<boolean> = new EventEmitter();
  @Output()
  onCancel = new EventEmitter<void>();

  form: FormGroup = this.fb.group();

  cancel() {
    this.onCancel.emit();
  }

  onSubmit(): void {
    if (formIsValid) {
      this.onSuccess.emit(true);
    }
  }
}

The question is, how should the event emitter and event handler be named? Is there some naming convention I can adhere to?

A cancel event is handled by both the cancel() method and the onCancel event emitter.

Answer 1

As per Angular Guide lines, you should not prefix output properties. Basically there won't be any specific difference between event and EventEmitter.

For more info visit - https://angular.io/guide/styleguide#dont-prefix-output-properties