diff --git a/README.md b/README.md
index 780d6c2..82d5fbc 100644
--- a/README.md
+++ b/README.md
@@ -188,7 +188,7 @@ Besides specifying these options on the component itself, you can provide a glob
If the captcha has expired prior to submitting its value to the server, the component
will reset the captcha, and trigger the `resolved` event with `response === null`.
-- `error(errorDetails: RecaptchaErrorParameters)`. Occurs when reCAPTCHA encounters an error (usually a connectivity problem) **if and only if** `errorMode` input has been set to `"handled"`.
+- `errored(errorDetails: RecaptchaErrorParameters)`. Occurs when reCAPTCHA encounters an error (usually a connectivity problem) **if and only if** `errorMode` input has been set to `"handled"`.
`errorDetails` is a simple propagation of any arguments that the original `error-callback` has provided, and is documented here for the purposes of completeness and future-proofing. This array will most often (if not always) be empty. A good strategy would be to rely on just the fact that this event got triggered, and show a message to your app's user telling them to retry.
### Methods
@@ -288,7 +288,7 @@ import { Component } from "@angular/core";
@Component({
selector: "my-app",
- template: ``,
+ template: ``,
})
export class MyApp {
resolved(captchaResponse: string) {
@@ -303,9 +303,9 @@ export class MyApp {
You can see this in action by navigating to either [basic example demo](https://dethariel.github.io/ng-recaptcha/basic) or [invisible demo](https://dethariel.github.io/ng-recaptcha/invisible) and trying to interact with reCAPTCHA after setting the network to "Offline".
-The `errorMode` input has two possible values -- `"handled"` and `"default"`, with latter being the default as the name suggests. Not specifying `errorMode`, or setting it to anything other than `"handled"` will not invoke your `(error)` callback, and will instead result in default reCAPTCHA functionality.
+The `errorMode` input has two possible values -- `"handled"` and `"default"`, with latter being the default as the name suggests. Not specifying `errorMode`, or setting it to anything other than `"handled"` will not invoke your `(errored)` callback, and will instead result in default reCAPTCHA functionality.
-The `(error)` callback will propagate all of the parameters that it receives from `grecaptcha['error-callback']` (which might be none) as an array.
+The `(errored)` callback will propagate all of the parameters that it receives from `grecaptcha['error-callback']` (which might be none) as an array.
### Loading the reCAPTCHA API by yourself [(see in action)](https://dethariel.github.io/ng-recaptcha/v8/preload-api)
diff --git a/projects/demo/src/app/examples/basic/basic-demo.component.html b/projects/demo/src/app/examples/basic/basic-demo.component.html
index 05b120d..81a4be2 100644
--- a/projects/demo/src/app/examples/basic/basic-demo.component.html
+++ b/projects/demo/src/app/examples/basic/basic-demo.component.html
@@ -1 +1 @@
-
+
diff --git a/projects/demo/src/app/examples/invisible/invisible-demo.component.html b/projects/demo/src/app/examples/invisible/invisible-demo.component.html
index c3ab46a..f50d932 100644
--- a/projects/demo/src/app/examples/invisible/invisible-demo.component.html
+++ b/projects/demo/src/app/examples/invisible/invisible-demo.component.html
@@ -1,7 +1,7 @@
diff --git a/projects/ng-recaptcha/src/lib/recaptcha.component.spec.ts b/projects/ng-recaptcha/src/lib/recaptcha.component.spec.ts
index 91de770..56b2cdc 100644
--- a/projects/ng-recaptcha/src/lib/recaptcha.component.spec.ts
+++ b/projects/ng-recaptcha/src/lib/recaptcha.component.spec.ts
@@ -117,7 +117,7 @@ describe("RecaptchaComponent", () => {
it("should emit grecaptcha error if errorMode was set to 'handled'", () => {
// Arrange
const emittedErrors: Array = [];
- component.error.subscribe((error: RecaptchaErrorParameters) => emittedErrors.push(error));
+ component.errored.subscribe((error: RecaptchaErrorParameters) => emittedErrors.push(error));
component.errorMode = "handled";
mockRecaptchaLoaderService.init();
diff --git a/projects/ng-recaptcha/src/lib/recaptcha.component.ts b/projects/ng-recaptcha/src/lib/recaptcha.component.ts
index 38a899f..8a99f70 100644
--- a/projects/ng-recaptcha/src/lib/recaptcha.component.ts
+++ b/projects/ng-recaptcha/src/lib/recaptcha.component.ts
@@ -42,9 +42,12 @@ export class RecaptchaComponent implements AfterViewInit, OnDestroy {
@Input() public errorMode: "handled" | "default" = "default";
@Output() public resolved = new EventEmitter();
- // The rename will happen a bit later
+ /**
+ * @deprecated `(error) output will be removed in the next major version. Use (errored) instead
+ */
// eslint-disable-next-line @angular-eslint/no-output-native
@Output() public error = new EventEmitter();
+ @Output() public errored = new EventEmitter();
/** @internal */
private subscription: Subscription;
@@ -136,8 +139,9 @@ export class RecaptchaComponent implements AfterViewInit, OnDestroy {
}
/** @internal */
- private errored(args: RecaptchaErrorParameters) {
+ private onError(args: RecaptchaErrorParameters) {
this.error.emit(args);
+ this.errored.emit(args);
}
/** @internal */
@@ -172,7 +176,7 @@ export class RecaptchaComponent implements AfterViewInit, OnDestroy {
if (this.errorMode === "handled") {
renderOptions["error-callback"] = (...args: RecaptchaErrorParameters) => {
- this.zone.run(() => this.errored(args));
+ this.zone.run(() => this.onError(args));
};
}