Learn ANGULAR with Real Code Examples

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.