How to clear selected item in ng-select

Question

I created dropdown component using https://www.npmjs.com/package/@ng-select/ng-select

<ng-select class="custom"
[items]="items"
bindLabel="Name"
bindValue="Id"
[(ngModel)]="selectedId"
[required]="required">

I am using 2 instances of this component in another component.

  <div class="row">
    <div class="col">
      <app-ec-dropdown name="ModuleId"
                       [items]="modules"
                       [selectedId]="moduleId"'"
                       [(ngModel)]="moduleId">

    </div>
  </div>
  <div class="row">
    <div class="col">
      <app-ec-dropdown name="MenuGroupId"
                       [items]="menuGroups"
                       [selectedId]="menuGroupId"
                       [(ngModel)]="menuGroupId">

    </div>
  </div>

The second dropdown populates depending on the value of first dropdown. This works fine. in the ScreenGrab-1, you can see when "Master" is selected in first dropdown , it populated respective values in second dropdown. I selected the option "Branch". Now see ScreenGrab-2, I changed the first dropdown value to "Admin", and it correctly populates the second dropdown with respective items which is only one value "Rights" in this case.

The problem is, I am not able to clear the selected item "Branch" on change of first dropdown value. I did menuGroups = [] and menuGroupId="" on Modules dropdown change but it doesn't help. Can anyone help please how to clear selected item from parent component.

ScreenGrab-1 ScreenGrab-2