Counter Component - Angular Typing CST Test

Counter Component — Angular Code

Demonstrates a simple counter component using Angular's component and reactive features.

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

@Component({
	selector: 'app-counter',
	template: `
		<div [ngClass]="{ 'dark-theme': isDark, 'light-theme': !isDark }">
		<h2>Counter: {{ count }}</h2>
		<div>
		<button (click)="increment()">+</button>
		<button (click)="decrement()">-</button>
		<button (click)="reset()">Reset</button>
		</div>
		<button (click)="toggleTheme()">Switch to {{ isDark ? 'Light' : 'Dark' }} Theme</button>
		</div>
	`
})
export class CounterComponent {
	count: number = 0;
	isDark: boolean = false;

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

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