Learn Angular - 10 Code Examples & CST Typing Practice Test

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.

View all 10 Angular code examples →

Angular Counter Component Angular Counter with Service Angular Counter with Two-Way Binding Angular Counter with EventEmitter Angular Reactive Counter Angular Counter with Lifecycle Hooks Angular Counter with LocalStorage Angular Counter with AsyncPipe Angular Counter with Input Property Angular Counter with Output Event

Learn ANGULAR with Real Code Examples

Updated Nov 21, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Angular Counter Component

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; }
}

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

Let’s Try →

Angular Counter with Service

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) {}
}

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

Let’s Try →

Angular Counter with Two-Way Binding

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

@Component({
    selector: 'app-counter-ngmodel',
    template: `
    <div>
        <h2>Counter: <input [(ngModel)]="count" type="number"></h2>
        <button (click)="increment()">+</button>
        <button (click)="decrement()">-</button>
        <button (click)="reset()">Reset</button>
    </div>
    `
})
export class CounterNgModelComponent {
    count: number = 0;
    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
}

Demonstrates two-way binding with [(ngModel)] in an Angular counter component.

Let’s Try →

Angular Counter with EventEmitter

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

@Component({
    selector: 'app-counter-emitter',
    template: `
    <div>
        <h2>Counter: {{ count }}</h2>
        <button (click)="increment()">+</button>
        <button (click)="decrement()">-</button>
    </div>
    `
})
export class CounterEmitterComponent {
    count = 0;
    @Output() countChange = new EventEmitter<number>();
    increment() { this.count++; this.countChange.emit(this.count); }
    decrement() { this.count--; this.countChange.emit(this.count); }
}

Demonstrates using @Output() and EventEmitter for parent-child communication in Angular.

Let’s Try →

Angular Reactive Counter

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); }
}

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

Let’s Try →

Angular Counter with Lifecycle Hooks

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

@Component({
    selector: 'app-lifecycle-counter',
    template: `
    <div>
        <h2>Counter: {{ count }}</h2>
        <button (click)="increment()">+</button>
        <button (click)="decrement()">-</button>
    </div>
    `
})
export class LifecycleCounterComponent implements OnInit, OnDestroy {
    count = 0;
    ngOnInit() { console.log('Counter initialized'); }
    ngOnDestroy() { console.log('Counter destroyed'); }
    increment() { this.count++; }
    decrement() { this.count--; }
}

Shows use of Angular lifecycle hooks ngOnInit and ngOnDestroy in a counter component.

Let’s Try →

Angular Counter with LocalStorage

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

@Component({
    selector: 'app-localstorage-counter',
    template: `
    <div>
        <h2>Counter: {{ count }}</h2>
        <button (click)="increment()">+</button>
        <button (click)="decrement()">-</button>
        <button (click)="reset()">Reset</button>
    </div>
    `
})
export class LocalStorageCounterComponent implements OnInit {
    count = 0;
    ngOnInit() { this.count = parseInt(localStorage.getItem('count') || '0', 10); }
    increment() { this.count++; this.save(); }
    decrement() { this.count--; this.save(); }
    reset() { this.count = 0; this.save(); }
    save() { localStorage.setItem('count', this.count.toString()); }
}

Stores the counter value in localStorage to persist across page reloads in Angular.

Let’s Try →

Angular Counter with AsyncPipe

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

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

Uses RxJS and Angular AsyncPipe to display reactive counter values.

Let’s Try →

Angular Counter with Input Property

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

@Component({
    selector: 'app-input-counter',
    template: `
    <div>
        <h2>Counter: {{ count }}</h2>
        <button (click)="increment()">+</button>
        <button (click)="decrement()">-</button>
    </div>
    `
})
export class InputCounterComponent {
    @Input() count = 0;
    increment() { this.count++; }
    decrement() { this.count--; }
}

Allows parent component to set initial counter value using @Input in Angular.

Let’s Try →

Angular Counter with Output Event

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

@Component({
    selector: 'app-output-counter',
    template: `
    <div>
        <h2>Counter: {{ count }}</h2>
        <button (click)="increment()">+</button>
        <button (click)="decrement()">-</button>
    </div>
    `
})
export class OutputCounterComponent {
    count = 0;
    @Output() countChange = new EventEmitter<number>();
    increment() { this.count++; this.countChange.emit(this.count); }
    decrement() { this.count--; this.countChange.emit(this.count); }
}

Emits counter value changes to parent component using @Output and EventEmitter in Angular.

Let’s Try →

Frequently Asked Questions about Angular

What is Angular?

What are the primary use cases for Angular?

Single-page applications (SPAs). Enterprise web apps with complex UIs. Progressive Web Apps (PWAs). Dynamic dashboards and admin panels. Cross-platform web applications with Angular Universal

What are the strengths of Angular?

