Angular Lifecycle Hooks Cheat Sheet (Enterprise Version)
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...