Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:angular:angular_bootstrap [2025/03/02 00:21] – [Bootstrap] admin
+++ oktatas:web:angular:angular_bootstrap [2025/03/02 16:13] (aktuális) – [Bootstrap ikonok] admin
@@ Sor 11: / Sor 11: @@
 ===== Bootstrap =====
+==== Telepítés ====
-==== Telepítés ====
 Webhely:
   * https://getbootstrap.com/
 Telepítés:
   ng add bootstrap
-vagy:
-  npm install --save bootstrap
@@ Sor 31: / Sor 26: @@
 ==== Használat ====
-A CSS beállítása az angular.json fájlban:
-<code javascript angular.json>
-"build": {
-    "options": {
-            "styles": [
-              "src/styles.scss",
-              "node_modules/bootstrap/dist/css/bootstrap.css"
-            ],
-    }
-}
-</code>
-Használatbavételhez az **src/styles.css** fájl elejére írjuk:
-Vagy még rövidebb:
 <code css>
 @import "bootstrap";
 </code>
 A JavaScript része:
@@ Sor 66: / Sor 40: @@
     }
 }
-</code>
-A sor érvényesítéséhez újra kell indítani az ng server-t.
-Minden itt felsorolt JavaScript kódot az Angular egyetlen **script.js** fájlba gyűjt össze,
-amit automatikusan belinkel weboldalba.
-Ellenőrizzük, például az app.component.html fájlba írt mintával:
-<code javascript>
-<button class="btn btn-primary">Teszt</button>
 </code>
 ===== Bootstrap ikonok =====
-<note>
-Angular 17-ben nincs ellenőrizve.
-</note>
   ng add bootstrap-icons
@@ Sor 90: / Sor 50: @@
 <code css style.css>
-@import "bootstrap-icons";
+@import 'bootstrap-icons';
 </code>
@@ Sor 100: / Sor 60: @@
 </code>
+===== Modális ablak =====
+A feladat, modális ablak megjelenítése scriptből.
-==== npm paranccsal ====
+Telepítsük a @types/bootstrap csomagot.
-Telepítés:
+  npm install @types/bootstrap
-  npm i bootstrap-icons
-==== CDN linkelése ====
+Ahol szeretnénk használni, importáljuk:
+<code javascript>
+import * as bootstrap from 'bootstrap';
+</code>
+A modális ablak megjelenítése:
+<code javascript>
+        const modal = new bootstrap.Modal(
+          document.getElementById('failLoginModal')!
+        )
+        modal.show()
+</code>
-A link egyszerűen beírható az src/index.html fájlba.