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

Need a 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

Need a 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;
}

Need a 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;
}

Need a hint?

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