diff --git a/apps/forms/form-dialog-alert/README.md b/apps/forms/form-dialog-alert/README.md index 1ebbe0b..93f4070 100644 --- a/apps/forms/form-dialog-alert/README.md +++ b/apps/forms/form-dialog-alert/README.md @@ -1,4 +1,4 @@ -# Save the form data with the navigation alert +# Avoid losing form data > author: [Timothy Alcaide](https://github.com/alcaidio) diff --git a/docs/src/content/docs/challenges/forms/48-dialog-alert-form.md b/docs/src/content/docs/challenges/forms/48-dialog-alert-form.md index 6e94a8a..0dece74 100644 --- a/docs/src/content/docs/challenges/forms/48-dialog-alert-form.md +++ b/docs/src/content/docs/challenges/forms/48-dialog-alert-form.md @@ -1,5 +1,5 @@ --- -title: 🟠 Save the form data with the navigation alert +title: 🟠 Avoid losing form data description: Challenge 48 is about Bob 🧙‍♂️ the product owner, he wants to develop a new feature in response to customer complaints about losing form input information. author: timothy-alcaide contributors: @@ -13,11 +13,11 @@ sidebar: ## Context -As a member of the development team, you need to address a specific request from the product owner, Bob 🧙‍♂️ He wants to develop a new feature in response to customer complaints about losing form input information. +As a member of the development team, you need to address a specific request from the product owner, 🧙‍♂️ Bob. He wants to develop a new feature in response to customer complaints about losing form input information. ## User Story -Here's the feature expressed as a user story (functional expectation) +Here's the feature expressed as a user story (functional expectation) : "As a user, I would like to have an alert dialog box that appears when I attempt to navigate away from the /form page after I have started entering information into the form." @@ -28,13 +28,14 @@ Here's the feature expressed as a user story (functional expectation) - If the input text has been pre-filled, then an alert dialog box opens. - Otherwise, the user navigates normally. -2. The content of dialog.component.ts must be use for your dialog box content -3. The appearance and behavior of the alert dialog box must comply with W3C conventions, see [alert dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/) +2. The content of `dialog.component.ts` must be use for your dialog box content. +3. The appearance and behavior of the alert dialog box must comply with W3C conventions, see [alert dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). 4. Maximize the use of the new concepts and syntax in the latest version of Angular.
Tips 🤫 (if you really need it and after careful consideration) - - Use the Material CDK Dialog or Overlay - https://material.angular.io/cdk/ (dont forget to add @import '@angular/cdk/overlay-prebuilt.css' in style.sccss) -
- - Use the CanDeactivate guard - https://angular.io/api/router/CanDeactivate (use new functionnal approach). +