ngOnInit for initialization in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to implement the Angular lifecycle hook for initialization.

Angular

export class AppComponent implements OnInit {
  constructor() {
    // Initialization code here
  }

  [1]() {
    console.log('Component initialized');
  }
}

Drag options to blanks, or click blank then click option'

AngAfterViewInit

BngOnChanges

CngOnDestroy

DngOnInit

Attempts:

3 left

💡 Hint

Common Mistakes

Using ngAfterViewInit instead of ngOnInit

Not implementing the OnInit interface

Putting initialization code in the constructor instead

The ngOnInit method is the Angular lifecycle hook called once after the component is initialized. It is used to run initialization logic.

2fill in blank

medium

Complete the code to import the correct Angular interface for initialization.

Angular

import { Component, [1] } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Hello</h1>'
})
export class AppComponent implements OnInit {
  ngOnInit() {
    console.log('Initialized');
  }
}

Drag options to blanks, or click blank then click option'

AOnDestroy

BOnInit

CAfterViewInit

DOnChanges

Attempts:

3 left

💡 Hint

Common Mistakes

Importing OnDestroy instead of OnInit

Forgetting to import OnInit

Importing AfterViewInit by mistake

The OnInit interface must be imported from @angular/core to use the ngOnInit lifecycle hook.

3fill in blank

hard

Fix the error in the lifecycle hook method name to properly initialize the component.

Angular

export class SampleComponent implements OnInit {
  [1]() {
    console.log('Component ready');
  }
}

Drag options to blanks, or click blank then click option'

AngOnInit

Bngoninit

ConInit

DngInit

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect casing like 'ngoninit'

Omitting the 'ng' prefix

Using 'onInit' instead of 'ngOnInit'

The lifecycle hook method must be named exactly ngOnInit with correct casing to be called by Angular.

4fill in blank

hard

Fill both blanks to correctly implement the initialization lifecycle hook in an Angular component.

Angular

import { Component, [1] } from '@angular/core';

@Component({
  selector: 'app-demo',
  template: '<p>Demo works!</p>'
})
export class DemoComponent implements [2] {
  ngOnInit() {
    console.log('Demo initialized');
  }
}

Drag options to blanks, or click blank then click option'

AOnInit

BOnDestroy

DAfterViewInit

Attempts:

3 left

💡 Hint

Common Mistakes

Importing OnDestroy instead of OnInit

Implementing the wrong interface

Forgetting to implement the interface

You must import OnInit and implement it in the component class to use ngOnInit properly.

5fill in blank

hard

Fill all three blanks to create a component that logs a message on initialization using ngOnInit.

Angular

import { Component, [1] } from '@angular/core';

@Component({
  selector: 'app-log',
  template: '<div>Logging Component</div>'
})
export class LogComponent implements [2] {
  constructor() {
    console.log('Constructor called');
  }

  [3]() {
    console.log('ngOnInit called');
  }
}

Drag options to blanks, or click blank then click option'

AOnInit

CngOnInit

DngAfterViewInit

Attempts:

3 left

💡 Hint

Common Mistakes

Not implementing OnInit interface

Naming the method incorrectly

Using the wrong lifecycle hook method

To use ngOnInit, import and implement OnInit and define the ngOnInit method in the component.

Practice

1. What is the main purpose of the ngOnInit method in an Angular component?

easy

A. To run initialization code after the component is created

B. To handle user input events

C. To define the component's HTML template

D. To style the component with CSS

Solution

1. Step 1: Understand the role of ngOnInit

   The ngOnInit lifecycle hook runs after Angular creates the component, making it ideal for initialization tasks.

2. Step 2: Differentiate from other component parts

   Handling user input, defining templates, and styling are done elsewhere, not in ngOnInit.

3. Final Answer:

   To run initialization code after the component is created -> Option A

4. Quick Check:

   ngOnInit = initialization after creation [OK]

Hint: ngOnInit runs once after component setup [OK]

Common Mistakes:

• Confusing ngOnInit with event handlers
• Thinking ngOnInit sets styles or templates
• Using ngOnInit for user input processing

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

easy

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

B. ngOnInit: function() { console.log('Init'); }

C. function ngOnInit() { console.log('Init'); }

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

Solution

1. Step 1: Recall Angular lifecycle hook syntax

   In Angular components, lifecycle hooks like ngOnInit are methods declared as ngOnInit() { ... }.

2. Step 2: Identify incorrect syntax

   The other options use invalid syntax in an Angular class: shorthand property with function, standalone function declaration, and wrong method name.

3. Final Answer:

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

4. Quick Check:

   ngOnInit is a method, not a property or function keyword [OK]

Hint: Use method syntax: ngOnInit() { } [OK]

Common Mistakes:

• Using function keyword inside class
• Naming method incorrectly as onInit
• Using colon instead of parentheses

3. Consider this Angular component code snippet:

export class MyComponent implements OnInit {
  data = '';
  ngOnInit() {
    this.data = 'Hello World';
  }
}

What will be the value of data after the component initializes?

medium

A. '' (empty string)

B. undefined

C. null

D. 'Hello World'

Solution

1. Step 1: Check initial value of data

   The property data starts as an empty string.

2. Step 2: See what ngOnInit does

   Inside ngOnInit, data is set to 'Hello World'. This runs after component creation.

3. Final Answer:

   'Hello World' -> Option D

4. Quick Check:

   ngOnInit sets data to 'Hello World' [OK]

Hint: ngOnInit runs after creation, sets data [OK]

Common Mistakes:

• Assuming data stays empty string
• Confusing initialization timing
• Thinking ngOnInit runs before constructor

4. Identify the error in this Angular component code:

export class SampleComponent implements OnInit {
  message: string;
  ngOnInit() {
    this.message = 'Welcome';
  }
}

medium

A. ngOnInit method name is incorrect

B. message property should be initialized in constructor

C. Missing import of OnInit interface

D. No error, code is correct

Solution

1. Step 1: Check for required imports

   The component implements OnInit but does not import it from '@angular/core'. This causes a compile error.

2. Step 2: Verify method and property usage

   The method name ngOnInit is correct, and initializing message in ngOnInit is valid.

3. Final Answer:

   Missing import of OnInit interface -> Option C

4. Quick Check:

   Implementing OnInit requires importing it [OK]

Hint: Always import lifecycle interfaces from '@angular/core' [OK]

Common Mistakes:

• Forgetting to import OnInit
• Renaming ngOnInit incorrectly
• Thinking properties must initialize in constructor

5. You want to fetch user data from a server right after your Angular component is created. Where should you place the fetch call to ensure it runs once after initialization?

hard

A. Inside the constructor

B. Inside the ngOnInit method

C. Inside the ngOnDestroy method

D. Inside a button click event handler

Solution

1. Step 1: Understand lifecycle timing

   The constructor runs before Angular sets up the component fully, so it's not ideal for async tasks like fetching data.

2. Step 2: Use ngOnInit for initialization tasks

   ngOnInit runs after component creation and is the recommended place to start fetching data once.

3. Step 3: Exclude other options

   ngOnDestroy runs when component is destroyed, and button click handlers run on user action, not automatically.

4. Final Answer:

   Inside the ngOnInit method -> Option B

5. Quick Check:

   Fetch data in ngOnInit for one-time setup [OK]

Hint: Fetch data in ngOnInit, not constructor [OK]

Common Mistakes:

• Fetching data in constructor causing timing issues
• Using ngOnDestroy which runs too late
• Waiting for user click instead of auto-fetch