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.
Top comments (0)