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

Input and Output Properties:
Input properties are used to pass data from a parent component to a child component, and Output properties are used to emit events from a child component to a parent component.
For example, in the parent component, you can define an input property and bind it to a property on the child component. And in the child component, you can define an output property and emit an event when the data changes. Here's an example:

Parent component:

kotlin
Copy code
@Component({
  selector: 'app-parent',
  template: `
    <app-child [message]="parentMessage" (messageEvent)="receiveMessage($event)"></app-child>
  `,
})
export class ParentComponent {
  parentMessage = "Message from parent";

  receiveMessage($event) {
    console.log($event);
  }
}
Child component:

kotlin
Copy code
@Component({
  selector: 'app-child',
  template: `
    {{ message }}
    <button (click)="sendMessage()">Send Message</button>
  `,
})
export class ChildComponent {
  @Input() message: string;
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit("Message from child");
  }
}
Service:
You can also use a service to pass data between components. In this approach, you create a service that holds the data and inject the service into the components that need it. Here's an example:
Service:

typescript
Copy code
@Injectable({ providedIn: 'root' })
export class DataService {
  private messageSource = new BehaviorSubject<string>("default message");
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}
Parent component:

typescript
Copy code
@Component({
  selector: 'app-parent',
  template: `
    {{ message }}
    <button (click)="newMessage()">New Message</button>
  `,
})
export class ParentComponent {
  message: string;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.currentMessage.subscribe(message => this.message = message);
  }

  newMessage() {
    this.dataService.changeMessage("New message from parent");
  }
}
Child component:

typescript
Copy code
@Component({
  selector: 'app-child',
  template: `
    {{ message }}
  `,
})
export class ChildComponent {
  message: string;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.currentMessage.subscribe(message => this.message = message);
  }
}
In the example above, the DataService has a private BehaviorSubject that holds the message, and exposes an Observable called currentMessage that can be subscribed to in the components. The parent component calls changeMessage() on the service to update the message, and the child component automatically receives the updated message through the subscription to currentMessage.

There are other ways to pass data between components, but these are the most common approaches in Angular.