Mastering Component Communication in Angular

Angular is a powerful framework for building web applications. One of the things that makes Angular so powerful is its ability to facilitate communication between components. In this article, we will discuss some advanced techniques for component communication in Angular.

Parent to Child Communication

The most common way to communicate between components is from a parent component to a child component. This can be done using the @Input decorator. The @Input decorator allows you to pass data from a parent component to a child component.

For example, let's say we have a parent component called AppComponent and a child component called CounterComponent. We want to pass the current value of a counter from the AppComponent to the CounterComponent. We can do this by decorating a property in the CounterComponent with the @Input decorator.

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

@Component({
  selector: 'counter-component',
  templateUrl: './counter.component.html',
})
export class CounterComponent {

  @Input()
  count: number;

  constructor() {
    this.count = 0;
  }

  increment() {
    this.count++;
  }

}

In the CounterComponent template, we can access the count property that was passed from the AppComponent.

<h1>{{ count }}</h1>
<button (click)="increment()">Increment</button>

Child to Parent Communication

In addition to parent to child communication, Angular also supports child to parent communication. This can be done using the @Output decorator. The @Output decorator allows you to emit events from a child component to its parent component.

For example, let's say we have a child component called CounterComponent that emits an event when the counter value is incremented. We can do this by decorating a property in the CounterComponent with the @Output decorator.

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

@Component({
  selector: 'counter-component',
  templateUrl: './counter.component.html',
})
export class CounterComponent {

  @Output()
  incrementEvent = new EventEmitter();

  constructor() {
    this.count = 0;
  }

  increment() {
    this.count++;
    this.incrementEvent.emit();
  }

}

In the AppComponent, we can subscribe to the incrementEvent event to be notified when the counter value is incremented.

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

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {

  count: number;

  constructor() {
    this.count = 0;
  }

  ngOnInit() {
    this.counterComponent.incrementEvent.subscribe((event) => {
      this.count = event.count;
    });
  }

}

Conclusion

In this article, we discussed some advanced techniques for component communication in Angular. We covered parent to child communication and child to parent communication. We also saw how to subscribe to events emitted from child components.

I hope this article was helpful. Please let me know if you have any questions.