Ez a dokumentum egy előző változata!

Tartalomjegyzék

Bootstrap

< Angular

Bootstrap

Szerző: Sallai András
Copyright © 2021, Sallai András
Szerkesztve: 2023, 2024, 2025
Licenc: CC BY-SA 4.0
Web: https://szit.hu

Bootstrap

Telepítés

Webhely:

https://getbootstrap.com/

Telepítés:

ng add bootstrap

A Bootstrap a következő helyre töltődik:

node_modules/bootstrap

Használat

@import "bootstrap";

A JavaScript része:

angular.json

"build": {
    "options": {
        "scripts": [
            "node_modules/bootstrap/dist/js/bootstrap.js"
        ]
    }
}

Bootstrap ikonok

ng add bootstrap-icons

Amire szükség van, a node_modules/bootstrap-icons/font/bootstrap-icons.css fájl. De elég ha a bootstrap-icons könyvtárat megadom ~ jellel:

style.css

@import 'bootstrap-icons';

Példa:

src/app/app.component.html

<i class="bi bi-bug-fill"></i>

Modális ablak

A feladat, modális ablak megjelenítése scriptből.

Telepítsük a @types/bootstrap csomagot.

npm install @types/bootstrap

Ahol szeretnénk használni, importáljuk:

import * as bootstrap from 'bootstrap';

Importálhatjuk csak a Model() konstruktort:

import { Modal } from 'bootstrap';

Modális ablak megjelenítése

A modális ablak megjelenítése:

        const modal = new bootstrap.Modal(
          document.getElementById('failLoginModal')!
        )
        modal.show()

Modális ablak elrejtése változat 1

Szükség van a #addModal azonosítóra, mivel a @ViewChild() számára szükséges.

<div class="modal fade" id="addModal" 
#addModal
tabindex="-1" 
    aria-labelledby="addModalLabel" aria-hidden="true">
 
<!-- ... -->

Kapcsoljuk be a böngésző fejlesztői felületét és válasszuk az Elements fület. Figyeljük meg a body elemet. Kap egy új osztályt: <body class=„modal-open” >.

A lezáró body előtt pedig létrejön egy div elem, ami a szürke átlátszó hátteret biztosítja: <div class=„modal-backdrop fade show”></>.

import { Component, ElementRef, ViewChild } from '@angular/core';
import { Modal } from 'bootstrap';
//...
 
export class UserComponent {
  @ViewChild('addModal') addModalRef?: ElementRef
 
  //...
  closeModal() {
    (this.addModalRef?.nativeElement as HTMLElement).style.display = 'none'
    document.body.classList.remove('modal-open')
    document.querySelector('.modal-backdrop')?.remove()
  }
 
}

Modális ablak elrejtése változat 2

Szükség van a #addModal azonosítóra:

<div class="modal fade" id="addModal" 
#addModal
tabindex="-1" 
    aria-labelledby="addModalLabel" aria-hidden="true">
 
<!-- ... -->

import { Component, ElementRef, ViewChild } from '@angular/core';
import { Modal } from 'bootstrap';
//...
 
export class UserComponent {
  @ViewChild('addModal') addModalRef?: ElementRef
 
  //...
  closeModal() {
    /*Levesszük a nyomógombról a fókuszt mert aria-hidden
    figyelmeztetést okoz */
    const buttonElement = document.activeElement as HTMLElement;
    buttonElement.blur();
 
    const modalEl = this.addModalRef?.nativeElement
    const modal = Modal.getInstance(modalEl)
    modal?.hide()
    document.querySelector('.modal-backdrop')?.remove()
  }
}

Modális ablak elrejtése változat 3

Ebben a változatban csak a Modal osztályra van szükség. HTML sablonban az id attribútum értékére fogunk hivatkozni.

import { Modal } from 'bootstrap';
//...
 
export class UserComponent {
  //...
  closeModal() {
    /*Levesszük a nyomógombról a fókuszt mert aria-hidden
    figyelmeztetést okoz */
    const buttonElement = document.activeElement as HTMLElement;
    buttonElement.blur();
 
    const modalEl = document.getElementById('addModal')
    const modal = Modal.getInstance(modalEl!)
    modal?.hide()
    document.querySelector('.modal-backdrop')?.remove()
  }
 
}

Toast

Készítsünk a Toastnak egy dobozt:

<div class="toast-container position-fixed top-0 end-0 p-3">
 
</div>

A Toast-t ebbe a dobozba tesszük.

<div class="toast-container position-fixed top-0 end-0 p-3">
 
  <div class="toast align-items-center text-bg-primary border-0" 
  role="alert" aria-live="assertive" aria-atomic="true"
  #successToast
  >
    <div class="d-flex">
      <div class="toast-body">
        Az adatok sikeresen mentésre kerültek.
      </div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
 
</div>

mdbootstrap

Egy másik bootstrap:

Használjuk a saját dokumentációját:

https://mdbootstrap.com/docs/b5/angular/

Hozzáadás:

ng add mdbootstrap

styles.css

@import "~mdbootstrap/css/bootstrap.css";

A JavaScript beillesztése:

angular.json

"build": {
    "options": {
        "scripts": [
            "node_modules/mdbootstrap/js/jquery.js",
            "node_modules/mdbootstrap/js/propper.js",
            "node_modules/mdbootstrap/js/bootstrap.js"
        ]
    }
}

A szervert újra kell indítani, ha már el volt indítva.

ng-bootstrap

Az ng-bootstrap néhány saját komponenst kínál.

Webhely:

https://ng-bootstrap.github.io/

Telepítés parancssorból:

ng add @ng-bootstrap/ng-bootstrap

Használható még az ngx-bootstrap. A ng-bootstrap és az ngx-bootstrap közötti különbség, hogy az utóbbi több modulból áll, hogy ezzel is csökkenthessük a webszerverre feltöltött weboldal méretét.

Tudnivalók:

A parancs automatikusan importálja src/app/app.module.ts fájlba az ng-bootstrap-t.
A bootstrap is telepszik, de nem lesz importálva a JavaScript fájl.

Csomagnév séma

Ha nem a szokásos módon hivatkozunk az ng-bootstrap csomagra, ilyen figyelmeztetést kapunk:

The package that you are trying to add does not support schematics. You can try using a different version of the package or contact the package author to add ng-add support.

Ilyen figyelmeztetést kapunk például: ~~ng add ng-bootstrap~~ beírásakor. Helyette használjuk:

ng add @ng-bootstrap/ng-bootstrap