I have created one filter component as a shared one which is used for filter selection of country its common for all the pages.
when i am changing the country selection need to update the other pages function and UI . please help me how to achieve this in angular 6
There are two ways you can do it depending on the sort of relation the FilterComponent may have with other pages in your App.
If FilterComponent is a direct child of these pages, then you can create an @Output property in your FilterComponent and then call a function in the pages by binding to it using event binding syntax. I've specified the @Output approach in this answer of mine.
If there's no relation between them as such, you can create a SharedService with a private BehaviorSubject in exposed as public Observable You can follow the approach that I've shared in this answer of mine.
As for your description, I understood that filter component is the child component, And wheneever you filter in the child component the change must come in the parent component.
As per the child and parent communications there are Event Emitter and View child properties please look into it.
for reference go through this
