Nebular programmatically close popover with form

Question

i started work with Neabular and i'm struggling with the documentation…

I've created a nebular popover with a form and i would like to close it when the form is validated and don't close it when the form is not validated. How can i do this ?

Here is the code :

<button [nbPopover]="addMenunItem" nbButton status="success">AJOUTER</button>
<ng-template #addMenunItem>
  <div class="p-4">
    <div class="w-100 pb-4">
      <h5>Créer un menu</h5>
    </div>

    <form [formGroup]="createMenuForm" (ngSubmit)="onSubmit()" novalidate>
      <div class="form-group">
        <input type="text" placeholder="Titre" formControlName="title" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.title.errors }">
        <div *ngIf="submitted && f.title.errors" class="invalid-feedback">
            <div *ngIf="f.title.errors.required">Le titre est obligatoire</div>
        </div>
      </div>
      <div class="form-group">
        <nb-checkbox id="private" class="private"></nb-checkbox>
        <label for="private">Privé</label>
      </div>
      <button type="submit" [disabled]="loading" class="btn btn-success w-100">Enregistrer</button>
    </form>
  </div>
</ng-template>

score 2 · Answer 1 · answered Jun 28 '19 at 13:30

2

For one popover (source):

@ViewChild(NbPopoverDirective) popover;
[…]
this.popover.hide();

For multiple:

@ViewChildren(NbPopoverDirective) popovers: QueryList<NbPopoverDirective>;
[…]
this.popovers.forEach(pop => {
    pop.hide();
});

answered Jun 28 '19 at 13:30

Goigle

138
13

What if you want to close the popover from the popover itself ? – YohjiNakamoto Nov 09 '21 at 09:15

score 0 · Answer 2 · answered Oct 23 '18 at 09:04

0

Found it :

@ViewChild(NbPopoverDirective) popover;
[…]
this.popover.hide();

an interrogation remains : what if there are multiple popover in a component… ?

answered Oct 23 '18 at 09:04

Mushu8

173
1
13

Nebular programmatically close popover with form

2 Answers2