Component Interaction

Component interaction is a way for one component in an Angular application to communicate with or send data to another component. There are several ways that components can interact with each other in Angular, including:

• Input binding: A component can receive data from its parent component through input binding. This is done by using the @Input decorator to bind a property in the child component to a value passed in by the parent component.
• Output binding: A component can send data to its parent component through output binding. This is done by using the @Output decorator to bind an event in the child component to a method in the parent component.
• ViewChild: A component can access its child components or DOM elements through the @ViewChild decorator. This allows the component to call methods on the child component or access its properties.
• Service: A component can communicate with other components or share data with the rest of the application by injecting a service into both components. The service can be used to store and retrieve data that needs to be shared between components.

Overall, component interaction is an important concept in Angular, as it allows components to communicate and share data with each other, and helps to make your application more modular and maintainable.

Here we are passing data from Component to another Component : Component Interaction

There are several ways that you can pass data from one component to another in Angular:

1. Input binding: You can pass data from a parent component to a child component using input binding. This is done by using the @Input decorator to bind a property in the child component to a value passed in by the parent component.

For example, suppose you have a parent component that contains a child component:

<app-child [message]="'Hello World'"></app-child>

In the child component, you can use the @Input decorator to bind the message property to the value passed in by the parent component:

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

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

2. Output binding: You can pass data from a child component to a parent component using output binding. This is done by using the @Output decorator to bind an event in the child component to a method in the parent component.

For example, suppose you have a parent component that contains a child component:

<app-child (messageEvent)="onMessage($event)"></app-child>

In the child component, you can use the @Output decorator to bind the messageEvent event to a property in the child component:

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

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

  sendMessage() {
    this.messageEvent.emit('Hello World');
  }
}

In the parent component, you can define a method that will be called when the messageEvent event is emitted: Component Interaction

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child (messageEvent)="onMessage($event)"></app-child>
  `,
})
export class ParentComponent {
  onMessage(message: string) {
    console.log(message);
  }
}

3. Service: You can pass data between components using a service. A service is a class that can be injected into multiple components, and can be used to store and retrieve data that needs to be shared between components.

For example, you can create a service that stores a message:

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

@Injectable({
  providedIn: 'root'
})
export class MessageService {
  message: string;
}

Then you can inject the service into both the parent component and the child component:

import { Component } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>

• Communication between components can be achieved using @Input, @Output, and EventEmitter. @Input is used to pass data from a parent component to a child component, while @Output and EventEmitter are used to emit events from a child component to a parent component.
• A parent component can pass data to a child component using property binding. Property binding allows you to bind a property of a child component to a property of a parent component, so that changes in the parent component are reflected in the child component.
• A child component can emit events using the @Output decorator and EventEmitter. The parent component can listen to these events and respond to them.
• You can use services to share data between components that are not directly related. Services provide a way to create a singleton object that can be shared across the entire application.
• Angular provides various lifecycle hooks such as ngOnInit, ngOnDestroy, and ngOnChanges, which can be used to handle component initialization and destruction.

Component Interaction Component Interaction Component Interaction