0

De Bootstrap estoy usando la clase popover(), hasta el momento funcionaba y quedaba en mi web así:

introducir la descripción de la imagen aquí

El proyecto lo estoy migrando a Angular con el fin de aprender y tal, pero al hacerlo con el Jquery, Bootstrap y popper inyectados no me coge la clase .popover()

Mi angular.json:

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "node_modules/@fortawesome/fontawesome-free/css/all.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/popper.js/dist/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"

]

En HTML:

<div class="col col-sm-5 ml-auto popovers" id="nombrePopover" data-toggle="popover" data-placement="top" data-content="El campo Nombre ha de tener 5 carácteres mínimo">
     <input type="text" class="form-control" placeholder="{{'name' | translate}}" name="usuario" id="Usuario">
</div>

Y mi código jQuery (Typescript) con el que implemento la función en la que manipulo dichos popovers:

muestraMiPopover(miPopover:any){
  console.log(miPopover);
  if(miPopover!=undefined){
      $(".popovers").popover("hide"); //Aquí falla .popover() diciendo que no existe dicha función
      miPopover.popover({ //Y aquí
          "title": 'Error',
      });
      miPopover.popover("show");
  }
}

introducir la descripción de la imagen aquí Estas son mis importaciones del anterior proyecto dónde SÍ funciona:

<!-- FontAwsome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<!-- Importaciones -->
<script src="../JS/Jquery/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Propias -->
<link rel="stylesheet" href="../css/sassCss/crearCuenta.css">
<!-- Favion.ico -->
<link rel="icon" href="../img/favicon.ico" type="image/x-icon" />
2

1 respuesta 1

0

Deberias usar ng-bootstrap, te olvidas de jquery y bootstrap.

  1. Los instalas -> npm install --save @ng-bootstrap/ng-bootstrap
  2. En el app.module
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    ...
    imports: [NgbModule, ...],
    ...

})
export class YourAppModule { }
  1. Ya puedes implementar popovers.

Un ejemplo:

<button type="button" class="btn btn-outline-secondary mr-2" placement="top"
    ngbPopover="Vivamus sagittis lacus vel auge laoreet rutrum faucibius." poppoverTitle="Popover on top">
</button>

Para mas información: página de ng-bootstrap

4
  • 5
    Por favor considera publicar tu código como texto pues no hay necesidad de publicarlo como imagen
    – user128299
    el 27 feb. 2020 a las 15:15
  • Sep, eso me sirve y ya no solo eso, me vale para otras cosas como veo para los alerts, joder asi superfacil jeje
    – elver
    el 27 feb. 2020 a las 15:46
  • Una pregunta mas, esto me permite usar popovers, pero para llevar el control al typescript como lo harías? manipulando el DOM
    – elver
    el 27 feb. 2020 a las 16:05
  • Debes olvidarte de manipular el DOM cuando trabajes con angular, pues el framework se encarga de eso, mira la documentación de ng-bootstrap ahí te enseñan como llevar el control de los componentes.
    – daividix
    el 28 feb. 2020 a las 16:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.