Implement a service for communication between sibling components - Create a service
named `DataService` with methods to send and receive data. - Use this service to enable
communication between two sibling components. - Demonstrate passing data from one
component to another without using @Input() or @Output().
1. ng generate service data
2.
src/app/data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class DataService {
private dataSubject = new BehaviorSubject<any>(null); // Default value can be null or any
initial value
data$ = this.dataSubject.asObservable();
// Method to send data
sendData(data: any) {
this.dataSubject.next(data);
}
}
3. Create Sibling Components
ng generate component component-a
ng generate component component-b
4. Component A (Sender)
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-component-a',
templateUrl: './component-a.component.html',
styleUrls: ['./component-a.component.css']
})
export class ComponentAComponent{
message: string = '';
constructor(private dataService: DataService) {}
sendMessage() {
this.dataService.sendData(this.message);
}
5. component-a.component.html
<div>
<h2>Component A</h2>
<input [(ngModel)]="message" placeholder="Enter message">
<button (click)="sendMessage()">Send to Component B</button>
</div>
6.component-b.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-component-b',
templateUrl: './component-b.component.html',
styleUrls: ['./component-b.component.css']
})
export class ComponentBComponent implements OnInit {
receivedMessage: string = '';
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.data$.subscribe((data) => {
this.receivedMessage = data;
});
}
}
7. component-b.component.html
<div>
<h2>Component B</h2>
<p>Received Message: {{ receivedMessage }}</p>
</div>
8.app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ComponentAComponent } from './component-a/component-a.component';
import { ComponentBComponent } from './component-b/component-b.component';
import { FormsModule } from '@angular/forms'
import {DataService } from './data.service';
@NgModule({
declarations: [
AppComponent,
ComponentAComponent,
ComponentBComponent
],
imports: [
BrowserModule,
AppRoutingModule,FormsModule
],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule { }
