Angular

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-user-profile',      // Custom HTML tag to render this component
  standalone: true,                  // Marks it as a modern standalone component
  imports: [CommonModule, FormsModule], // Imports required modules directly
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent {
  username = 'Kamran';
}

+------------------------------------------+
|          TypeScript Class (TS)           |
+------------------------------------------+
    |                     ^            ^
    | (Interpolation /    | (Event     | (Two-way
    |  Property Binding)  |  Binding)  |  Binding)
    v                     |            v
+------------------------------------------+
|           HTML Template (View)           |
+------------------------------------------+

<!-- 1. Interpolation: Renders text dynamically -->
<h1>Welcome back, {{ username }}!</h1>

<!-- 2. Property Binding: Disables input if isLocked is true in TS -->
<input [disabled]="isLocked" placeholder="Enter password">

<!-- 3. Event Binding: Fires login() method on click -->
<button (click)="login()">Submit</button>

<!-- 4. Two-Way Data Binding: Keeps email variable in sync with input -->
<input [(ngModel)]="email" placeholder="Enter email">
<p>You typed: {{ email }}</p>

<!-- 1. Conditional flow -->
@if (role === 'admin') {
  <p>Welcome, Administrator!</p>
} @else if (role === 'editor') {
  <p>Welcome, Editor!</p>
} @else {
  <p>Welcome, Guest!</p>
}

<!-- 2. Loops with track statement (MANDATORY in v17+) -->
<ul>
  @for (user of users; track user.id) {
    <li>{{ user.name }} - Index: {{ $index }}</li>
  } @empty {
    <li>No users found.</li>
  }
</ul>

<!-- ngClass: Applies 'active' class if isActive is true, 'disabled' if isDisabled is true -->
<div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }">
  Status Box
</div>

<!-- ngStyle: Applies dynamic color and font size -->
<p [ngStyle]="{ 'color': isError ? 'red' : 'green', 'font-size.px': size }">
  Operation Message
</p>

export class UserComponent implements OnInit {
  @Input() userId!: string;

  constructor(private http: HttpClient) {
    // WRONG: this.userId is undefined here!
  }

  ngOnInit() {
    // RIGHT: inputs are ready. Fetch data.
    this.http.get(`/api/users/${this.userId}`).subscribe(data => {
      console.log(data);
    });
  }
}

// data.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Singleton: tells Angular to create a single instance app-wide
})
export class DataService {
  getData() {
    return ['Item 1', 'Item 2', 'Item 3'];
  }
}

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-item-list',
  standalone: true
})
export class ItemListComponent implements OnInit {
  items: string[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.items = this.dataService.getData();
  }
}

import { Component, OnInit, inject } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-item-list',
  standalone: true
})
export class ItemListComponent implements OnInit {
  // Cleaner, no constructor needed!
  private dataService = inject(DataService);
  items: string[] = [];

  ngOnInit() {
    this.items = this.dataService.getData();
  }
}

<!-- 1. Formatting text to uppercase -->
<p>Name: {{ username | uppercase }}</p>

<!-- 2. Formatting currency (Output: ₹1,500.00) -->
<p>Price: {{ amount | currency:'INR' }}</p>

<!-- 3. Formatting date -->
<p>Today is: {{ today | date:'dd-MM-yyyy' }}</p>

<!-- 4. Chaining pipes: Uppercase first, then slice characters index 0 to 5 -->
<p>{{ title | uppercase | slice:0:5 }}</p>

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

@Pipe({
  name: 'exponent',
  standalone: true,
  pure: true // Runs only when base or exponent changes
})
export class ExponentPipe implements PipeTransform {
  transform(base: number, exponent: number = 1): number {
    return Math.pow(base, exponent);
  }
}

<!-- status$ is an Observable inside UserComponent -->
<p>Current Status: {{ status$ | async }}</p>

Promise:    [------------(Single Value)------------>] (Complete)
Observable: [-----(Value 1)-----(Value 2)-----(Value 3)----->] (Continuous stream)

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, filter, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

export class UserListComponent {
  private http = inject(HttpClient);

  fetchActiveUsers() {
    this.http.get<any[]>('/api/users').pipe(
      // 1. Filter out inactive users
      map(users => users.filter(u => u.isActive)),
      // 2. Catch errors and return an empty array fallback
      catchError(err => {
        console.error('Error fetching users:', err);
        return of([]); 
      })
    ).subscribe(activeUsers => {
      console.log('Active Users:', activeUsers);
    });
  }
}

import { BehaviorSubject } from 'rxjs';

const state$ = new BehaviorSubject<string>('Initial State');

state$.subscribe(val => console.log('Sub A:', val)); // Output: Sub A: Initial State
state$.next('Updated State');                        // Output: Sub A: Updated State

state$.subscribe(val => console.log('Sub B:', val)); // Output: Sub B: Updated State (receives current state immediately)

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

@Component({
  selector: 'app-login-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <div>
        <label>Email:</label>
        <input formControlName="email">
        @if (loginForm.get('email')?.invalid && loginForm.get('email')?.touched) {
          <small style="color: red;">Valid email is required</small>
        }
      </div>
      <button [disabled]="loginForm.invalid">Submit</button>
    </form>
  `
})
export class LoginFormComponent {
  private fb = inject(FormBuilder);

  loginForm = this.fb.group({
    email: ['', [Validators.required, Validators.email]]
  });

  onSubmit() {
    if (this.loginForm.valid) {
      console.log('Form Submitted!', this.loginForm.value);
    }
  }
}

// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AdminComponent } from './admin.component';
import { adminGuard } from './admin.guard';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  
  // Lazy Loading a Standalone Component (v14+)
  { 
    path: 'dashboard', 
    loadComponent: () => import('./dashboard.component').then(m => m.DashboardComponent) 
  },
  
  // Guarded route
  { 
    path: 'admin', 
    component: AdminComponent, 
    canActivate: [adminGuard] 
  }
];

<!-- RouterOutlet renders the active route component -->
<nav>
  <a routerLink="/">Home</a> | 
  <a routerLink="/dashboard">Dashboard</a> |
  <a routerLink="/admin">Admin Portal</a>
</nav>

<hr>
<router-outlet></router-outlet>

// admin.guard.ts
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './auth.service';

export const adminGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isAdmin()) {
    return true; // Navigation allowed
  }

  // Redirect to login/home
  return router.parseUrl('/login');
};

import { Component, signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <p>Count: {{ count() }}</p>
    <p>Double: {{ doubleCount() }}</p>
    <button (click)="increment()">Increment</button>
  `
})
export class CounterComponent {
  // 1. Define a writable signal
  count = signal<number>(0);

  // 2. Define a computed (derived) signal
  doubleCount = computed(() => this.count() * 2);

  constructor() {
    // 3. Define an effect (monitors signal changes)
    effect(() => {
      console.log(`Current count is: ${this.count()}`);
    });
  }

  increment() {
    // Updating the signal value
    this.count.update(val => val + 1);
  }
}