Skip to main content
CodeSpeedTest
Languages
Start TypingJump into a test — pick any languageAdaptive TrainingUnlock chars as you master themPractice DrillsFocused sessions targeting weak spotsDaily ChallengesNew coding challenges every dayRace ModeCompete against others in real timeAI OpponentRace against an AI at your WPM levelTournamentsLive coding speed tournamentsArcade GamesZType, Overkill Survival, Glyphica & moreGamificationXP, coins, badges & quests
LeaderboardGlobal rankings for every languageCertificatesEarn verifiable Bronze / Silver / Gold certsActivityDaily streaks & historical analyticsProfileYour stats, badges & achievements
Browse Languages500+ languages with real code examplesBlogTips, guides & deep divesFree ToolsWPM calculator, typing speed report & moreFAQCommon questions answeredGetting StartedNew to CodeSpeedTest?AboutOur story & missionSupportGet help — Pro users get priorityContactGet in touch with the team
Pricing
  1. Home
  2. /
  3. Learn
  4. /
  5. Angular

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 ComponentAngular Counter with ServiceAngular Counter with Two-Way BindingAngular Counter with EventEmitterAngular Reactive CounterAngular Counter with Lifecycle HooksAngular Counter with LocalStorageAngular Counter with AsyncPipeAngular Counter with Input PropertyAngular Counter with Output Event

Learn ANGULAR with Real Code Examples

Updated Nov 21, 2025

Explain

Angular allows developers to build modular, scalable, and maintainable web applications.

It uses TypeScript for strong typing and modern JavaScript features.

Angular employs a component-based architecture for reusable UI and logic.

Core Features

Modules for code organization

Services for business logic

Directives for dynamic DOM manipulation

Routing for SPA navigation

Reactive forms and template-driven forms

Basic Concepts Overview

Components and templates

Modules and NgModule

Services and dependency injection

Data binding: interpolation, property, event, two-way

Directives: structural and attribute

Project Structure

src/app/ - main application code

src/assets/ - static files

src/environments/ - environment configuration

angular.json - build configuration

package.json - dependencies and scripts

Building Workflow

Generate components, services, and modules with Angular CLI

Write HTML templates with Angular directives

Manage state and events with services or RxJS

Use Angular Router for navigation

Build production bundle with `ng build --prod`

Difficulty Use Cases

Beginner: simple component-driven apps

Intermediate: SPAs with routing and forms

Advanced: Reactive apps with RxJS

Expert: Large-scale enterprise applications

Community: contributing to Angular libraries or CLI

Comparisons

More structured than React or Vue for large apps

Stronger typing with TypeScript than plain JS frameworks

Enterprise-friendly with CLI and tooling

Larger bundle size than lightweight frameworks

Supports reactive programming better than jQuery

Versioning Timeline

2010 - AngularJS (1.x) released

2016 - Angular 2+ rewritten from scratch

2017 - Angular 4 released (skipped version 3)

2020 - Angular 10 released

2025 - Angular 16+ with Ivy and modern updates

Glossary

Component: reusable UI unit

Module: encapsulates related functionality

Service: singleton logic and data provider

Directive: modifies DOM behavior

RxJS: reactive programming library used in Angular

Installation Setup

Install Node.js and npm

Install Angular CLI via `npm install -g @angular/cli`

Create new project with `ng new project-name`

Serve project locally with `ng serve`

Use IDEs like VSCode with Angular extensions

Environment Setup

Install Node.js and npm

Install Angular CLI globally

Use VSCode or WebStorm with Angular extensions

Check Angular version with `ng version`

Set up project folder with Angular CLI

Config Files

angular.json - build and CLI configuration

tsconfig.json - TypeScript compiler configuration

package.json - dependencies and scripts

src/environments/ - environment-specific configs

karma.conf.js / protractor.conf.js - testing configuration

Cli Commands

ng new project-name - create new Angular project

ng serve - run project locally

