Access input field value in other component in angular

Question

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

@Drenai Yes i know Angular Services but don't have much idea about Observables and Behavioural Subject Can you please suggest some solution or provide some link values must be of array or object type that will be shown in left sidebar — user3653474, Jul 15 '22 at 11:32
You can always go here and read up on subjects: https://www.learnrxjs.io/learn-rxjs/subjects — Mikkel Christensen, Jul 15 '22 at 11:36
@MikkelChristensen Will i have to use Subject, Observer or Behaviour subject — user3653474, Jul 15 '22 at 11:38
You can set query param from one component and read it from second component — Hitesh Thakor, Jul 15 '22 at 11:38
Does this answer your question? [How to implement behavior subject using service in Angular 8](https://stackoverflow.com/questions/57355066/how-to-implement-behavior-subject-using-service-in-angular-8) — Drenai, Jul 15 '22 at 11:49

score 0 · Answer 1 · answered Jul 15 '22 at 11:45

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

Thanks in which component should i fetch initial data in left navbar or right component, new id is being fetched inside right component — user3653474, Jul 15 '22 at 12:35
this.DataSharing.SharingData.subscribe((res: any) => { this.Component3Data = res; }) using the above code you will get value once it is updated. ------------------------------------------ this.DataSharing.SharingData.next(data.value); using above code you can update the value. — Hitesh Thakor, Jul 18 '22 at 04:57

score 0 · Answer 2 · answered Jul 15 '22 at 12:10

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

Access input field value in other component in angular

2 Answers2