SaiBalaji IT Tech Solutions

1️⃣ Constructor When called: First, before Angular sets inputs or renders. Use: Only for dependency injection, not for initialization. constructor(private api: ApiService) { console.log('Constructor called'); } ⚠️ Don’t call API here — @Input() is not ready yet. 2️⃣ ngOnChanges Interface: OnChanges When called: Whenever @Input() changes, even before ngOnInit. Use: React to parent component data changes. @Input() userId: number; ngOnChanges(changes: SimpleChanges) { if (changes['userId'] && !changes['userId'].firstChange) { this.loadUserDetails(changes['userId'].currentValue); } } loadUserDetails(id: number) { this.api.get<User>(`/users/${id}`) .subscribe(u => this.user = u); } 3️⃣ ngOnInit Interface: OnInit When called: After first ngOnChanges. Use: Initialize data, forms, API calls. ngOnInit(): void { this.loadUsers(); this.initForm(); } loadUsers() { t...

Angular components and directives go through lifecycle phases: Creation → Angular sets up the component. Rendering → Angular renders templates & bindings. Update → Angular detects changes. Destruction → Angular cleans up component. Lifecycle hooks are special interface methods you can implement to run code at these stages. 2️⃣ Main Lifecycle Hooks in Angular Hook Interface Called When Example Use Case ngOnChanges OnChanges Input-bound properties change React to @Input() updates ngOnInit OnInit Component initialized (after first ngOnChanges) Fetch initial data from API ngDoCheck DoCheck Every change detection cycle Custom change detection logic ngAfterContentInit AfterContentInit Projected content initialized (<ng-content>) Access content children after proje...

Introduction ASP.NET Core Web API is the backbone of modern .NET applications. It is used to build RESTful services that power: Web applications Mobile apps Angular / React frontends Microservices Cloud-native systems Many developers can create a Web API, but struggle with: Project structure Dependency injection Validation Exception handling Real-world best practices This tutorial explains ASP.NET Core Web API from scratch, with clean architecture, real CRUD examples, and production-ready patterns. What Is ASP.NET Core Web API? ASP.NET Core Web API is a framework for building HTTP-based APIs using C# and .NET. It supports: REST principles JSON by default Dependency Injection Middleware pipeline High performance & cross-platform execution Why Web API? ✔ Decouples frontend and backend ✔ Works with any client (Web / Mobile) ✔ Scales well in cloud environments REST Basics (Very Important) A REST API uses HTTP verbs to perform actions: ...

RBAC + Refresh Token + Permission Authorization (ULTIMATE) You will get: ✅ JWT Access Token ✅ Refresh Token stored in DB ✅ Refresh Token Rotation (VERY important) ✅ Revoke tokens on logout ✅ Roles + Permissions in DB ✅ [Authorize(Policy="PERMISSION")] ✅ Custom AuthorizationHandler ✅ Clean architecture style (simple but enterprise) 🏗️ 1) Database Tables (Enterprise) Tables you must have: Users Roles Permissions UserRoles RolePermissions RefreshTokens ✅ 2) Entities (EF Core) 📌 User.cs public class User { public int Id { get; set; } public string FullName { get; set; } = ""; public string Email { get; set; } = ""; public string PasswordHash { get; set; } = ""; public ICollection<UserRole> UserRoles { get; set; } = new List<UserRole>(); public ICollection<RefreshToken> RefreshTokens { get; set; } = new List<RefreshToken>(); } 📌 Role.cs pub...

Full Angular RBAC + Permission System (ULTIMATE) You will get: ✅ Backend-driven Roles + Permissions ✅ Angular stores user access ✅ Dynamic menus (Task C) ✅ Route guard (Task D) ✅ API protection (Task E) ✅ Admin can assign permissions (concept) ✅ Supports Permission Groups, Feature Flags, Multi-role users ✅ Clean enterprise architecture 🧠 Enterprise Concept (Real World) After login, backend returns: { "userId": 101, "name": "Sai", "roles": ["Admin"], "permissions": [ "DASHBOARD_VIEW", "USERS_VIEW", "USERS_CREATE", "REPORTS_VIEW", "SETTINGS_VIEW" ] } Angular uses this for: Menu show/hide Route guard API guard UI button enable/disable 1️⃣ Auth State Model (Enterprise) // auth-state.model.ts import { Permission, Role } from './permission.model'; export interface AuthUser { userId: number; ...

API Protection + Permission Headers + Global Error Handling + Auto Logout in Angular You will get: ✅ Attach Access Token automatically ✅ Add optional Permission header (enterprise style) ✅ Global API error handling ✅ Auto logout when refresh fails ✅ Centralized ApiService pattern ✅ Works perfectly with Task B Refresh Token system 1️⃣ Add Permission Metadata to API Calls (Enterprise Pattern) // api-permissions.ts export const ApiPermissions = { UsersGetAll: 'USERS_VIEW', UsersCreate: 'USERS_CREATE', ReportsView: 'REPORTS_VIEW' } as const; export type ApiPermissionValue = typeof ApiPermissions[keyof typeof ApiPermissions]; 2️⃣ Create Enterprise ApiService (Centralized) Instead of calling HttpClient everywhere. // api.service.ts import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs'; import { ApiPermissionValue } from ...

Route Guards Based on Permission in Angular (Enterprise) This setup includes: ✔ Prevent user from opening URL directly ✔ Redirect to 403 Forbidden page ✔ Supports roles + permissions ✔ Works with lazy loaded modules 1️⃣ Create Forbidden Component (403 Page) // forbidden.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-forbidden', template: ` 403 - Forbidden You don’t have permission to access this page. ` }) export class ForbiddenComponent {} 2️⃣ Add Route Data (Permission Required) // app-routing.module.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { ForbiddenComponent } from './forbidden.component'; import { PermissionGuard } from './core/auth/permission.guard'; const routes: Routes = [ { path: 'dashboard', canActivate: [PermissionGuard], data: { permissions: [...