Why lifecycle hooks matter in Angular - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a component uses the ngOnInit lifecycle hook?

Consider an Angular component that implements the ngOnInit lifecycle hook. What is the main purpose of this hook?

Angular

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{message}}</p>`
})
export class SampleComponent implements OnInit {
  message = '';

  ngOnInit() {
    this.message = 'Component initialized';
  }
}

A It runs just before the component is destroyed to clean up resources.

B It runs every time the component's input properties change.

C It runs after the component's view and child views have been checked.

D It runs once after the component's data-bound properties are initialized, perfect for setup tasks.

💡 Hint

Think about when you want to prepare data or start processes after the component is ready.

The ngOnInit hook runs once after Angular sets up the component's input properties. It's the right place to perform initialization like fetching data or setting initial values.

❓ lifecycle

intermediate

Which lifecycle hook is best for cleaning up subscriptions?

In Angular, when should you clean up subscriptions or detach event handlers to avoid memory leaks?

A ngOnDestroy

B ngAfterViewInit

C ngOnChanges

D ngDoCheck

💡 Hint

Think about when the component is about to be removed from the page.

The ngOnDestroy hook is called just before Angular destroys the component. It's the right place to clean up subscriptions and resources to prevent memory leaks.

📝 Syntax

advanced

What error occurs if you forget to implement OnInit but define ngOnInit?

Given this Angular component code, what happens if the class defines ngOnInit() but does not implement the OnInit interface?

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-test',
  template: `<p>Test</p>`
})
export class TestComponent {
  ngOnInit() {
    console.log('Init');
  }
}

A Compile-time error because ngOnInit must be declared only if OnInit is implemented.

B No error; ngOnInit runs normally because implementing OnInit interface is optional.

C Runtime error because Angular cannot find the lifecycle hook without the interface.

D The component will not render because lifecycle hooks are ignored without the interface.

💡 Hint

Interfaces in TypeScript are for type checking, not runtime behavior.

Implementing the OnInit interface is optional. Angular calls ngOnInit if it exists on the component class regardless of interface implementation.

🔧 Debug

advanced

Why does ngAfterViewInit run after ngOnInit?

Look at this Angular component lifecycle sequence. Why does ngAfterViewInit run after ngOnInit?

Angular

import { Component, AfterViewInit, OnInit } from '@angular/core';

@Component({
  selector: 'app-demo',
  template: `<child-comp></child-comp>`
})
export class DemoComponent implements OnInit, AfterViewInit {
  ngOnInit() {
    console.log('OnInit');
  }
  ngAfterViewInit() {
    console.log('AfterViewInit');
  }
}

A ngAfterViewInit runs first but logs appear later due to asynchronous behavior.

B ngOnInit and ngAfterViewInit run simultaneously but logs are buffered.

C ngAfterViewInit waits until the component's view and child views are fully initialized, which happens after ngOnInit.

D ngAfterViewInit runs only if ngOnInit throws an error.

💡 Hint

Think about when the component's template and child components are ready.

The ngAfterViewInit hook runs after Angular fully initializes the component's view and its child views. This always happens after ngOnInit, which runs earlier during initialization.

🧠 Conceptual

expert

Why are lifecycle hooks critical for resource management in Angular?

Why do Angular lifecycle hooks like ngOnInit and ngOnDestroy matter for managing resources and app performance?

A They allow developers to initialize data and clean up resources at precise moments, preventing memory leaks and ensuring smooth user experience.

B They automatically optimize Angular's change detection without developer intervention.

C They enable Angular to skip rendering components that are not visible on the screen.

D They replace the need for services by handling all data fetching and storage inside components.

💡 Hint

Think about when you start and stop things in real life to keep things tidy and efficient.

Lifecycle hooks let developers run code at key moments: ngOnInit to set up data or start processes, and ngOnDestroy to clean up subscriptions or timers. This careful management avoids memory leaks and keeps the app fast and stable.

Practice

1. Why are lifecycle hooks important in Angular components?

easy

A. They make components load faster by default.

B. They automatically style your components.

C. They replace the need for services.

D. They let you run code at specific times during a component's life.

Solution

1. Step 1: Understand what lifecycle hooks do

   Lifecycle hooks allow you to run code at key moments like creation, update, or destruction of a component.

2. Step 2: Identify the main benefit

   This helps manage resources and keep the app efficient by running code only when needed.

3. Final Answer:

   They let you run code at specific times during a component's life. -> Option D

4. Quick Check:

   Lifecycle hooks = run code at key moments [OK]

Hint: Lifecycle hooks run code at key moments [OK]

Common Mistakes:

• Thinking lifecycle hooks style components
• Believing hooks replace services
• Assuming hooks speed up loading automatically

2. Which of the following is the correct syntax to implement the ngOnInit lifecycle hook in an Angular component?

easy

A. ngOnInit() { console.log('Init'); }

B. onInit() { console.log('Init'); }

C. nginit() { console.log('Init'); }

D. init() { console.log('Init'); }

Solution

1. Step 1: Recall the exact lifecycle hook name

   The correct lifecycle hook method name is ngOnInit with exact casing.

2. Step 2: Match the syntax

   The method should be declared as ngOnInit() { ... } inside the component class.

3. Final Answer:

   ngOnInit() { console.log('Init'); } -> Option A

4. Quick Check:

   Correct hook name and syntax = ngOnInit() { console.log('Init'); } [OK]

Hint: Lifecycle hooks start with 'ng' and use camelCase [OK]

Common Mistakes:

• Using wrong method names like onInit or init
• Incorrect casing like nginit
• Missing 'ng' prefix in method name

3. Given this Angular component code snippet, what will be logged to the console when the component is created?

export class MyComponent implements OnInit {
  constructor() { console.log('Constructor called'); }
  ngOnInit() { console.log('ngOnInit called'); }
}

medium

A. Constructor called\nngOnInit called

B. ngOnInit called\nConstructor called

C. Only Constructor called

D. Only ngOnInit called

Solution

1. Step 1: Understand Angular component creation order

   The constructor runs first when the component is created, then ngOnInit runs after Angular sets input properties.

2. Step 2: Trace the console logs

   First, 'Constructor called' logs, then 'ngOnInit called' logs.

3. Final Answer:

   Constructor called\nngOnInit called -> Option A

4. Quick Check:

   Constructor runs before ngOnInit [OK]

Hint: Constructor runs before ngOnInit [OK]

Common Mistakes:

• Thinking ngOnInit runs before constructor
• Expecting only one log message
• Confusing lifecycle order

4. What is wrong with this Angular component code snippet?

export class SampleComponent implements OnInit {
  ngOnInit() {
    this.loadData();
  }
  loadData() {
    console.log('Data loaded');
  }
  ngOnDestroy() {
    this.loadData();
  }
}

medium

A. ngOnInit should not be implemented without a constructor.

B. ngOnDestroy must return a value.

C. Calling loadData() inside ngOnDestroy is incorrect because it runs when component is destroyed.

D. loadData() cannot be called inside lifecycle hooks.

Solution

1. Step 1: Understand purpose of ngOnDestroy

   ngOnDestroy runs when the component is about to be removed. It is used to clean up resources, not to load data.

2. Step 2: Identify misuse of loadData()

   Calling loadData() during destruction is illogical because loading data is for initialization, not cleanup.

3. Final Answer:

   Calling loadData() inside ngOnDestroy is incorrect because it runs when component is destroyed. -> Option C

4. Quick Check:

   ngOnDestroy is for cleanup, not loading data [OK]

Hint: Use ngOnDestroy only for cleanup tasks [OK]

Common Mistakes:

• Thinking ngOnDestroy needs a return value
• Believing lifecycle hooks can't call methods
• Assuming constructor is required with ngOnInit

5. You want to fetch user data only once when a component loads and clean up a subscription when the component is destroyed. Which lifecycle hooks should you use together?

hard

A. ngOnChanges to fetch data, ngDoCheck to clean up subscription

B. ngOnInit to fetch data, ngOnDestroy to clean up subscription

C. constructor to fetch data, ngAfterViewInit to clean up subscription

D. ngAfterContentInit to fetch data, ngAfterContentChecked to clean up subscription

Solution

1. Step 1: Identify hook for initial data fetch

   Use ngOnInit to run code once after component creation, perfect for fetching data.

2. Step 2: Identify hook for cleanup

   Use ngOnDestroy to clean up resources like subscriptions before component is removed.

3. Final Answer:

   ngOnInit to fetch data, ngOnDestroy to clean up subscription -> Option B

4. Quick Check:

   Init = fetch, Destroy = cleanup [OK]

Hint: Fetch in ngOnInit, clean in ngOnDestroy [OK]

Common Mistakes:

• Using constructor for async data fetch
• Confusing ngAfterViewInit with cleanup
• Using ngOnChanges for one-time fetch