Как вызвать шоу ($event) в зависимости от состояния оверлейной панели

Question

Я новичок в Angular2, и я пытаюсь показать оверлей-панель () на основе выбранного значения раскрывающегося списка. Пожалуйста, обратитесь к следующему коду раскрывающегося списка.

 <ion-col #payDateCol col class="pd-0">
                            <p-dropdown
                                    #payDateRuleDropdown
                                    [placeholder]="'GENERAL.PAYGROUPS.ADD.PLACEHOLDERS.PAY_DATE_RULE' | translate"
                                    [style]="{'width':'100%'}"
                                    [options]="payDateRuleList"
                                    [(ngModel)]="payDateRuleSelected"
                                    [disabled]="!firstPayDateSelected"
                                    (onChange)="onChangeOfPayDateRule();dateOfPeriod.show($event,payDateCol)" 

                                   >
                            </p-dropdown>
                        </ion-col>

OverlayPanel

<p-overlayPanel styleClass="date-of-period" #dateOfPeriod  appendTo="body" >
                <ion-row>
                    <ion-col col-4>
                        <p>Day Of Pay Period</p>
                    </ion-col>
                    <ion-col col-4>
                     <input class="input" maxlength=30 type="text" [(ngModel)]="paygroupName" required />
                     </ion-col>
                    <ion-col col-4>
                        <button>OK</button>
                    </ion-col>
                </ion-row>
         </p-overlayPanel> 

В соответствии с приведенным выше кодом раскрывающегося списка, наложенная панель отображается для каждого выбранного параметра. Но мне нужно только отображать при выборе один конкретный вариант.

например: скажем, варианты A, B, мне нужно показать только при выборе B.

Пожалуйста помоги мне с этим. заранее спасибо