Scribd
Upload
7 views4 pages

Assign 4 Practical

Uploaded by

nikhil patil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views4 pages

Assign 4 Practical

Uploaded by

nikhil patil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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 { }

You might also like