How to build a settings page in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
A settings page organizes application configuration into logical sections — account details, notifications preferences, security settings, and integrations — each in a separate tab or card. As the creator of CoreUI with Angular development experience since 2014, I’ve designed the settings page structure in CoreUI Angular templates that handles the separation of concerns between different settings categories. The key is using Angular’s tab navigation to organize sections, reactive forms for each section, and saving changes independently so updating notifications doesn’t require re-entering account details. Each settings section should be a standalone component with its own form and save button.
Create the settings page with CoreUI tabs.
// settings.component.ts
import { Component } from '@angular/core'
import { CommonModule } from '@angular/common'
import { TabsModule, CardModule, GridModule } from '@coreui/angular'
import { AccountSettingsComponent } from './account-settings.component'
import { NotificationSettingsComponent } from './notification-settings.component'
import { SecuritySettingsComponent } from './security-settings.component'
@Component({
selector: 'app-settings',
standalone: true,
imports: [
CommonModule, TabsModule, CardModule, GridModule,
AccountSettingsComponent, NotificationSettingsComponent, SecuritySettingsComponent
],
template: `
<h1 class="mb-4">Settings</h1>
<c-tabs>
<c-tab-list>
<c-tab [itemKey]="0">Account</c-tab>
<c-tab [itemKey]="1">Notifications</c-tab>
<c-tab [itemKey]="2">Security</c-tab>
</c-tab-list>
<c-tab-content>
<c-tab-panel [itemKey]="0">
<app-account-settings></app-account-settings>
</c-tab-panel>
<c-tab-panel [itemKey]="1">
<app-notification-settings></app-notification-settings>
</c-tab-panel>
<c-tab-panel [itemKey]="2">
<app-security-settings></app-security-settings>
</c-tab-panel>
</c-tab-content>
</c-tabs>
`
})
export class SettingsComponent {}
Notification Settings Tab
Toggle notifications with checkbox controls.
// notification-settings.component.ts
import { Component, OnInit } from '@angular/core'
import { CommonModule } from '@angular/common'
import { ReactiveFormsModule, FormBuilder } from '@angular/forms'
import { CardModule, FormModule, ButtonModule } from '@coreui/angular'
import { UserService } from '../services/user.service'
@Component({
selector: 'app-notification-settings',
standalone: true,
imports: [CommonModule, ReactiveFormsModule, CardModule, FormModule, ButtonModule],
template: `
<c-card class="mt-3">
<c-card-header>Email Notifications</c-card-header>
<c-card-body>
<form [formGroup]="form" (ngSubmit)="save()">
<div class="mb-3">
<c-form-check
formControlName="marketingEmails"
label="Marketing emails and product updates"
id="marketing"
></c-form-check>
</div>
<div class="mb-3">
<c-form-check
formControlName="securityAlerts"
label="Security alerts and login notifications"
id="security"
></c-form-check>
</div>
<div class="mb-3">
<c-form-check
formControlName="weeklyDigest"
label="Weekly activity digest"
id="digest"
></c-form-check>
</div>
<div class="mb-4">
<c-form-check
formControlName="orderUpdates"
label="Order status updates"
id="orders"
></c-form-check>
</div>
<p *ngIf="saved" class="text-success">Preferences saved</p>
<button cButton color="primary" type="submit" [disabled]="saving">
{{ saving ? 'Saving...' : 'Save Preferences' }}
</button>
</form>
</c-card-body>
</c-card>
`
})
export class NotificationSettingsComponent implements OnInit {
saving = false
saved = false
form = this.fb.group({
marketingEmails: [false],
securityAlerts: [true],
weeklyDigest: [false],
orderUpdates: [true]
})
constructor(private fb: FormBuilder, private userService: UserService) {}
ngOnInit(): void {
this.userService.getNotificationSettings().subscribe(settings => {
this.form.patchValue(settings)
})
}
async save(): Promise<void> {
this.saving = true
await this.userService.updateNotificationSettings(this.form.value)
this.saved = true
this.saving = false
setTimeout(() => { this.saved = false }, 3000)
}
}
patchValue pre-populates the form from the API response. Each tab section loads its own settings independently, so the page doesn’t wait for all settings to load before rendering.
Best Practice Note
This is the same settings page structure used in CoreUI Angular Admin Template. Showing a temporary success message that auto-hides after 3 seconds gives users confidence that their changes were saved without permanent page clutter. For settings that take effect immediately (like theme switching), update the UI immediately on change using valueChanges observable on the form control rather than waiting for the save button. See how to build a profile page in Angular for the companion profile editing page.
