Access input field value in other component in angular-CodePudding

I have this structure navbar component and form component

I have navbar component initially i load the user data in component from id that we store in session, in right side component we have one searchable field when i select its option i call one method that returns the updated id, and i want to show new result in the navbar based on updated id but i am not able to get how i will pass the updated id to navbar component, Any suggestions Thanks

CodePudding user response：

dataService.service.ts

import { Injectable } from '@angular/core';  
import { Subject } from 'rxjs';  
  
@Injectable({  
  providedIn: 'root'  
})  
export class DataSharingService {  
  
  SharingData = new Subject();  
  constructor() { }  
}

Component1.component.ts

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);  
  }  
}

Component2.component.ts

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);  
  }  
}

Component3.component.ts.

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);  
  }  
  
}

CodePudding user response：

Answer given by Hitesh Thakor is a way to handle and secod way is @Input() from navbar component to Form Component and when you change its value from navbar component then you can listen that in ngOnChanges() lifecycle in form component and show the view for that ID .

Hope you Understand