Ngx-Bootstrap - Popover

Le composant popover ngx-bootstrap fournit un petit composant de superposition pour fournir de petites informations sur un composant.

PopoverDirective

sélecteur

• popover

Contributions

• adaptivePosition - booléen, définit désactiver la position adaptative.

• container - string, Un sélecteur spécifiant l'élément auquel le popover doit être ajouté.

• containerClass - string, classe Css pour le conteneur popover

• delay - nombre, délai avant d'afficher l'info-bulle

• isOpen - booléen, retourne si le popover est actuellement affiché ou non

• outsideClick - booléen, Fermer le popover lors d'un clic extérieur, par défaut: false

• placement- "top" | "bas" | "gauche" | "droit" | "auto" | "en haut à gauche" | "en haut à droite" | "en haut à droite" | "en bas à droite" | "en bas à droite" | "en bas à gauche" | "en bas à gauche" | "left top", placement d'un popover. Accepte: "haut", "bas", "gauche", "droite".

• popover- chaîne | TemplateRef <any>, Contenu à afficher sous forme de popover.

• popoverContext - any, Contexte à utiliser si le popover est un modèle.

• popoverTitle - chaîne, titre d'un popover.

• triggers- string, spécifie les événements qui doivent se déclencher. Prend en charge une liste de noms d'événements séparés par des espaces.

Les sorties

• onHidden - Émet un événement lorsque le popover est masqué.

• onShown - Émet un événement lorsque le popover est affiché.

Méthodes

• setAriaDescribedBy() - Définissez l'attribut aria-describedBy pour la directive d'élément et définissez l'id pour le popover.

• show()- Ouvre le popover d'un élément. Ceci est considéré comme un déclenchement "manuel" du popover.

• hide()- Ferme le popover d'un élément. Ceci est considéré comme un déclenchement "manuel" du popover.

• toggle()- Active ou désactive le popover d'un élément. Ceci est considéré comme un déclenchement "manuel" du popover.

Exemple

Comme nous allons utiliser un popover, nous devons mettre à jour app.module.ts utilisé dans le chapitre Pagination ngx-bootstrap pour utiliserPopoverModule et PopoverConfig.

Mettez à jour app.module.ts pour utiliser PopoverModule et PopoverConfig.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Mettez à jour test.component.html pour utiliser le modal.

test.component.html

<button type="button" class="btn btn-default btn-primary"
   popover="Welcome to Tutorialspoint." [outsideClick]="true">
   Default Popover
</button>
<button type="button" class="btn btn-default btn-primary"
   popover="Welcome to Tutorialspoint."
   popoverTitle="Tutorialspoint" 
   [outsideClick]="true"
   placement="right">
   Right Aligned popover
</button>

Mettez à jour test.component.ts pour les variables et méthodes correspondantes.

test.component.ts

import { Component, OnInit } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { PageChangedEvent } from 'ngx-bootstrap/pagination';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   constructor() {}
   ngOnInit(): void {
   }
}

Construire et servir

Exécutez la commande suivante pour démarrer le serveur angulaire.

ng serve

Une fois que le serveur est opérationnel. Ouvrez http: // localhost: 4200. Cliquez sur le bouton Ouvrir modal et vérifiez la sortie suivante.