Angular Zero: Component Communication Basics

In previous chapters, we discussed how to create templates and styles for basic components. Components are fundamental building blocks of Angular applications, and interaction between components is a critical aspect of building effective, maintainable applications. This chapter focuses on various approaches to component interaction—including input properties, output properties, and services.

1. Core Concepts of Component Interaction

In Angular, component interaction primarily occurs via input properties (@Input) and output properties (@Output). These mechanisms enable data reception and event emission, respectively—allowing parent and child components to communicate effectively.

• The @Input decorator defines a property through which a parent component can pass data to a child component.
• The @Output decorator defines an event through which a child component can emit notifications or data back to its parent.

1.1 Input Properties (@Input)

Using @Input, a parent component can pass data to a child component. Here's a simple example:

// child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<p>Data received by child component: {{ data }}</p>`
})
export class ChildComponent {
  @Input() data: string;
}

In this example, ChildComponent accepts a string input named data. A parent component can use this component and supply the value:

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<h1>Parent Component</h1>
             <app-child [data]="parentData"></app-child>`
})
export class ParentComponent {
  parentData = 'Data from parent component';
}

In ParentComponent, the app-child selector inserts the child component, and [data]="parentData" binds the parent’s parentData property to the child’s data input.

1.2 Output Properties (@Output)

@Output enables a child component to emit events to its parent—typically implemented using EventEmitter. Here's an example:

// child.component.ts
import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="onButtonClick()">Click Me</button>`
})
export class ChildComponent {
  @Output() childEvent = new EventEmitter<string>();

  onButtonClick() {
    this.childEvent.emit('Child component button clicked!');
  }
}

Here, ChildComponent declares an output event named childEvent. When the button is clicked, it emits a message to the parent.

How does the parent listen for this event?

// parent.component.ts
@Component({
  selector: 'app-parent',
  template: `<h1>Parent Component</h1>
             <app-child (childEvent)="handleChildEvent($event)"></app-child>`
})
export class ParentComponent {
  handleChildEvent(message: string) {
    console.log(message); // Logs: "Child component button clicked!"
  }
}

In ParentComponent, (childEvent)="handleChildEvent($event)" registers an event listener that invokes handleChildEvent() whenever the child emits childEvent.

2. Inter-Component Communication via Services

Beyond @Input and @Output, services provide another powerful mechanism for inter-component communication in Angular. Services facilitate shared state or data across multiple components—ideal for scenarios requiring communication across unrelated or deeply nested components.

2.1 Creating a Service

You can generate a service using the Angular CLI:

ng generate service shared

Here’s a simple shared service example:

// shared.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class SharedService {
  private messageSource = new BehaviorSubject<string>('Default message');
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

2.2 Using the Service in Components

Next, inject and use the service in your components.

// child.component.ts
import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-child',
  template: `<button (click)="sendMessage()">Send Message</button>`
})
export class ChildComponent {
  constructor(private sharedService: SharedService) {}

  sendMessage() {
    this.sharedService.changeMessage('Message from child component!');
  }
}

In ChildComponent, clicking the button triggers sendMessage(), updating the shared message.

The parent component can then subscribe to changes:

// parent.component.ts
import { Component, OnInit } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-parent',
  template: `<h1>Parent Component</h1>
             <p>Message: {{ message }}</p>`
})
export class ParentComponent implements OnInit {
  message: string;

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.currentMessage.subscribe(message => this.message = message);
  }
}

In ParentComponent, the ngOnInit lifecycle hook subscribes to currentMessage, updating the local message property whenever the shared value changes.

3. Summary

This chapter covered the primary methods for inter-component communication in Angular: input properties, output properties, and services. These techniques enable efficient, decoupled communication—enhancing component reusability and long-term maintainability.

In the next chapter, we’ll delve deeper into Angular’s data binding concepts, exploring how to seamlessly synchronize data between components and their views.