Angular patterns — standalone components, signals, inject(), reactive forms, HTTP interceptors, and new control flow
95
94%
Does it follow best practices?
Impact
99%
2.75xAverage score across 4 eval scenarios
Passed
No known issues
Build a settings page in Angular with three sub-sections accessible via nested navigation:
/settings/profile) -- displays a form with name and email fields, with a save button./settings/notifications) -- displays toggles for email notifications, push notifications, and weekly digest./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.
Produce TypeScript files in a src/app/ directory:
src/app/settings/settings.routes.ts -- route configuration for settings and its childrensrc/app/settings/settings.component.ts -- layout component with navigation and router outletsrc/app/settings/profile/profile.component.ts -- profile form sub-sectionsrc/app/settings/notifications/notifications.component.ts -- notification toggles sub-sectionsrc/app/settings/security/security.component.ts -- change password form sub-sectionDo not include test files or build configuration.