Why performance tuning matters in Angular - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why is performance tuning important in Angular apps?

Imagine you have an Angular app that feels slow when you click buttons or load pages. Why does performance tuning matter in this case?

A It helps the app respond faster and keeps users happy.

B It makes the app use more memory to store extra data.

C It adds more animations to make the app look fancy.

D It increases the app size so it takes longer to download.

💡 Hint

Think about what users feel when an app is slow.

Performance tuning improves how fast the app reacts, making users enjoy using it without frustration.

❓ component_behavior

intermediate

What happens if Angular change detection runs too often?

Consider an Angular component that updates many times per second. What is the likely effect on performance?

A The app crashes immediately due to too many updates.

B The app becomes faster because it updates more frequently.

C The app slows down because Angular checks many things repeatedly.

D Nothing changes because Angular ignores extra updates.

💡 Hint

Think about what happens when a task repeats too often.

Too many change detection cycles cause slowdowns because Angular spends time checking all bindings repeatedly.

📝 Syntax

advanced

Which Angular code snippet correctly uses OnPush change detection?

Choose the code that properly sets OnPush change detection strategy in an Angular component.

A @Component({ selector: 'app-test', changeDetection: 'OnPush' }) export class TestComponent {}

B @Component({ selector: 'app-test', changeDetection: ChangeDetectionStrategy.OnPush }) export class TestComponent {}

C @Component({ selector: 'app-test', changeDetection: ChangeDetectionStrategy.onPush }) export class TestComponent {}

D @Component({ selector: 'app-test', changeDetection: ChangeDetectionStrategy.Default }) export class TestComponent {}

💡 Hint

Look for correct enum usage and capitalization.

ChangeDetectionStrategy.OnPush is the correct enum value with exact capitalization.

🔧 Debug

advanced

Why does this Angular app freeze when updating a large list?

Given this Angular code snippet, why might the app freeze when updating a large list?

  <div *ngFor="let item of items">{{item.name}}</div>

Assume items is a large array updated frequently.

A Because Angular re-renders the entire list on every update without tracking items.

B Because the template syntax is incorrect and causes errors.

C Because the items array is empty and causes infinite loops.

D Because Angular caches the list and never updates it.

💡 Hint

Think about how Angular tracks list items in *ngFor.

Without a trackBy function, Angular re-renders the whole list on each change, causing freezes with large arrays.

❓ lifecycle

expert

What is the effect of using RxJS operators incorrectly in Angular lifecycle hooks?

Consider an Angular component that subscribes to an observable in ngOnInit but forgets to unsubscribe in ngOnDestroy. What is the likely outcome?

A The component reloads itself repeatedly causing infinite loops.

B The observable stops emitting values automatically when the component is destroyed.

C Angular throws an error immediately when the component is destroyed.

D Memory leaks occur because subscriptions stay active after the component is destroyed.

💡 Hint

Think about what happens if you keep listening to something after you no longer need it.

Not unsubscribing causes memory leaks because the subscription stays active, holding resources.