0
0
Angularframework~10 mins

Lifecycle execution order mental model in Angular - Interactive Code Practice

Choose your learning style9 modes available
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to import the lifecycle hook that runs after Angular sets input properties.

Angular
import { Component, [1] } from '@angular/core';
Drag options to blanks, or click blank then click option'
AOnInit
BOnChanges
CDoCheck
DAfterViewInit
Attempts:
3 left
💡 Hint
Common Mistakes
Choosing OnInit instead of OnChanges
Confusing AfterViewInit with input changes
2fill in blank
medium

Complete the code to implement the lifecycle hook that runs once after the first ngOnChanges.

Angular
export class MyComponent implements [1] { ngOnInit() { console.log('Init'); } }
Drag options to blanks, or click blank then click option'
AOnDestroy
BAfterContentInit
CDoCheck
DOnInit
Attempts:
3 left
💡 Hint
Common Mistakes
Using OnDestroy instead of OnInit
Confusing DoCheck with OnInit
3fill in blank
hard

Fix the error in the lifecycle hook name that runs after Angular projects external content into the component.

Angular
export class MyComponent implements AfterContentInit { ngAfterContent[1]() { console.log('Content projected'); } }
Drag options to blanks, or click blank then click option'
ADestroy
BCheck
CInit
DChanges
Attempts:
3 left
💡 Hint
Common Mistakes
Using ngAfterContentCheck instead of ngAfterContentInit
Misspelling the method name
4fill in blank
hard

Fill both blanks to complete the lifecycle hook that runs after Angular initializes the component's views and child views.

Angular
export class MyComponent implements [1] { ng[2]() { console.log('View initialized'); } }
Drag options to blanks, or click blank then click option'
AAfterViewInit
BOnInit
DOnDestroy
Attempts:
3 left
💡 Hint
Common Mistakes
Using OnInit instead of AfterViewInit
Confusing AfterContentInit with AfterViewInit
5fill in blank
hard

Fill both blanks to complete the lifecycle hook that runs just before Angular destroys the component.

Angular
export class MyComponent implements [1] { ng[2]() { console.log('Cleanup before destroy'); } }
Drag options to blanks, or click blank then click option'
AOnDestroy
BOnInit
CDestroy
Attempts:
3 left
💡 Hint
Common Mistakes
Using OnInit instead of OnDestroy
Misspelling ngOnDestroy