DEV Community

Saunak Surani
Saunak Surani

Posted on

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++;
  }

}
Enter fullscreen mode Exit fullscreen mode

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

<h1>{{ count }}</h1>
<button (click)="increment()">Increment</button>
Enter fullscreen mode Exit fullscreen mode

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();
  }

}
Enter fullscreen mode Exit fullscreen mode

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;
    });
  }

}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)