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

docs(c48): refactor

Browse Source
This commit is contained in:
Sven Brodny
2024-04-19 01:47:36 +02:00
parent 322ea9a9aa
commit 74c4b104a5
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_.
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.
<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>
<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>
<li>Use the [CanDeactivate](https://angular.io/api/router/CanDeactivate) guard in the new functional approach.</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`.
* Use the [CanDeactivate](https://angular.io/api/router/CanDeactivate) guard in the new functional approach.
</ul>
</details>