Angular Material "Select All" Directive Not Deselecting Correctly on Single Option Change

I'm implementing a custom directive to handle "Select All" behavior for a multi-select dropdown using Angular Material. The issue: when I deselect just one item, the "Select All" checkbox remains selected until I deselect a second item. I'm using a reactive form with FormControl and subscribing to optionSelectionChanges, valueChanges, and even trying setTimeout/requestAnimationFrame, but none update the FormControl.value in time to detect partial selection correctly. How can I reliably sync "Select All" with the actual selection state? Here is my stackblitz

Continue reading...