ngAfterViewInit for view ready in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to implement the Angular lifecycle hook that runs after the component's view is initialized.

Angular

export class MyComponent implements [1] {
  ngAfterViewInit() {
    console.log('View is ready');
  }
}

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

AAfterViewInit

BAfterContentInit

COnInit

DDoCheck

Attempts:

3 left

💡 Hint

Common Mistakes

Using OnInit instead of AfterViewInit

Forgetting to implement the interface

Trying to access view elements before this hook

The AfterViewInit interface is used to run code after the component's view has been fully initialized.

2fill in blank

medium

Complete the code to import the correct Angular interface for the ngAfterViewInit lifecycle hook.

Angular

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

@Component({
  selector: 'app-sample',
  template: '<p>Sample works!</p>'
})
export class SampleComponent implements [1] {
  ngAfterViewInit() {
    console.log('View initialized');
  }
}

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

ADoCheck

BAfterViewInit

CAfterContentInit

DOnInit

Attempts:

3 left

💡 Hint

Common Mistakes

Importing OnInit instead of AfterViewInit

Not importing the interface at all

Confusing AfterViewInit with AfterContentInit

You must import AfterViewInit to implement the ngAfterViewInit lifecycle hook.

3fill in blank

hard

Fix the error in the lifecycle hook method name to correctly detect when the view is ready.

Angular

export class DemoComponent implements AfterViewInit {
  [1]() {
    console.log('View is ready');
  }
}

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

AafterViewInit

BngAfterView

CngAfterViewInit

DngViewInit

Attempts:

3 left

💡 Hint

Common Mistakes

Misspelling the method name

Using camelCase without 'ng' prefix

Omitting 'Init' suffix

The correct method name is ngAfterViewInit. Angular calls this method after the component's view is initialized.

4fill in blank

hard

Fill both blanks to correctly access a child element after the view is initialized.

Angular

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

@Component({
  selector: 'app-child-access',
  template: '<p #paraRef>Text</p>'
})
export class ChildAccessComponent implements [2] {
  @ViewChild('paraRef') para!: ElementRef;

  ngAfterViewInit() {
    console.log(this.para.nativeElement.textContent);
  }
}

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

AAfterViewInit

BOnInit

CAfterContentInit

DDoCheck

Attempts:

3 left

💡 Hint

Common Mistakes

Using OnInit instead of AfterViewInit

Not importing AfterViewInit

Trying to access view children before ngAfterViewInit

You must import and implement AfterViewInit to safely access view child elements after initialization.

5fill in blank

hard

Fill all three blanks to create a component that logs a message after the view is ready and accesses a button element.

Angular

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

@Component({
  selector: 'app-button',
  template: '<button #btn>Click me</button>'
})
export class ButtonComponent implements [2] {
  @ViewChild('btn') button!: ElementRef;

  [3]() {
    console.log('Button text:', this.button.nativeElement.textContent);
  }
}

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

AAfterViewInit

BngAfterViewInit

CngOnInit

DOnInit

Attempts:

3 left

💡 Hint

Common Mistakes

Using OnInit lifecycle hook instead

Misspelling the method name

Not implementing the interface

Import and implement AfterViewInit, then define the method ngAfterViewInit to run code after the view is initialized.