How can you pass data between components in Angular?

Answer

In Angular, there are several ways to pass data between components. Here are a few commonly used methods:

1. Input and Output Properties:

   • Input Properties: You can pass data from a parent component to a child component using input properties. The child component can declare an input property using the @Input decorator, which allows it to receive data from its parent component.

     Example:

     // Parent Component
     <app-child [data]="parentData"></app-child>

     // Child Component
     @Input() data: any;

   • Output Properties: You can emit events from a child component and listen to them in the parent component using output properties. The child component can declare an output property using the @Output decorator and EventEmitter, which allows it to emit events that the parent component can subscribe to.

     Example:

     // Child Component
     @Output() dataEvent = new EventEmitter<any>();

     sendData() {
     this.dataEvent.emit(this.childData);
     }

     // Parent Component
     <app-child (dataEvent)="receiveData($event)"></app-child>

     receiveData(data: any) {
     // Handle the received data
     }

2. Service:

   • Shared Service: You can create a shared service and use it as a middleman to pass data between components. The service can have properties to store data and methods to manipulate and retrieve the data. Components can inject this service and access the shared data.

     Example:

     // Shared Service
     import { Injectable } from '@angular/core';

     @Injectable()
     export class DataService {
     sharedData: any;
     }

     // Component A
     constructor(private dataService: DataService) { }

     sendData() {
     this.dataService.sharedData = this.data;
     }

     // Component B
     constructor(private dataService: DataService) { }

     receiveData() {
     this.data = this.dataService.sharedData;
     }

3. Route Parameters:

   • If the components are linked by routes, you can pass data through route parameters. The source component can include the data in the URL, and the destination component can retrieve it using the ActivatedRoute service.

     Example:

     // Source Component
     navigateToDestination() {
     this.router.navigate(['/destination', { data: this.data }]);
     }

     // Destination Component
     constructor(private route: ActivatedRoute) { }

     ngOnInit() {
     this.route.params.subscribe(params => {
     this.data = params['data'];
     });
     }

These are some of the common approaches to pass data between components in Angular. The choice of method depends on the specific requirements of your application.