Component Interaction in Angular

Component interaction in Angular allows different components to communicate and share data with each other. This tutorial covers the key methods of component interaction, including input/output properties, view child, and service-based communication.

Using Input and Output Properties

Input and Output properties allow parent and child components to communicate with each other using data binding and event emitting.

Input Properties

The @Input decorator is used to define an input property in the child component:

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

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

Output Properties

The @Output decorator and an EventEmitter are used to define an output 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 from Child!');
  }
}

Parent Component

The parent component binds to the input property and listens to the output event:

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

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

  receiveMessage($event) {
    this.message = $event;
  }
}

Using ViewChild

The @ViewChild decorator allows a parent component to access a child component's properties and methods:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <button (click)="updateChild()">Update Child</button>
  `
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) child: ChildComponent;

  ngAfterViewInit() {
    console.log(this.child.message);
  }

  updateChild() {
    this.child.message = 'Updated message from Parent';
  }
}

Using a Shared Service

A shared service allows components to communicate through a central service. This is useful for non-parent-child component communication.

Creating the Service

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

@Injectable({
  providedIn: 'root'
})
export class MessageService {
  private messageSource = new Subject<string>();
  message$ = this.messageSource.asObservable();

  sendMessage(message: string) {
    this.messageSource.next(message);
  }
}

Sending the Message

A component sends a message using the service:

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

@Component({
  selector: 'app-sender',
  template: '<button (click)="sendMessage()">Send Message</button>'
})
export class SenderComponent {
  constructor(private messageService: MessageService) {}

  sendMessage() {
    this.messageService.sendMessage('Hello from Sender');
  }
}

Receiving the Message

A component receives the message using the service:

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

@Component({
  selector: 'app-receiver',
  template: '<p>Message: {{ message }}</p>'
})
export class ReceiverComponent implements OnInit {
  message: string;

  constructor(private messageService: MessageService) {}

  ngOnInit() {
    this.messageService.message$.subscribe(message => {
      this.message = message;
    });
  }
}

Conclusion

Component interaction in Angular is essential for building dynamic and interactive applications. By using input/output properties, ViewChild, and shared services, you can enable communication between components effectively. Happy coding!