Why component communication matters in Angular - See It in Action

Why component communication matters

📖 Scenario: You are building a simple Angular app with two components: a parent and a child. The parent has a message it wants to share with the child. The child will show this message on the screen. This is like a parent telling a child a secret, and the child repeating it out loud.

🎯 Goal: Build two Angular standalone components: ParentComponent and ChildComponent. Pass a message string from the parent to the child using component communication. The child should display the message inside a paragraph.

📋 What You'll Learn

Create a standalone ParentComponent with a string variable parentMessage set to 'Hello from Parent!'

Create a standalone ChildComponent that accepts an input property message of type string

Use the @Input() decorator in ChildComponent to receive the message

In ParentComponent template, include <app-child [message]="parentMessage"></app-child>

Display the received message inside a paragraph in ChildComponent

💡 Why This Matters

🌍 Real World

Component communication is essential in real Angular apps to share data and keep UI parts in sync, like a dashboard showing live updates.

💼 Career

Understanding component communication is a key skill for Angular developers, enabling them to build modular, maintainable apps.

1

Create ParentComponent with a message

Create a standalone Angular component called ParentComponent. Inside it, create a string variable called parentMessage and set it to 'Hello from Parent!'.

Angular

// Your code here

Hint

Use @Component with standalone: true. Define parentMessage as a string property.

2

Create ChildComponent with an input property

Create a standalone Angular component called ChildComponent. Import Input from @angular/core. Add an input property called message of type string using the @Input() decorator.

Angular

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-parent',
  standalone: true,
  template: ``,
})
export class ParentComponent {
  parentMessage = 'Hello from Parent!';
}

// Create ChildComponent with @Input() message property
// Your code here

Hint

Remember to import Input and use @Input() before the message property.

3

Pass message from ParentComponent to ChildComponent

In ParentComponent template, add the <app-child> tag. Bind the message input of app-child to the parentMessage variable using property binding syntax.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  standalone: true,
  template: `
    
  `,
})
export class ParentComponent {
  parentMessage = 'Hello from Parent!';
}

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  standalone: true,
  template: ``,
})
export class ChildComponent {
  @Input() message!: string;
}

Hint

Use square brackets [] to bind message input to parentMessage.

4

Display the message in ChildComponent template

In ChildComponent template, add a paragraph tag that displays the message input property using Angular interpolation syntax.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  standalone: true,
  template: `
    
  `,
})
export class ParentComponent {
  parentMessage = 'Hello from Parent!';
}

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  standalone: true,
  template: `
    
  `,
})
export class ChildComponent {
  @Input() message!: string;
}

Hint

Use double curly braces {{ }} to show the message inside a paragraph.

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