ng build --prod - production build

ng generate component my-component - generate component

ng test - run unit tests

Internationalization

Use Angular i18n for translations

Load language-specific JSON files

Translate templates and messages

Format dates and numbers for locales

Support multiple languages dynamically

Accessibility

Use ARIA attributes

Keyboard navigation support

Semantic HTML elements in templates

Accessible forms and labels

Test with screen readers and accessibility tools

Ui Styling

CSS, SCSS, or LESS styling

Angular Material or third-party UI libraries

Responsive design with FlexLayout

Component-specific styles encapsulation

Dynamic class and style binding in templates

State Management

Component state with class properties

Service-based shared state

RxJS subjects and observables

NgRx store for large-scale state

Immutable patterns for predictable behavior

Data Management

HTTP services with HttpClient

Reactive forms for user input

Observables for async streams

Local storage or session storage

NgRx or Akita for state management

Architecture

Component-based architecture

Service layer for dependency injection

RxJS for reactive state management

Angular modules (NgModule) for encapsulation

Router for SPA navigation

Rendering Model

Client-side rendering by default

Server-side rendering via Angular Universal

Change detection for reactive UI updates

Template compilation to optimized JavaScript

DOM manipulation via directives and components

Architectural Patterns

Component-based development

Modular architecture via NgModules

Service-oriented architecture with DI

Reactive programming with Observables

Lazy loading and code splitting

Real World Architectures

Enterprise SPAs

Progressive Web Apps

Dynamic dashboards and admin panels

E-commerce frontends

Cross-platform Angular apps with Angular Universal

Design Principles

Component-based architecture

Reactive programming with RxJS

Separation of concerns (modules, services)

Declarative UI templates

Type safety with TypeScript

Scalability Guide

Modular project structure with lazy-loaded modules

Use services for shared state

Optimize change detection with OnPush strategy

Tree-shake unused modules and components

Use CLI production builds and AOT compilation

Migration Guide

Update Angular CLI globally

Use Angular update guide for version migration

Refactor deprecated APIs

Test all components and modules

Ensure RxJS and third-party libraries compatibility

Performance Notes

Use OnPush change detection strategy when possible

Lazy-load modules for large apps

Minimize DOM manipulations

Use trackBy with ngFor to optimize lists

Bundle optimization with Angular CLI

Security Notes

Sanitize user input with Angular sanitization

Avoid direct DOM manipulation

Use Angular's built-in XSS and CSRF protections

Follow secure authentication and authorization practices

Keep Angular and dependencies up-to-date

Monitoring Analytics

Use logging services

Track performance with Lighthouse

Profile change detection cycles

Monitor network calls

Use analytics tools (Google Analytics, custom dashboards)

Code Quality

Use Angular Style Guide

Lint code with TSLint/ESLint

Write unit tests with Jasmine/Karma

End-to-end tests with Cypress/Protractor

Continuous integration with Angular CLI

Practical Examples

Dynamic dashboard with charts and tables

E-commerce web application

Real-time chat app using WebSockets

PWA with offline capabilities

Admin panel with forms and CRUD operations

Troubleshooting

Check Angular CLI version compatibility

Verify TypeScript errors

Ensure module imports are correct

Debug RxJS observables carefully

Check routing configuration

Testing Guide

Unit testing with Jasmine and Karma

End-to-end testing with Protractor or Cypress

Test services, components, and pipes separately

Mock HTTP requests for API testing

Use Angular TestBed for dependency injection testing

Deployment Options

Deploy static bundle to web servers

Host on cloud services (AWS S3, Firebase Hosting, Netlify)

Use Angular Universal for SSR deployment

Containerize with Docker for production

Serve via CDNs for performance

Tools Ecosystem

Angular CLI for scaffolding and builds

RxJS for reactive programming

Angular Material for UI components

NgRx for state management

Protractor or Cypress for testing

Integrations

REST and GraphQL APIs

