// services/product.service.ts
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { map, catchError } from "rxjs/operators";

@Injectable({
    providedIn: "root" // Singleton — one instance for entire app
})
export class ProductService {
    private apiUrl = "https://api.example.com/products";

    constructor(private http: HttpClient) {}

    getProducts(): Observable<Product[]> {
        return this.http.get<Product[]>(this.apiUrl);
    }

    getProductById(id: number): Observable<Product> {
        return this.http.get<Product>(`${this.apiUrl}/${id}`);
    }

    createProduct(product: Partial<Product>): Observable<Product> {
        return this.http.post<Product>(this.apiUrl, product);
    }

    updateProduct(id: number, updates: Partial<Product>): Observable<Product> {
        return this.http.put<Product>(`${this.apiUrl}/${id}`, updates);
    }

    deleteProduct(id: number): Observable<void> {
        return this.http.delete<void>(`${this.apiUrl}/${id}`);
    }
}

// products.component.ts
import { Component, OnInit } from "@angular/core";
import { ProductService } from "../services/product.service";
import { Product } from "../models/product.model";

@Component({
    selector: "app-products",
    template: `
        @if (isLoading) {
            <p>Loading products...</p>
        }
        @if (error) {
            <p class="error">{{ error }}</p>
        }
        @for (product of products; track product.id) {
            <app-product-card [product]="product" />
        }
    `
})
export class ProductsComponent implements OnInit {
    products: Product[] = [];
    isLoading = false;
    error = "";

    // Angular injects ProductService automatically
    constructor(private productService: ProductService) {}

    ngOnInit(): void {
        this.loadProducts();
    }

    loadProducts(): void {
        this.isLoading = true;
        this.productService.getProducts().subscribe({
            next: (data) => {
                this.products = data;
                this.isLoading = false;
            },
            error: (err) => {
                this.error = "Failed to load products";
                this.isLoading = false;
            }
        });
    }
}

// app.routes.ts
import { Routes } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import { ProductsComponent } from "./products/products.component";
import { ProductDetailComponent } from "./product-detail/product-detail.component";
import { AuthGuard } from "./guards/auth.guard";

export const routes: Routes = [
    { path: "", component: HomeComponent },
    { path: "products", component: ProductsComponent },
    {
        path: "products/:id",
        component: ProductDetailComponent
    },
    {
        path: "dashboard",
        loadComponent: () =>
            import("./dashboard/dashboard.component").then(m => m.DashboardComponent),
        canActivate: [AuthGuard]  // Route guard — only logged in users
    },
    { path: "**", redirectTo: "" }   // 404 redirect
];

<nav>
    <a routerLink="/">Home</a>
    <a routerLink="/products">Products</a>
    <a routerLink="/dashboard">Dashboard</a>
</nav>

<!-- Where routed components render -->
<router-outlet></router-outlet>

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";

@Component({ ... })
export class ProductDetailComponent implements OnInit {
    productId!: number;

    constructor(private route: ActivatedRoute) {}

    ngOnInit(): void {
        this.productId = Number(this.route.snapshot.paramMap.get("id"));
        // Or subscribe for changes:
        this.route.params.subscribe(params => {
            this.productId = Number(params["id"]);
        });
    }
}

// guards/auth.guard.ts
import { inject } from "@angular/core";
import { Router } from "@angular/router";
import { AuthService } from "../services/auth.service";

export const AuthGuard = () => {
    const authService = inject(AuthService);
    const router = inject(Router);

    if (authService.isLoggedIn()) {
        return true;
    }
    return router.parseUrl("/login");
};

import { Observable, of, from, interval } from "rxjs";
import { map, filter, debounceTime, switchMap } from "rxjs/operators";

// Basic observable
const numbers$ = of(1, 2, 3, 4, 5);
numbers$.subscribe(n => console.log(n)); // 1, 2, 3, 4, 5

// Transform with operators
const doubled$ = numbers$.pipe(
    filter(n => n % 2 === 0),  // Only even numbers: 2, 4
    map(n => n * 2)             // Double them: 4, 8
);

doubled$.subscribe(n => console.log(n)); // 4, 8

