custom-autocomplete | A custom autocomplete built with angular 4 frame work | Autocomplete library

In my opinion you should use a shared service in which you should have BehaviourSubject type observable. So whenever user will select any value form autocomplerte so you can pass that selected option to your BehaviourSubject observable and then in your another component you can subscribe to that BehaviourSubject.

And if you want to use multiple reusable autocomplete in one component so while passing each autcomplete's selected value you can pass a property named type in which you will be sending your autocomplete type.

Like you have your function like this

a couple of things...

1. your form group's default value is overriding the one provided by your form, the writeValue method is called at the end of the ngOnInit hook. You can get around this by simply calling setValue in your reusable form in a later hook

2. you're using onPush change detection in your app component in your blitz. This means that only certain things will trigger change detection, and a child component updating a reactive form value is NOT one of them. This is why you're not seeing the change be reflected in your templates. This isn't a big deal if you're just interested in the form value and not in displaying it on screen, but it IS a big deal if you want to display it, as if you remove onPush change detection, you will begin seeing expression changed errors, as a child updating something in the parents template during initialization violates unidirectional data flow. Getting around this is a bit more difficult. The true answer here is that your parent form really should be the one providing the default value.

Removing the OR operation solved the problem. I changed this:

@Optional() @Self() public ngControl: NgControl | null,

with this line

@Optional() @Self() public ngControl: NgControl,

Nevertheless, the question remains, why stackblitz and my local environment handle this operation differently..