Firebase for backend services

Angular Universal for server-side rendering

Third-party UI libraries (Material, PrimeNG, NG-Zorro)

WebSockets and real-time services

Productivity Tips

Use Angular CLI for scaffolding

Follow component modularity best practices

Leverage RxJS for reactive workflows

Use Angular Material for UI consistency

Optimize bundle sizes with lazy loading

Challenges

Build a CRUD application with Angular

Create a reactive form with validation

Integrate API calls with HttpClient

Implement lazy-loaded modules

Optimize a large Angular application for performance

Learning Path

Learn TypeScript basics

Understand Angular components and templates

Practice data binding and directives

Learn services, dependency injection, and RxJS

Build full-featured SPA and test it

Skill Improvement Plan

Week 1: Angular CLI, TypeScript, and components

Week 2: Modules, services, and routing

Week 3: Forms, pipes, and directives

Week 4: RxJS, observables, and state management

Week 5: Testing, deployment, and optimization

Interview Questions

What is Angular and why use it?

Explain component-based architecture

Difference between template-driven and reactive forms

Explain dependency injection in Angular

What are observables and how are they used?

Cheat Sheet

ng new project-name - create new project

ng serve - run app locally

ng generate component my-component - create component

[(ngModel)] - two-way data binding

*ngIf / *ngFor - structural directives

Books

ng-book: The Complete Book on Angular

Angular Up & Running

Pro Angular

Learning Angular

Angular Projects

Tutorials

Tour of Heroes (official tutorial)

Angular Getting Started Guide

Angular University courses

FreeCodeCamp Angular tutorials

Pluralsight Angular courses

Official Docs

https://angular.io/docs

https://angular.io/guide/architecture

https://angular.io/cli

Community Links

Stack Overflow Angular tag

Reddit r/Angular

Angular GitHub repository

Angular Discord community

Gitter Angular channels

Community Support

Angular official website and documentation

Stack Overflow Angular tag

Reddit r/Angular

Angular GitHub repositories

Angular Discord and Gitter communities

Monetization

Enterprise SaaS web applications

Progressive web apps

Admin dashboards for clients

E-commerce frontends

Educational courses in Angular

Future Roadmap

Ivy renderer improvements

Standalone components adoption

Faster build times and smaller bundles

Better TypeScript integration

Expanded ecosystem and tooling

When Not To Use

Simple static websites or blogs

Small projects where Vue or React is sufficient

Projects where learning TypeScript adds overhead

Apps requiring very lightweight bundles

Rapid prototyping for small features

Final Summary

Angular is a structured framework for building scalable SPAs.

Uses TypeScript, components, and reactive programming.

Supports enterprise-level development with strong tooling.

Optimized for maintainable, modular, and testable apps.

Well-suited for complex UI and cross-platform web applications.

Faq

Is Angular a framework or library?

Angular is a full-fledged framework.

Can Angular work with TypeScript?

Yes, TypeScript is the primary language for Angular.

Does Angular support SPAs?

Yes, Angular is optimized for single-page applications.

What is Angular CLI?

Command-line tool to create and manage Angular projects.

Is Angular good for enterprise apps?

Yes, it's widely used in enterprise-grade web applications.

Code Sample Descriptions

1

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 →
2

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 →
3

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 →
4

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 →
5

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 →
6

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 →
7

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 →
8

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 →
9

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 →
10

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?

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.

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

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypherGremlinPartiqlHaskellElixirFsharpView all languages →
CodeSpeedTest

Improve your coding speed, code accuracy, and programming syntax WPM with practice sessions across 500+ programming languages.

Quick Links

HomeAboutFeaturesGetting StartedLanguages

Legal & Support

Pro ⚡ PricingContactPrivacy PolicyTerms of Service

Connect

CodeSpeedTest on GitHubCodeSpeedTest on TwitterEmail CodeSpeedTest

© 2026 CodeSpeedTest. All rights reserved.