Componente Popover Bootstrap de Angular

Angular ng bootstrap es un marco de arranque que se usa con angular para crear componentes con un gran estilo y este marco es muy fácil de usar y se usa para crear sitios web receptivos.

En este artículo sabremos cómo usar Popover en angular ng bootstrap. Popover se usa para hacer un botón que aparecerá al hacer clic en él.

Sintaxis de instalación:

ng add @ng-bootstrap/ng-bootstrap

Acercarse:

• Primero, instale el bootstrap angular ng usando el comando mencionado anteriormente.
• Importe el módulo de arranque ng en module.ts

  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  imports: [
    NgbModule
  ]
  

• En app.component.html crea un componente popover.
• Sirve la aplicación usando ng serve.

Ejemplo 1: En este ejemplo, estamos haciendo un popover con su ubicación en la parte superior.

<button id='gfg' type="button" 
    class="btn btn-success"
    placement="top"
    ngbPopover="Angular ng bootstrap" 
    popoverTitle="GeeksforGeeks">
    Click here
</button>

import { NgModule } from '@angular/core';
  
// Importing forms module
import { FormsModule, ReactiveFormsModule  } 
from '@angular/forms';
import { BrowserModule }
from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
   
import { AppComponent }  
from './app.component';
import { NgbModule }
from '@ng-bootstrap/ng-bootstrap';
   
@NgModule({
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    NgbModule
  ]
})
export class AppModule { }

#gfg{
    margin-left: 100px;
    margin-top: 150px
}

Producción:

Ejemplo 2: En este ejemplo, estamos haciendo un popover con su ubicación en la parte inferior, derecha, izquierda.

<button id='gfg' type="button" 
        class="btn btn-primary"
        placement="bottom"
        ngbPopover="Angular ng bootstrap"
        popoverTitle="GeeksforGeeks">
    Click here
</button>
  
<button id='gfg' type="button" 
        class="btn btn-warning" 
        placement="right"
        ngbPopover="Angular ng bootstrap"
        popoverTitle="GeeksforGeeks">
    Click here
</button>
  
<button id='gfg' type="button" 
        class="btn btn-danger" 
        placement="left"
        ngbPopover="Angular ng bootstrap"
        popoverTitle="GeeksforGeeks">
    Click here
</button>

import { NgModule } from '@angular/core';
  
// Importing forms module
import { FormsModule, ReactiveFormsModule  } 
from '@angular/forms';
import { BrowserModule } 
from '@angular/platform-browser';
import { BrowserAnimationsModule } 
from '@angular/platform-browser/animations';
  
import { AppComponent }  
from './app.component';
import { NgbModule } 
from '@ng-bootstrap/ng-bootstrap';
   
@NgModule({
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    NgbModule
  ]
})
export class AppModule { }

#gfg{
    margin-left: 100px;
    margin-top: 150px
}

Producción:

Referencia: https://ng-bootstrap.github.io/#/components/popover/examples