Pass data from component to component

In Angular, you can pass data from one component to another using various methods, depending on the relationship between the components. Here are some common ways to pass data between components:

1. Using Input Properties: If you have a parent-child component relationship, you can pass data from a parent component to a child component using input properties. Here’s how to do it:

• In the parent component, define a property and bind it to an input property in the child component.
• In the child component, use the @Input decorator to receive the data. Parent Component:

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

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

Child Component:

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

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

2. Using Services: To share data between components that don’t have a direct parent-child relationship, you can use Angular services. Create a shared service and inject it into the components that need to exchange data.

• In the service, define a property or method to store or provide the data.
• Inject the service into the components that need to access or modify the data. Service:

   // data.service.ts
   import { Injectable } from '@angular/core';

   @Injectable({
     providedIn: 'root',
   })
   export class DataService {
     sharedData: string = 'Hello from Service';
   }

Components:

   // component1.component.ts
   import { Component } from '@angular/core';
   import { DataService } from './data.service';

   @Component({
     selector: 'app-component1',
     template: `
       <p>{{ dataService.sharedData }}</p>
     `,
   })
   export class Component1Component {
     constructor(private dataService: DataService) {}
   }

   // component2.component.ts
   import { Component } from '@angular/core';
   import { DataService } from './data.service';

   @Component({
     selector: 'app-component2',
     template: `
       <button (click)="updateData()">Update Data</button>
     `,
   })
   export class Component2Component {
     constructor(private dataService: DataService) {}

     updateData() {
       this.dataService.sharedData = 'Data Updated';
     }
   }

3. Using Route Parameters: If you want to pass data between components based on route navigation, you can use route parameters. Configure your routes to accept parameters and access them in your components.

• Define route parameters in your route configuration.
• Access route parameters in your component using the ActivatedRoute service. Route Configuration:

   const routes: Routes = [
     { path: 'product/:id', component: ProductComponent },
   ];

Component:

   import { Component } from '@angular/core';
   import { ActivatedRoute } from '@angular/router';

   @Component({
     selector: 'app-product',
     template: `
       <p>Product ID: {{ productId }}</p>
     `,
   })
   export class ProductComponent {
     productId: string;

     constructor(private route: ActivatedRoute) {
       this.productId = this.route.snapshot.params['id'];
     }
   }

These are common methods for passing data between Angular components, and the approach you choose depends on your specific application and component relationships.