import { Component, OnInit } from "@angular/core";
import { FormControl, ReactiveFormsModule } from "@angular/forms";
import { ProductService } from "../services/product.service";
import { debounceTime, distinctUntilChanged, switchMap } from "rxjs/operators";

@Component({
    selector: "app-search",
    imports: [ReactiveFormsModule, AsyncPipe],
    template: `
        <input [formControl]="searchControl" placeholder="Search products..." />
        <div *ngFor="let product of results$ | async">
            {{ product.name }}
        </div>
    `
})
export class SearchComponent implements OnInit {
    searchControl = new FormControl("");
    results$ = this.searchControl.valueChanges.pipe(
        debounceTime(300),           // Wait 300ms after user stops typing
        distinctUntilChanged(),       // Ignore if same as previous value
        switchMap(query =>
            this.productService.searchProducts(query ?? "")
        )
    );

    constructor(private productService: ProductService) {}
}

<!-- Without async pipe (manual subscription — prone to memory leaks) -->
<p>{{ currentUser.name }}</p>

<!-- With async pipe (automatic subscription management) -->
<p>{{ currentUser$ | async | json }}</p>
<p *ngIf="user$ | async as user">{{ user.name }}</p>

// Easy setup — good for simple forms
import { FormsModule } from "@angular/forms";

@Component({
    imports: [FormsModule],
    template: `
        <form (ngSubmit)="onSubmit()" #myForm="ngForm">
            <input
                name="email"
                [(ngModel)]="formData.email"
                required
                email
                #emailField="ngModel"
            />
            <div *ngIf="emailField.invalid && emailField.touched">
                Please enter a valid email
            </div>

            <input
                name="password"
                type="password"
                [(ngModel)]="formData.password"
                required
                minlength="8"
            />

            <button type="submit" [disabled]="myForm.invalid">
                Sign Up
            </button>
        </form>
    `
})
export class SignupComponent {
    formData = { email: "", password: "" };

    onSubmit(): void {
        console.log("Form submitted:", this.formData);
    }
}

// More control — better for complex, dynamic forms
import { FormBuilder, Validators, ReactiveFormsModule } from "@angular/forms";

@Component({
    imports: [ReactiveFormsModule],
    template: `
        <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
            <input formControlName="email" placeholder="Email" />
            @if (signupForm.get("email")?.hasError("required") &&
                 signupForm.get("email")?.touched) {
                <p>Email is required</p>
            }

            <input formControlName="password" type="password" />
            @if (signupForm.get("password")?.hasError("minlength")) {
                <p>Password must be at least 8 characters</p>
            }

            <button type="submit" [disabled]="signupForm.invalid">
                Sign Up
            </button>
        </form>
    `
})
export class SignupComponent {
    signupForm = this.fb.group({
        email: ["", [Validators.required, Validators.email]],
        password: ["", [Validators.required, Validators.minLength(8)]],
        confirmPassword: ["", Validators.required]
    });

    constructor(private fb: FormBuilder) {}

    onSubmit(): void {
        if (this.signupForm.valid) {
            console.log(this.signupForm.value);
        }
    }
}

# Install Angular CLI globally
npm install -g @angular/cli

# Create a new Angular project
ng new my-angular-app
# Asks: routing? Yes | stylesheet format? CSS/SCSS/LESS

# Navigate to project
cd my-angular-app

# Start development server
ng serve
# App running at http://localhost:4200

# Generate components, services, and more
ng generate component products/product-card
ng generate service services/product
ng generate guard guards/auth
ng generate pipe pipes/currency-inr
ng generate interface models/product

# Shortcuts
ng g c products/product-card
ng g s services/product

# Build for production
ng build --configuration production

# Run tests
ng test        # Unit tests with Karma
ng e2e         # End-to-end tests

# Check for Angular updates
ng update
ng update @angular/core @angular/cli

ng add @angular/material

// Add Material components
import { MatButtonModule } from "@angular/material/button";
import { MatTableModule } from "@angular/material/table";
import { MatPaginatorModule } from "@angular/material/paginator";

// Now use Material components in templates
// <mat-button>, <mat-table>, <mat-paginator>, etc.