CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/angular-best-practices

Angular patterns — standalone components, signals, inject(), reactive forms, HTTP interceptors, and new control flow

95

2.75x
Quality

94%

Does it follow best practices?

Impact

99%

2.75x

Average score across 4 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

task.mdevals/scenario-4/

Settings Page

Build a settings page in Angular with three sub-sections accessible via nested navigation:

  1. Profile (/settings/profile) -- displays a form with name and email fields, with a save button.
  2. Notifications (/settings/notifications) -- displays toggles for email notifications, push notifications, and weekly digest.
  3. Security (/settings/security) -- displays a change-password form with current password, new password, and confirm password fields.

The settings page should have a sidebar or tab navigation that highlights the active sub-section. The default route /settings should redirect to /settings/profile.

Each sub-section is its own component. The settings page component provides the layout with the navigation and a router outlet for the child content.

Output

Produce TypeScript files in a src/app/ directory:

  • src/app/settings/settings.routes.ts -- route configuration for settings and its children
  • src/app/settings/settings.component.ts -- layout component with navigation and router outlet
  • src/app/settings/profile/profile.component.ts -- profile form sub-section
  • src/app/settings/notifications/notifications.component.ts -- notification toggles sub-section
  • src/app/settings/security/security.component.ts -- change password form sub-section

Do not include test files or build configuration.

evals

tile.json