Reactive Counter - Angular Typing CST Test

Reactive Counter — Angular Code

Demonstrates reactive programming with RxJS BehaviorSubject for counter updates in Angular.

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
	selector: 'app-reactive-counter',
	template: `
	<div>
		<h2>Counter: {{ count$ | async }}</h2>
		<button (click)="increment()">+</button>
		<button (click)="decrement()">-</button>
	</div>
	`
})
export class ReactiveCounterComponent {
	private countSubject = new BehaviorSubject<number>(0);
	count$ = this.countSubject.asObservable();
	increment() { this.countSubject.next(this.countSubject.value + 1); }
	decrement() { this.countSubject.next(this.countSubject.value - 1); }
}

Angular Language Guide

Angular is a platform and framework for building client-side web applications using HTML, CSS, and TypeScript. Developed by Google, it is designed for building single-page applications (SPAs) with rich user interfaces and reactive features.

More Angular Typing Exercises

Practice Other Languages