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.