Why should you care?

Signals simplify local state (filters, cart count) compared to BehaviorSubject for every trivial value.

See it live — copy this example

Paste into your MeanVerse project (Angular + Express + MongoDB), then run with ng serve / node / mongosh as noted.

@Component({ standalone: true, template: `
  <input [value]="query()" (input)="query.set($any($event.target).value)" />
  <p>{{ filteredCount() }} matches</p>` })
export class SearchComponent {
  accounts = signal<Account[]>([]);
  query = signal('');
  filteredCount = computed(() =>
    this.accounts().filter(a => a.name.includes(this.query())).length
  );
}

What happened?

• signal holds value; set updates it.
• computed derives filteredCount and recalculates when query or accounts change.
• Template calls signal as function.

Practice next

1. Replace one component field with signal(initial).
2. Add computed for derived UI state.
3. Load accounts in ngOnInit and accounts.set(data).
4. Bridge HttpClient to signal with toSignal(accounts$).
5. Use linkedSignal when parent input drives child state.

Remember

Signals = synchronous reactive state. computed avoids manual recalc in templates. Great for filters, toggles, wizard steps.

Analytics filter bar

MeanVerse ops dashboard filters 10k rows by region and status.

Outcome: computed filters client-side instantly as user types.