Why component communication matters in Angular - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why do Angular components need to communicate?

Which of the following best explains why communication between Angular components is important?

A To allow components to share data and coordinate behavior, making the app interactive and dynamic.

B To make sure components load faster by sharing the same template files.

C To enable components to use the same CSS styles without duplication.

D To prevent components from being destroyed when navigating between pages.

💡 Hint

Think about how different parts of an app work together and share information.

Components often need to share data or notify each other about events. This communication helps build interactive apps where parts respond to user actions or data changes.

❓ component_behavior

intermediate

What happens when a child component emits an event?

Consider a parent component listening to an event emitted by its child component. What is the expected behavior when the child emits the event?

Angular

Child component: @Output() notify = new EventEmitter<string>();

Parent template: <child (notify)="onNotify($event)"></child>

A The parent component's <code>onNotify</code> method is called with the emitted value.

B The child component reloads its template automatically.

C The parent component's template is replaced by the child's template.

D The child component stops emitting events until the parent responds.

💡 Hint

Think about how events flow from child to parent in Angular.

When a child component emits an event, the parent can listen and respond by running a method with the event data.

❓ lifecycle

advanced

How does Angular detect changes in @Input properties?

When a parent passes data to a child component via @Input, how does Angular detect and respond to changes in that data?

A Angular only updates inputs when the child component is recreated.

B Angular requires manual calls to update the child component when inputs change.

C Angular reloads the entire application to reflect input changes.

D Angular uses change detection to check for changes and updates the child component's view accordingly.

💡 Hint

Consider Angular's automatic update system for data binding.

Angular runs change detection regularly to update views when input properties change, keeping the UI in sync with data.

📝 Syntax

advanced

Identify the correct syntax for passing data from parent to child

Which option shows the correct way to pass a string value title from a parent component to a child component using Angular's @Input?

Angular

Child component: @Input() title: string;

A <child #title="parentTitle"></child>

B <child (title)="parentTitle"></child>

C <child [title]="parentTitle"></child>

D <child *title="parentTitle"></child>

💡 Hint

Remember that square brackets are used for property binding in Angular templates.

Square brackets [] bind a property from the parent to the child input property.

🔧 Debug

expert

Why does the child component not respond to updated input data?

Given the following code, why does the child component not respond when the parent changes userName?

Parent component:
userName = 'Alice';

Template:


Child component:
@Input() name: string;

// No ngOnChanges or other lifecycle hooks used

A Because the parent changes the value directly without creating a new string instance, Angular's change detection does not detect the change.

B Because the child component lacks an <code>ngOnChanges</code> method to respond to input changes.

C Because the parent did not use the <code>@Output</code> decorator to notify the child.

D Because the child component's <code>@Input</code> property is missing the <code>readonly</code> keyword.

💡 Hint

Think about how Angular detects and reacts to input changes in child components.

Angular updates input properties automatically, but if the child needs to act on changes, it should implement ngOnChanges. Without it, the child may not respond to updates.

Practice

1. Why is component communication important in Angular applications?

easy

A. It helps components to load faster independently.

B. It allows components to share data and work together smoothly.

C. It prevents components from being reused.

D. It makes components run without Angular framework.

Solution

1. Step 1: Understand component roles

   Components often need to share data to build a complete UI.

2. Step 2: Recognize communication purpose

   Sharing data helps components work together smoothly and stay in sync.

3. Final Answer:

   It allows components to share data and work together smoothly. -> Option B

4. Quick Check:

   Component communication = sharing data [OK]

Hint: Communication means sharing data between components [OK]

Common Mistakes:

• Thinking components work best completely isolated
• Confusing communication with performance optimization
• Believing Angular runs components without communication

2. Which syntax correctly passes data from a parent to a child component in Angular?

easy

A. <child-comp *data="parentData"></child-comp>

B. <child-comp (data)="parentData"></child-comp>

C. <child-comp #data="parentData"></child-comp>

D. <child-comp [data]="parentData"></child-comp>

Solution

1. Step 1: Identify Angular input binding syntax

   Angular uses square brackets [] to bind data from parent to child.

2. Step 2: Match syntax to data passing

   [data]="parentData" correctly passes parentData to child's @Input() property.

3. Final Answer:

   <child-comp [data]="parentData"></child-comp> -> Option D

4. Quick Check:

   Parent to child uses [property] binding [OK]

Hint: Use square brackets [] for parent to child data [OK]

Common Mistakes:

• Using parentheses () which are for event binding
• Using template reference # incorrectly
• Using structural directive * wrongly

3. Given this parent and child component code, what will be logged when the child emits an event?

Child component TS:
@Output() notify = new EventEmitter<string>();
sendNotification() { this.notify.emit('Hello'); }

Parent component template:
<child-comp (notify)="onNotify($event)"></child-comp>

Parent component TS:
onNotify(message: string) { console.log(message); }

medium

A. Hello

B. undefined

C. Error: notify is not a function

D. No output

Solution

1. Step 1: Understand event emission

   The child emits 'Hello' via notify.emit('Hello').

2. Step 2: Check parent event binding

   The parent listens with (notify)="onNotify($event)", so onNotify receives 'Hello'.

3. Final Answer:

   Hello -> Option A

4. Quick Check:

   Child event emits 'Hello' caught by parent [OK]

Hint: Child emits event, parent listens with (event) binding [OK]

Common Mistakes:

• Confusing @Output with @Input
• Not passing $event in parent handler
• Expecting no output without calling emit

4. What is wrong with this Angular code for passing data from parent to child?

Parent template:
<child-comp data="parentData"></child-comp>

Child component TS:
@Input() data: string;

medium

A. The parent should use parentheses: (data)="parentData".

B. The child should use @Output() instead of @Input().

C. The parent should use square brackets: [data]="parentData".

D. The child should declare data as a function, not a property.

Solution

1. Step 1: Identify correct binding syntax

   Passing data from parent to child requires property binding with square brackets.

2. Step 2: Analyze given code

   Using data="parentData" passes a string literal, not the variable value.

3. Final Answer:

   The parent should use square brackets: [data]="parentData". -> Option C

4. Quick Check:

   Property binding needs [] around attribute [OK]

Hint: Use [] for passing variables, not quotes [OK]

Common Mistakes:

• Using string literals instead of variable binding
• Confusing @Input and @Output decorators
• Using event binding () for data input

5. You have two unrelated Angular components that need to share user login status. Which approach is best to communicate this data?

hard

A. Use a shared service with an observable to hold and broadcast the login status.

B. Pass data directly using @Input() and @Output() between the two components.

C. Use local variables inside each component without communication.

D. Use template reference variables to share data between components.

Solution

1. Step 1: Identify component relationship

   Unrelated components do not have parent-child relation, so @Input/@Output won't work.

2. Step 2: Choose communication method

   A shared service with an observable allows broadcasting data to any component.

3. Final Answer:

   Use a shared service with an observable to hold and broadcast the login status. -> Option A

4. Quick Check:

   Unrelated components communicate via shared service [OK]

Hint: Use shared service for unrelated component communication [OK]

Common Mistakes:

• Trying to use @Input/@Output between unrelated components
• Using local variables that don't share data
• Misusing template reference variables for communication