es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo utilizar las herramientas de Bootstrap con *CDN* de Bootstrap en Angular?

28 May, 2023 Programación

He incluido bootstrap.min.css y bootstrap.min.js en el archivo index.html de mi proyecto Angular. Quiero usar las herramientas de Bootstrap pero no encuentro la manera de hacerlo. ¿Cómo lo logro sin tener que hacer

npm install bootstrap

Elemento para agregar una herramienta:
html
<p data-bs-toggle="tooltip" data-bs-placement="bottom" title="Volver a la página anterior"></p>

Index.html

<!doctype html>
<html lang="en">
<head>
  <!-- meta, title, etc -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para usar las herramientas Bootstrap en un proyecto Angular sin tener que hacer npm install bootstrap, necesitarás agregar los atributos data-bs-toggle, data-bs-placement, y title, al elemento HTML al que quieres agregar la herramienta.

    Por ejemplo, si deseas agregar una herramienta a un elemento de párrafo, puedes agregar el siguiente código HTML en tu plantilla:

    <p data-bs-toggle="tooltip" data-bs-placement="bottom" title="Volver a la página anterior"></p>

    En index.html, ya has incluido los archivos de CSS y JavaScript de Bootstrap 5 utilizando los enlaces CDN.

    Para activar las herramientas, necesitas agregar código JavaScript que llame al método tooltip() en cada elemento con el atributo data-bs-toggle="tooltip".

    Aquí hay un ejemplo de cómo hacerlo en tu archivo app.component.ts:

    import { Component, OnInit } from '@angular/core';

declare const bootstrap: any;

@Component({
  selector: 'app-root',
  template: `
    <p data-bs-toggle="tooltip" data-bs-placement="bottom" title="Volver a la página anterior">Muéveme</p>
  `
})
export class AppComponent implements OnInit {

  ngOnInit() {
    // Inicializa todas las herramientas en la página
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
  }
}

    Este código importa las clases Component y OnInit de @angular/core, y declara una variable bootstrap para acceder a los componentes JavaScript de Bootstrap.

    En el método ngOnInit, se inicializan todas las herramientas en la página mediante la selección de todos los elementos con el atributo data-bs-toggle="tooltip", y se llama al constructor de Tooltip en cada uno.

    De esta manera, tu proyecto Angular ahora debería ser capaz de manejar las herramientas Bootstrap sin tener que instalar Bootstrap usando npm.

Comments are closed.