Counter with Service - Angular Typing CST Test

Counter with Service — Angular Code

Demonstrates a counter component in Angular using a service to share state.

import { Injectable, Component } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CounterService {
	count = 0;
	isDark = false;

	increment() { this.count++; }
	decrement() { this.count--; }
	reset() { this.count = 0; }
	toggleTheme() { this.isDark = !this.isDark; }
}

@Component({
	selector: 'app-counter-service',
	template: `
	<div [ngClass]="{ 'dark-theme': service.isDark, 'light-theme': !service.isDark }">
		<h2>Counter: {{ service.count }}</h2>
		<button (click)="service.increment()">+</button>
		<button (click)="service.decrement()">-</button>
		<button (click)="service.reset()">Reset</button>
		<button (click)="service.toggleTheme()">Toggle Theme</button>
	</div>
	`
})
export class CounterServiceComponent {
	constructor(public service: CounterService) {}
}

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