subject in angular TS file
import { Component } from '@angular/core';
import { DataSharingService } from '../data-sharing.service';
@Component({
selector: 'app-component3',
templateUrl: './component3.component.html',
styleUrls: ['./component3.component.css']
})
export class Component3Component {
Component3Data: any = '';
constructor(private DataSharing: DataSharingService) {
this.DataSharing.SharingData.subscribe((res: any) => {
this.Component3Data = res;
})
}
onSubmit(data) {
this.DataSharing.SharingData.next(data.value);
}
}
//second TS file:
import { Component } from '@angular/core';
import { DataSharingService } from '../data-sharing.service';
@Component({
selector: 'app-component2',
templateUrl: './component2.component.html',
styleUrls: ['./component2.component.css']
})
export class Component2Component {
Component2Data: any = '';
constructor(private DataSharing: DataSharingService) {
this.DataSharing.SharingData.subscribe((res: any) => {
this.Component2Data = res;
})
}
onSubmit(data) {
this.DataSharing.SharingData.next(data.value);
}
}
//3rd TS file:
Now Open Component1.component.tsfile and paste the below code.
import { Component } from '@angular/core';
import { DataSharingService } from '../data-sharing.service';
@Component({
selector: 'app-component1',
templateUrl: './component1.component.html',
styleUrls: ['./component1.component.css']
})
export class Component1Component {
Component1Data: any = '';
constructor(private DataSharing: DataSharingService) {
this.DataSharing.SharingData.subscribe((res: any) => {
this.Component1Data = res;
})
}
onSubmit(data) {
this.DataSharing.SharingData.next(data.value);
}
}