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.

Practice

1. What is the main purpose of the ngAfterViewInit lifecycle hook in Angular?

easy

A. To clean up resources when the component is destroyed

B. To initialize component input properties before the view loads

C. To handle user input events like clicks and keypresses

D. To run code after the component's view and child views are fully initialized

Solution

1. Step 1: Understand Angular lifecycle hooks

   Angular provides hooks to run code at specific times in a component's life, such as creation, view initialization, and destruction.

2. Step 2: Identify when ngAfterViewInit runs

   ngAfterViewInit runs after Angular fully initializes the component's view and its child views, making it safe to access view elements.

3. Final Answer:

   To run code after the component's view and child views are fully initialized -> Option D

4. Quick Check:

   ngAfterViewInit = view ready code [OK]

Hint: Runs after view loads, safe to access elements [OK]

Common Mistakes:

• Confusing it with ngOnInit which runs earlier
• Using it to handle input properties initialization
• Thinking it runs on component destruction

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

easy

A. ngAfterViewInit => { console.log('View initialized'); }

B. ngAfterViewInit() { console.log('View initialized'); }

C. function ngAfterViewInit() { console.log('View initialized'); }

D. ngAfterViewInit: function() { console.log('View initialized'); }

Solution

1. Step 1: Recall Angular component method syntax

   Angular lifecycle hooks are implemented as class methods without special syntax like arrow functions or function keywords.

2. Step 2: Check each option's syntax

   ngAfterViewInit() { console.log('View initialized'); } uses the correct method syntax inside a class. Options A, B, and C use invalid or incorrect JavaScript syntax for class methods.

3. Final Answer:

   ngAfterViewInit() { console.log('View initialized'); } -> Option B

4. Quick Check:

   Use method() syntax for lifecycle hooks [OK]

Hint: Use method() syntax inside class for hooks [OK]

Common Mistakes:

• Using arrow functions for lifecycle hooks
• Adding function keyword inside class
• Using object literal syntax instead of class methods

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

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

@Component({ selector: 'app-sample', template: `
Content
` })
export class SampleComponent implements AfterViewInit {
  @ViewChild('box') box!: ElementRef;

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

medium

A. Content

B. undefined

C. Error: box is undefined

D. null

Solution

1. Step 1: Understand @ViewChild and ngAfterViewInit

   @ViewChild gets a reference to the DOM element after the view initializes. ngAfterViewInit runs after the view is ready, so the element is accessible.

2. Step 2: Check what is logged

   The code logs this.box.nativeElement.textContent, which is the text inside the <div> with #box, which is "Content".

3. Final Answer:

   Content -> Option A

4. Quick Check:

   @ViewChild + ngAfterViewInit = element ready [OK]

Hint: Access @ViewChild only after ngAfterViewInit [OK]

Common Mistakes:

• Trying to access @ViewChild in ngOnInit causing undefined
• Assuming @ViewChild is null before view init
• Confusing nativeElement with the ElementRef itself

4. What is the problem with this Angular component code?

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

@Component({ selector: 'app-test', template: `
Paragraph
` })
export class TestComponent implements AfterViewInit {
  @ViewChild('para') para!: ElementRef;

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

  ngAfterViewInit() {
    console.log('View initialized');
  }
}

medium

A. ngAfterViewInit should be named ngAfterContentInit

B. Missing import of AfterViewInit interface

C. Accessing @ViewChild in ngOnInit causes undefined error

D. Template reference variable #para is invalid

Solution

1. Step 1: Identify when @ViewChild is available

   @ViewChild references are set only after the view initializes, which happens after ngOnInit.

2. Step 2: Check code usage

   The code tries to access this.para.nativeElement.textContent inside ngOnInit, which runs before the view is ready, causing undefined or error.

3. Final Answer:

   Accessing @ViewChild in ngOnInit causes undefined error -> Option C

4. Quick Check:

   @ViewChild ready only after ngAfterViewInit [OK]

Hint: Use @ViewChild only in ngAfterViewInit or later [OK]

Common Mistakes:

• Accessing @ViewChild in ngOnInit
• Confusing ngAfterViewInit with ngOnInit timing
• Ignoring lifecycle hook order

5. You want to change the background color of a child component's element after it is fully rendered. Which approach correctly uses ngAfterViewInit to do this in the parent component?

Child component template:
<div #childBox>Child Content</div>

Parent component code options:

hard

A. Use @ViewChild('childBox') in parent and change style in ngAfterViewInit

B. Change child element style directly in parent's ngOnInit

C. Use @ViewChild in parent and change style in constructor

D. Modify child element style in parent's ngAfterContentInit without @ViewChild

Solution

1. Step 1: Understand when child view elements are ready

   Child component's view elements are accessible in the parent during ngAfterViewInit, after the parent's view and child views are fully initialized.

2. Step 2: Identify correct lifecycle hook and access method

   Using @ViewChild in the parent to get the child's element reference and modifying it in ngAfterViewInit ensures the element is ready and safe to modify.

3. Final Answer:

   Use @ViewChild('childBox') in parent and change style in ngAfterViewInit -> Option A

4. Quick Check:

   Modify child view in parent's ngAfterViewInit with @ViewChild [OK]

Hint: Use @ViewChild and ngAfterViewInit to access child elements [OK]

Common Mistakes:

• Trying to access child elements in ngOnInit or constructor
• Modifying child elements without @ViewChild reference
• Using ngAfterContentInit which is for projected content, not view