ngAfterViewInit for view ready in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ lifecycle

intermediate

When is ngAfterViewInit called in Angular?

In Angular, the ngAfterViewInit lifecycle hook is triggered at what point during a component's lifecycle?

A After the component is destroyed

B After the component's view and its child views have been fully initialized

C Immediately after the component's constructor runs

D Before the component's inputs are set

💡 Hint

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

The ngAfterViewInit hook runs once Angular has fully initialized the component's view and all child views. This means the template and child components are ready for DOM interaction.

❓ component_behavior

intermediate

What happens if you access a child component's property in ngOnInit instead of ngAfterViewInit?

Consider a parent component that tries to access a child component's property inside ngOnInit. What is the likely outcome?

A The parent component's ngOnInit is skipped

B The child component's property is always fully initialized and accessible

C Angular throws a runtime error immediately

D The child component's property may be undefined or not yet initialized

💡 Hint

Think about when child views are ready compared to ngOnInit timing.

During ngOnInit, child components and their views may not be fully initialized yet, so accessing their properties can lead to undefined or unexpected values.

📝 Syntax

advanced

Identify the correct ngAfterViewInit implementation

Which of the following Angular component snippets correctly implements the ngAfterViewInit lifecycle hook?

A export class MyComponent implements AfterViewInit { ngAfterViewInit() { console.log('View ready'); } }

B export class MyComponent implements AfterViewInit { ngAfterViewInit { console.log('View ready'); } }

C export class MyComponent implements OnInit { ngAfterViewInit() { console.log('View ready'); } }

D export class MyComponent { ngAfterViewInit() { console.log('View ready'); } }

💡 Hint

Check interface implementation and method syntax.

To use ngAfterViewInit, the component must implement the AfterViewInit interface and define the method with correct syntax including parentheses.

🔧 Debug

advanced

Why does accessing @ViewChild in ngOnInit cause an error?

Given this code snippet, why does accessing @ViewChild('myDiv') in ngOnInit cause an error?

 @ViewChild('myDiv') myDivElement: ElementRef;

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

A Because the view children are not yet initialized during ngOnInit

B Because @ViewChild cannot be used with ElementRef

C Because ngOnInit runs after ngAfterViewInit

D Because nativeElement is not accessible in Angular

💡 Hint

Consider when Angular sets the references for view children.

@ViewChild references are set after the component's view is initialized, which happens after ngOnInit. Accessing them too early leads to undefined or errors.

❓ state_output

expert

What is the console output order for ngOnInit and ngAfterViewInit?

Given this Angular component code, what is the order of console logs when the component loads?

export class DemoComponent implements OnInit, AfterViewInit {
  ngOnInit() {
    console.log('Init');
  }
  ngAfterViewInit() {
    console.log('View Init');
  }
}

A Both logs happen simultaneously

B "View Init" logged first, then "Init"

C "Init" logged first, then "View Init"

D No logs appear because lifecycle hooks are not called

💡 Hint

Think about the sequence Angular calls lifecycle hooks.

Angular calls ngOnInit first during component initialization, then ngAfterViewInit after the view is fully initialized.