Angular ngx Bootstrap Popover Componente

Angular ngx 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 ngx bootstrap. Popover se usa para hacer un botón que aparecerá al hacer clic en él.

Sintaxis de instalación:

npm install ngx-bootstrap --save

Acercarse:

  • Primero, instale el bootstrap angular ngx usando el comando mencionado anteriormente.
  •  

  • Agregue el siguiente script en index.html

    <enlace href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” rel=”hoja de estilo”>

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

Ejemplo:

index.html

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8" />
    <base href="/" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        rel="stylesheet" />
  
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href=
"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
        rel="stylesheet" />
    <link href=
        "https://fonts.googleapis.com/icon?family=Material+Icons" 
        rel="stylesheet" />
</head>
  
<body class="mat-typography">
    <app-root></app-root>
</body>
  
</html>

app.component.html

<div id="pop">
    <button type="button" class="btn btn-default btn-success" 
        popover="Popover component in Angular ngx bootstrap."
        popoverTitle="GeeeksforGeeks" placement="top">
        Click here!
    </button>
  
    <br />
    <br />
  
    <button type="button" class="btn btn-default btn-warning"
        popover="Popover component in Angular ngx bootstrap."
        popoverTitle="GeeeksforGeeks" placement="right">
        Click here!
    </button>
  
    <br />
    <br />
  
    <button type="button" class="btn btn-default btn-danger" 
        popover="Popover component in Angular ngx bootstrap."
        popoverTitle="GeeeksforGeeks" placement="bottom">
        Click here!
    </button>
</div>

app.module.ts

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 { PopoverModule }
    from 'ngx-bootstrap/popover';
  
import { AppComponent } from './app.component';
  
@NgModule({
    bootstrap: [
        AppComponent
    ],
    declarations: [
        AppComponent
    ],
    imports: [
        FormsModule,
        BrowserModule,
        BrowserAnimationsModule,
        ReactiveFormsModule,
        PopoverModule.forRoot()
    ]
})
export class AppModule { }

app.component.css

#pop{
    margin: 50px;
    margin-top: 140px;
}

app.component.ts

import { Component, OnInit,LOCALE_ID } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
}

Producción:

Referencia: https://valor-software.com/ngx-bootstrap/popover

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *