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

refactor: add dialog content

Browse Source
This commit is contained in:
Timothy Alcaide
2024-04-10 14:29:39 +02:00
committed by thomas
parent 25004e7678
commit b00ce23792
3 changed files with 41 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/src/content/docs/challenges/angular/48-dialog-alert-form.md
View File

@@ -32,17 +32,13 @@ 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 alert dialog box must be clear and concise, stating: "Caution! You have unsaved information. Do you want to continue and lose them?" with the following button labels:
- Continue without saving
- Stay on page
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.
5. (Bonus) : Try to adopt a declarative approach (for dialog opening, for example).
<details>
<summary>Tips 🤫 (if you really need it and after careful consideration)</summary>
Use the Material CDK Dialog - https://material.angular.io/cdk/dialog/overview
Use the CanDeactivate guard - https://angular.io/api/router/CanDeactivate (use new functionnal approach).
- 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).
</details>