2

Hi i have two components A&B. In A i am having a drop down which contains car models.In B i am having one more drop down contain model year.If I am selecting a car from drop down A the available year associated with that selected car will display.All are working fine but Iam facing one issue that from B if i am changing any particular year A component not refreshing immediately .After page reload only am getting the new values.How i can solve this. Ngonint() call is not a good way because i am having enough methods inside that?please help

2 Answers2

5

You can use a service for this.

You can communicate between components using a service as described in the angular official documentation , Component Interaction.

Hoe this helps.

Anuradha Gunasekara
  • 6,553
  • 2
  • 27
  • 37
  • i have a shared service..but value is geting only after refresh..need to get same time.. this link s not working – beginer_programer May 23 '18 at 12:18
  • 2
    Here is the link https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service. And you should use Subjects to get realtime data. read the doc – Anuradha Gunasekara May 23 '18 at 12:20
3

You can use Subjects for this.

Lets consider an Interface dateRange

IDateRange {
   availableYear: string
}

Create a subject in a commonService.ts like below

private updateLists = new Subject<IDateRange>();
updateListsObs = <Observable<IDateRange>>this.updateLists;

updateListFn(_dateRange : IDateRange ) {
 this.updateLists.next(_dateRange);
}

In your Component A inject CommonService and subscribe to observable updateListsObs like below

this.CommonService.updateListsObs
.subscribe(
(response) => {console.log("You will get date range in response which can be used to filter Car list in Component A ")}
)

Then in your Component B inject CommonService and call UpdateListFn

let dateRange: IDateRange = {
 availableYear: "2018"
}
this.CommonService.updateListFn(dateRange);

For detail description you can refer this link

djain4
  • 257
  • 2
  • 13