Webhely:
Telepítés:
ng add bootstrap
A Bootstrap a következő helyre töltődik:
node_modules/bootstrap
@import "bootstrap";
A JavaScript része:
"build": { "options": { "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.js" ] } }
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:
@import 'bootstrap-icons';
Példa:
<i class="bi bi-bug-fill"></i>
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';
A modális ablak megjelenítése:
const modal = new bootstrap.Modal( document.getElementById('failLoginModal')! ) modal.show()
Egy másik bootstrap:
Használjuk a saját dokumentációját:
Hozzáadás:
ng add mdbootstrap
@import "~mdbootstrap/css/bootstrap.css";
A JavaScript beillesztése:
"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.
Az ng-bootstrap néhány saját komponenst kínál.
Webhely:
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:
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