vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 04:43:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: after review

Browse Source
This commit is contained in:
Timothy Alcaide
2024-04-12 01:23:13 +02:00
committed by thomas
parent 95d1bac6b8
commit 8b604b4b68
2 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/forms/form-dialog-alert/README.md
View File

@@ -1,4 +1,4 @@
# Save the form data with the navigation alert
# Avoid losing form data
> author: [Timothy Alcaide](https://github.com/alcaidio)

17
docs/src/content/docs/challenges/forms/48-dialog-alert-form.md
View File

@@ -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.
<details>
<summary>Tips 🤫 (if you really need it and after careful consideration)</summary>
- 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)
<br>
- Use the CanDeactivate guard - https://angular.io/api/router/CanDeactivate (use new functionnal approach).
<ul>
<li>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)</li>
<li>Use the CanDeactivate guard - https://angular.io/api/router/CanDeactivate (use new functionnal approach).</li>
</ul>
</details>