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

docs(c48): refactor

Browse Source
This commit is contained in:
Sven Brodny
2024-04-19 01:47:36 +02:00
committed by Vimulatus
parent f3398003a4
commit 72e1074011
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md
View File

@@ -29,13 +29,13 @@ Here's the feature expressed as a user story with a functional expectation:
1. If one of the form fields is not empty and the user tries to navigate to a different route or page, or wants to reload the page, show an alert dialog to _avoid losing form data_. 1. If one of the form fields is not empty and the user tries to navigate to a different route or page, or wants to reload the page, show an alert dialog to _avoid losing form data_.
2. The content of `dialog.component.ts` must be used for your alert. 2. The content of `dialog.component.ts` must be used for your alert.
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/). 3. The appearance and behavior of the alert dialog 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. 4. Maximize the use of the new concepts and syntax in the latest version of Angular.
<details> <details>
<summary>Tips 🤫 (if you really need it and after careful consideration)</summary> <summary>Tips 🤫 if you really need it and after careful consideration ...</summary>
<ul> <ul>
<li>Use the [Material CDK](https://material.angular.io/cdk/) Dialog or Overlay - dont forget to add <code>@import '@angular/cdk/overlay-prebuilt.css'</code> in <code>styles.scss</code></li> * Use the [Material CDK](https://material.angular.io/cdk/) Dialog or Overlay - dont forget to add `@import '@angular/cdk/overlay-prebuilt.css'` in `styles.scss`.
<li>Use the [CanDeactivate](https://angular.io/api/router/CanDeactivate) guard in the new functional approach.</li> * Use the [CanDeactivate](https://angular.io/api/router/CanDeactivate) guard in the new functional approach.
</ul> </ul>
</details> </details>