In Angular, there are several ways to share data between two components. Here are some common methods:

1. Parent-to-child communication (Input binding): In Angular, you can share data from a parent component to a child component by using input properties. The parent component binds a value to an input property of the child component. Example: Parent Component:

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

@Component({
  selector: 'app-parent',
  template: `
    
  `
})
export class ParentComponent {
  sharedData: string = 'Hello from parent!';
}

Child Component:

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

@Component({
  selector: 'app-child',
  template: `
    

{{ data }}

` }) export class ChildComponent { @Input() data: string; }
2. Child-to-parent communication (EventEmitter): If you need to share data from a child component back to its parent component, you can use the EventEmitter class. The child component emits events that the parent component listens to. Example: Child Component:

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

@Component({
  selector: 'app-child',
  template: `
    Send Data
  `
})
export class ChildComponent {
  @Output() dataEvent = new EventEmitter();

  sendData() {
    const data = 'Hello from child!';
    this.dataEvent.emit(data);
  }
}

Parent Component:

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

@Component({
  selector: 'app-parent',
  template: `
    
    

{{ receivedData }}

` }) export class ParentComponent { receivedData: string; receiveData(data: string) { this.receivedData = data; } }
3. Service (Shared service): You can create a shared service that acts as a data-sharing intermediary between components. The service holds the shared data, and components can read and write to it. Example: Shared Service:

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

@Injectable()
export class DataService {
  sharedData: string = 'Hello from service!';
}

Component A:

import { Component } from '@angular/core';
import { DataService } from 'path-to-data-service';

@Component({
  selector: 'app-component-a',
  template: `
    

{{ dataService.sharedData }}

` }) export class ComponentA { constructor(public dataService: DataService) {} }
Component B:

import { Component } from '@angular/core';
import { DataService } from 'path-to-data-service';

@Component({
  selector: 'app-component-b',
  template: `
    Update Data
  `
})
export class ComponentB {
  constructor(public dataService: DataService) {}

  updateData() {
    this.dataService.sharedData = 'New data!';
  }
}

These are some common ways to share data between two components in Angular. The method you choose depends on the relationship between the components and the specific requirements of your application.