Strong typing and early error detection with TypeScript. Powerful CLI and developer tooling. Structured and maintainable architecture. Large ecosystem and community support. Optimized for complex, enterprise-grade applications

What are the limitations of Angular?

Steep learning curve for beginners. Verbosity compared to lightweight frameworks. Requires understanding of TypeScript and RxJS. Heavier bundle size than simpler frameworks. Overkill for very small or simple apps

How can I practice Angular typing speed?

CodeSpeedTest offers 10+ real Angular code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Angular Counter Component

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; }
}

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

Let’s Try →

Angular Counter with Service

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) {}
}

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

Let’s Try →

Angular Counter with Two-Way Binding

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

@Component({
    selector: 'app-counter-ngmodel',
    template: `
    <div>
        <h2>Counter: <input [(ngModel)]="count" type="number"></h2>
        <button (click)="increment()">+</button>
        <button (click)="decrement()">-</button>
        <button (click)="reset()">Reset</button>
    </div>
    `
})
export class CounterNgModelComponent {
    count: number = 0;
    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
}

Demonstrates two-way binding with [(ngModel)] in an Angular counter component.

Let’s Try →

Angular Counter with EventEmitter

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

@Component({
    selector: 'app-counter-emitter',
    template: `
    <div>
        <h2>Counter: {{ count }}</h2>
        <button (click)="increment()">+</button>
        <button (click)="decrement()">-</button>
    </div>
    `
})
export class CounterEmitterComponent {
    count = 0;
    @Output() countChange = new EventEmitter<number>();
    increment() { this.count++; this.countChange.emit(this.count); }
    decrement() { this.count--; this.countChange.emit(this.count); }
}

Demonstrates using @Output() and EventEmitter for parent-child communication in Angular.

Let’s Try →

Angular Reactive Counter

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); }
}

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

Let’s Try →

Angular Counter with Lifecycle Hooks

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

@Component({
    selector: 'app-lifecycle-counter',
    template: `
    <div>
        <h2>Counter: {{ count }}</h2>
        <button (click)="increment()">+</button>
        <button (click)="decrement()">-</button>
    </div>
    `
})
export class LifecycleCounterComponent implements OnInit, OnDestroy {
    count = 0;
    ngOnInit() { console.log('Counter initialized'); }
    ngOnDestroy() { console.log('Counter destroyed'); }
    increment() { this.count++; }
    decrement() { this.count--; }
}

Shows use of Angular lifecycle hooks ngOnInit and ngOnDestroy in a counter component.

Let’s Try →

Angular Counter with LocalStorage

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

@Component({
    selector: 'app-localstorage-counter',
    template: `
    <div>
        <h2>Counter: {{ count }}</h2>
        <button (click)="increment()">+</button>
        <button (click)="decrement()">-</button>
        <button (click)="reset()">Reset</button>
    </div>
    `
})
export class LocalStorageCounterComponent implements OnInit {
    count = 0;
    ngOnInit() { this.count = parseInt(localStorage.getItem('count') || '0', 10); }
    increment() { this.count++; this.save(); }
    decrement() { this.count--; this.save(); }
    reset() { this.count = 0; this.save(); }
    save() { localStorage.setItem('count', this.count.toString()); }
}

Stores the counter value in localStorage to persist across page reloads in Angular.

Let’s Try →

Angular Counter with AsyncPipe

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

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

Uses RxJS and Angular AsyncPipe to display reactive counter values.

Let’s Try →

Angular Counter with Input Property

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

@Component({
    selector: 'app-input-counter',
    template: `
    <div>
        <h2>Counter: {{ count }}</h2>
        <button (click)="increment()">+</button>
        <button (click)="decrement()">-</button>
    </div>
    `
})
export class InputCounterComponent {
    @Input() count = 0;
    increment() { this.count++; }
    decrement() { this.count--; }
}

Allows parent component to set initial counter value using @Input in Angular.

Let’s Try →

Angular Counter with Output Event

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

@Component({
    selector: 'app-output-counter',
    template: `
    <div>
        <h2>Counter: {{ count }}</h2>
        <button (click)="increment()">+</button>
        <button (click)="decrement()">-</button>
    </div>
    `
})
export class OutputCounterComponent {
    count = 0;
    @Output() countChange = new EventEmitter<number>();
    increment() { this.count++; this.countChange.emit(this.count); }
    decrement() { this.count--; this.countChange.emit(this.count); }
}

Emits counter value changes to parent component using @Output and EventEmitter in Angular.

Let’s Try →

Frequently Asked Questions about Angular

What is Angular?

What are the primary use cases for Angular?

Single-page applications (SPAs). Enterprise web apps with complex UIs. Progressive Web Apps (PWAs). Dynamic dashboards and admin panels. Cross-platform web applications with Angular Universal

What are the strengths of Angular?

What are the limitations of Angular?

How can I practice Angular typing speed?

CodeSpeedTest offers 10+ real Angular code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.