I have two prime-ng multi-select which are dependent on one another.

<div class="input-field-class">
    <label class="custom-label">Phase of Development</label>
    <p-multiSelect defaultLabel="Select Phase" 
                   [options]="listPhase"
                   optionLabel="label"
                   [(ngModel)]="selectedPhases"
                   (ngModelChange)="filterProfiles($event)">
    </p-multiSelect>
</div>

<div class="input-field-class">
    <label class="custom-label">Related activity</label>
    <p-multiSelect defaultLabel="Select Activity"
                   [options]="activityList"
                   optionLabel="label"
                   [(ngModel)]="selectedActivities"
                   (ngModelChange)="filterProfiles($event)">
    </p-multiSelect>
</div>

Component Code is:

filterProfile() {
    let selectedPhasesById = [];
    let selectedActivitiesById = [];
    let activitiesByPhases;

    if (this.selectedPhases.length > 0) {
        selectedPhasesById = this.selectedPhases.map(c => c.id);
        activitiesByPhases = this.selectedPhases.map(item => {
            return this.listActivityByPhases[item.label].map(function(c) {
                return {label: c.name, value: c.name, id: c.id};
            });
        });
 
        activitiesByPhases = _.flattenDeep(activitiesByPhases);
        this.activityList = [...activitiesByPhases];
    } else {
        this.activityList = [];
    }

    if (this.selectedActivities.length > 0) {
        selectedActivitiesById = this.selectedActivities.map(c => c.id);
    }

    return {selectedPhasesById, selectedActivitiesById};
}

Whenever I select two values in Phases dropdown, its corresponding values are displayed in Activities dropdown. User can select the value. But, when I de-select one value in Phases dropdown, then the Activities dropdown label(Select Activity) is not displayed. But there are values in its drop-down. Dont know what I am doing wrong here.