AngularJS
& Angular

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable, BehaviorSubject, throwError } from 'rxjs';
import { catchError, map, tap, retry } from 'rxjs/operators';
import { User } from './user.model';

@Injectable({
  providedIn: 'root' // Singleton at root level
})
export class UserService {
  private readonly API = 'https://api.example.com/users';
  private currentUser$ = new BehaviorSubject<User | null>(null);

  /** Public observable for current user */
  currentUser = this.currentUser$.asObservable();

  constructor(private http: HttpClient) {}

  getUsers(page = 1, limit = 10): Observable<User[]> {
    const params = new HttpParams()
      .set('page', page)
      .set('limit', limit);

    return this.http.get<{ data: User[] }>(this.API, { params }).pipe(
      map(res => res.data),
      retry(2),
      catchError(err => throwError(() => err))
    );
  }

  getUserById(id: string): Observable<User> {
    return this.http.get<User>(`${this.API}/${id}`).pipe(
      tap(user => this.currentUser$.next(user))
    );
  }

  updateUser(id: string, data: Partial<User>): Observable<User> {
    return this.http.patch<User>(`${this.API}/${id}`, data);
  }

  logout(): void {
    this.currentUser$.next(null);
  }
}

import { Routes } from '@angular/router';
import { authGuard } from './guards/auth.guard';
import { userResolver } from './resolvers/user.resolver';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadComponent: () =>
      import('./home/home.component')
        .then(m => m.HomeComponent)
  },
  {
    path: 'users',
    canActivate: [authGuard],        // Route guard
    loadChildren: () =>
      import('./users/users.routes')  // Lazy module
        .then(m => m.USER_ROUTES)
  },
  {
    path: 'profile/:id',
    loadComponent: () =>
      import('./profile/profile.component')
        .then(m => m.ProfileComponent),
    resolve: {
      user: userResolver              // Pre-fetch data
    }
  },
  {
    path: '**',
    loadComponent: () =>
      import('./not-found/not-found.component')
        .then(m => m.NotFoundComponent)
  }
];

// Functional guard (Angular 15+)
export const authGuard = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isLoggedIn() || router.parseUrl('/login');
};

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-registration',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="email" placeholder="Email" />
      <div *ngIf="email?.invalid && email?.touched">
        <span *ngIf="email?.errors?.['required']">Email is required</span>
        <span *ngIf="email?.errors?.['email']">Invalid email</span>
      </div>

      <div formGroupName="passwords">
        <input formControlName="password" type="password" />
        <input formControlName="confirm" type="password" />
        <span *ngIf="passwords?.errors?.['mismatch']">Passwords must match</span>
      </div>

      <button type="submit" [disabled]="form.invalid">Register</button>
    </form>
  `
})
export class RegistrationComponent implements OnInit {
  form!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      passwords: this.fb.group({
        password: ['', [Validators.required, Validators.minLength(8)]],
        confirm:  ['', Validators.required]
      }, { validators: this.matchPasswords })
    });
  }

  matchPasswords(group: AbstractControl) {
    const pw  = group.get('password')?.value;
    const cf  = group.get('confirm')?.value;
    return pw === cf ? null : { mismatch: true };
  }

  get email() { return this.form.get('email'); }
  get passwords() { return this.form.get('passwords'); }

  onSubmit() {
    if (this.form.valid) console.log(this.form.value);
  }
}

import { Component, signal, computed, effect } from '@angular/core';
import { toSignal, toObservable } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <div>
      <h2>Count: {{ count() }}</h2>
      <h3>Doubled: {{ doubled() }}</h3>
      <p>Status: {{ status() }}</p>

      <button (click)="increment()">+</button>
      <button (click)="decrement()">−</button>
      <button (click)="reset()">Reset</button>
    </div>
  `
})
export class CounterComponent {
  // Writable signal
  count = signal(0);

  // Computed (derived) signal — updates automatically
  doubled = computed(() => this.count() * 2);

  status = computed(() => {
    const n = this.count();
    if (n > 10) return 'High';
    if (n < 0)  return 'Negative';
    return 'Normal';
  });

  // Effect — runs when signal values change
  logEffect = effect(() => {
    console.log(`Count changed to: ${this.count()}`);
  });

  increment() { this.count.update(n => n + 1); }
  decrement() { this.count.update(n => n - 1); }
  reset()     { this.count.set(0); }
}

// RxJS interop — convert signal ↔ observable
const obs$  = toObservable(count);   // Signal → Observable
const sig   = toSignal(someObs$);   // Observable → Signal

import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  @Input('appHighlight') highlightColor = 'yellow';
  @Input() defaultColor = 'transparent';

  constructor(
    private el: ElementRef,
    private renderer: Renderer2
  ) {}

  @HostListener('mouseenter')
  onMouseEnter() {
    this.highlight(this.highlightColor);
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.highlight(this.defaultColor);
  }

  private highlight(color: string) {
    this.renderer.setStyle(
      this.el.nativeElement,
      'background-color',
      color
    );
  }
}

// Usage in template:
// <p appHighlight="cyan" defaultColor="lightgray">Hover me</p>
// <p [appHighlight]="dynamicColor">Dynamic color</p>

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate',
  standalone: true,
  pure: true  // Default: only re-runs when input changes
})
export class TruncatePipe implements PipeTransform {
  transform(
    value: string,
    limit = 100,
    trail = '...'
  ): string {
    if (!value) return '';
    if (value.length <= limit) return value;
    return value.substring(0, limit) + trail;
  }
}

// Built-in pipe examples:
// {{ today | date:'longDate' }}
// {{ price | currency:'USD':'symbol':'1.2-2' }}
// {{ text | truncate:50:'…' }}
// {{ userObs$ | async }}   ← async pipe auto-subscribes
// {{ items | slice:0:5 }}
// {{ num | number:'1.0-2' }}
// {{ value | uppercase }}
// {{ obj | json }}
// {{ text | i18nSelect: mapping }}