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.