<modal #myModal>
        <modal-header>
            <h1>Material Picker</h1>
        </modal-header>
        <modal-content>
            Brand:
            <p-dropdown [(ngModel)]="selectedBrand"
                        [options]="brands"
                        id="brand"
                        placeholder="Select a brand"
            ></p-dropdown>
            <br>
            Product Type:
            <p-multiSelect
                [(ngModel)]="selectedProductType"
                [options]="productTypes"
                defaultLabel="Select a product type"
                id="productType"
                [maxSelectedLabels]="0"
                selectedItemsLabel="{0} product(s) selected"
            ></p-multiSelect>
        </modal-content>
        <modal-footer>
            <button (click)="closeModal()" class="btn btn-primary">close</button>
        </modal-footer>
    </modal>

If I open this p-multiselect or p-dropdown then click outside it doesn't close. What should I do to make this multiselect or dropdown close on clicking outside of the component?