├── README.md ├── frontend-angular-19 ├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── angular.json ├── eslint.config.js ├── nginx.conf ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── server.js ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.config.ts │ │ ├── app.routes.ts │ │ └── features │ │ │ ├── about │ │ │ ├── about.component.css │ │ │ ├── about.component.html │ │ │ ├── about.component.spec.ts │ │ │ ├── about.component.ts │ │ │ ├── about.config.ts │ │ │ ├── about.routes.ts │ │ │ ├── experience │ │ │ │ ├── experience.component.css │ │ │ │ ├── experience.component.html │ │ │ │ ├── experience.component.spec.ts │ │ │ │ └── experience.component.ts │ │ │ └── skill │ │ │ │ ├── skill.component.css │ │ │ │ ├── skill.component.html │ │ │ │ ├── skill.component.spec.ts │ │ │ │ └── skill.component.ts │ │ │ ├── contact │ │ │ ├── contact.component.css │ │ │ ├── contact.component.html │ │ │ ├── contact.component.spec.ts │ │ │ ├── contact.component.ts │ │ │ ├── contact.config.ts │ │ │ ├── contact.routes.ts │ │ │ ├── mailing │ │ │ │ ├── mailing.component.css │ │ │ │ ├── mailing.component.html │ │ │ │ ├── mailing.component.spec.ts │ │ │ │ └── mailing.component.ts │ │ │ ├── mapping │ │ │ │ ├── mapping.component.css │ │ │ │ ├── mapping.component.html │ │ │ │ ├── mapping.component.spec.ts │ │ │ │ └── mapping.component.ts │ │ │ └── website │ │ │ │ ├── website.component.css │ │ │ │ ├── website.component.html │ │ │ │ ├── website.component.spec.ts │ │ │ │ └── website.component.ts │ │ │ ├── home │ │ │ ├── home.component.css │ │ │ ├── home.component.html │ │ │ ├── home.component.spec.ts │ │ │ └── home.component.ts │ │ │ ├── login │ │ │ ├── login.component.css │ │ │ ├── login.component.html │ │ │ ├── login.component.spec.ts │ │ │ └── login.component.ts │ │ │ ├── not-found │ │ │ ├── not-found.component.css │ │ │ ├── not-found.component.html │ │ │ ├── not-found.component.spec.ts │ │ │ └── not-found.component.ts │ │ │ ├── signup │ │ │ ├── signup.component.css │ │ │ ├── signup.component.html │ │ │ ├── signup.component.spec.ts │ │ │ └── signup.component.ts │ │ │ └── tutorials │ │ │ └── example-bootstrap │ │ │ ├── 00-main │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ ├── items.component.ts │ │ │ └── items.ts │ │ │ ├── accordions │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ ├── items.component.spec.ts │ │ │ └── items.component.ts │ │ │ ├── alerts │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── badges │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── blockquotes │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── breadcrumb │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── buttons │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── cards │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── checkbox │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── collapses │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── dropdowns │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── forms │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── list-group │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── pagination │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── progress │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── spinners │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── tables │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── tutorial.component.css │ │ │ ├── tutorial.component.html │ │ │ ├── tutorial.component.spec.ts │ │ │ ├── tutorial.component.ts │ │ │ ├── tutorial.config.ts │ │ │ ├── tutorial.routes.ts │ │ │ └── typography │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ ├── assets │ │ ├── .gitkeep │ │ └── params │ │ │ ├── css │ │ │ ├── fonts.googleapis.css │ │ │ └── fonts.googleapis.min.css │ │ │ ├── images │ │ │ ├── example-bootstrap │ │ │ │ └── movie-screen.jpg │ │ │ └── logo │ │ │ │ ├── ganatan-logo.png │ │ │ │ └── ganatan-logo@2x.png │ │ │ └── js │ │ │ ├── popovers.js │ │ │ ├── toasts.js │ │ │ └── tooltips.js │ ├── environments │ │ ├── environment.development.ts │ │ └── environment.ts │ ├── index.html │ ├── main.ts │ └── styles.css ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── ui │ ├── assets │ ├── bootstrap │ │ ├── css │ │ │ ├── bootstrap-grid.css │ │ │ ├── bootstrap-grid.css.map │ │ │ ├── bootstrap-grid.min.css │ │ │ ├── bootstrap-grid.min.css.map │ │ │ ├── bootstrap-grid.rtl.css │ │ │ ├── bootstrap-grid.rtl.css.map │ │ │ ├── bootstrap-grid.rtl.min.css │ │ │ ├── bootstrap-grid.rtl.min.css.map │ │ │ ├── bootstrap-reboot.css │ │ │ ├── bootstrap-reboot.css.map │ │ │ ├── bootstrap-reboot.min.css │ │ │ ├── bootstrap-reboot.min.css.map │ │ │ ├── bootstrap-reboot.rtl.css │ │ │ ├── bootstrap-reboot.rtl.css.map │ │ │ ├── bootstrap-reboot.rtl.min.css │ │ │ ├── bootstrap-reboot.rtl.min.css.map │ │ │ ├── bootstrap-utilities.css │ │ │ ├── bootstrap-utilities.css.map │ │ │ ├── bootstrap-utilities.min.css │ │ │ ├── bootstrap-utilities.min.css.map │ │ │ ├── bootstrap-utilities.rtl.css │ │ │ ├── bootstrap-utilities.rtl.css.map │ │ │ ├── bootstrap-utilities.rtl.min.css │ │ │ ├── bootstrap-utilities.rtl.min.css.map │ │ │ ├── bootstrap.css │ │ │ ├── bootstrap.css.map │ │ │ ├── bootstrap.min.css │ │ │ ├── bootstrap.min.css.map │ │ │ ├── bootstrap.rtl.css │ │ │ ├── bootstrap.rtl.css.map │ │ │ ├── bootstrap.rtl.min.css │ │ │ └── bootstrap.rtl.min.css.map │ │ └── js │ │ │ ├── bootstrap.bundle.js │ │ │ ├── bootstrap.bundle.js.map │ │ │ ├── bootstrap.bundle.min.js │ │ │ ├── bootstrap.bundle.min.js.map │ │ │ ├── bootstrap.esm.js │ │ │ ├── bootstrap.esm.js.map │ │ │ ├── bootstrap.esm.min.js │ │ │ ├── bootstrap.esm.min.js.map │ │ │ ├── bootstrap.js │ │ │ ├── bootstrap.js.map │ │ │ ├── bootstrap.min.js │ │ │ └── bootstrap.min.js.map │ ├── fontawesome │ │ ├── css │ │ │ ├── all.css │ │ │ ├── all.min.css │ │ │ ├── brands.css │ │ │ ├── brands.min.css │ │ │ ├── fontawesome.css │ │ │ ├── fontawesome.min.css │ │ │ ├── regular.css │ │ │ ├── regular.min.css │ │ │ ├── solid.css │ │ │ ├── solid.min.css │ │ │ ├── svg-with-js.css │ │ │ ├── svg-with-js.min.css │ │ │ ├── v4-font-face.css │ │ │ ├── v4-font-face.min.css │ │ │ ├── v4-shims.css │ │ │ ├── v4-shims.min.css │ │ │ ├── v5-font-face.css │ │ │ └── v5-font-face.min.css │ │ ├── js │ │ │ ├── all.js │ │ │ ├── all.min.js │ │ │ ├── brands.js │ │ │ ├── brands.min.js │ │ │ ├── conflict-detection.js │ │ │ ├── conflict-detection.min.js │ │ │ ├── fontawesome.js │ │ │ ├── fontawesome.min.js │ │ │ ├── regular.js │ │ │ ├── regular.min.js │ │ │ ├── solid.js │ │ │ ├── solid.min.js │ │ │ ├── v4-shims.js │ │ │ └── v4-shims.min.js │ │ └── webfonts │ │ │ ├── fa-brands-400.ttf │ │ │ ├── fa-brands-400.woff2 │ │ │ ├── fa-regular-400.ttf │ │ │ ├── fa-regular-400.woff2 │ │ │ ├── fa-solid-900.ttf │ │ │ ├── fa-solid-900.woff2 │ │ │ ├── fa-v4compatibility.ttf │ │ │ └── fa-v4compatibility.woff2 │ └── params │ │ ├── css │ │ ├── body.css │ │ ├── fonts.googleapis.css │ │ ├── fonts.googleapis.min.css │ │ ├── footer.css │ │ └── header.css │ │ ├── images │ │ └── logo │ │ │ ├── ganatan-logo.png │ │ │ └── ganatan-logo@2x.png │ │ └── js │ │ ├── popovers.js │ │ ├── toasts.js │ │ └── tooltips.js │ └── home.html ├── frontend-angular ├── .editorconfig ├── .gitignore ├── Dockerfile ├── LICENSE ├── README.md ├── angular.json ├── eslint.config.js ├── nginx.conf ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── server.js ├── src │ ├── app │ │ ├── app.config.ts │ │ ├── app.css │ │ ├── app.html │ │ ├── app.routes.ts │ │ ├── app.spec.ts │ │ ├── app.ts │ │ └── features │ │ │ ├── about │ │ │ ├── about.config.ts │ │ │ ├── about.css │ │ │ ├── about.html │ │ │ ├── about.routes.ts │ │ │ ├── about.spec.ts │ │ │ ├── about.ts │ │ │ ├── experience │ │ │ │ ├── experience.css │ │ │ │ ├── experience.html │ │ │ │ ├── experience.spec.ts │ │ │ │ └── experience.ts │ │ │ └── skill │ │ │ │ ├── skill.css │ │ │ │ ├── skill.html │ │ │ │ ├── skill.spec.ts │ │ │ │ └── skill.ts │ │ │ ├── contact │ │ │ ├── contact.config.ts │ │ │ ├── contact.css │ │ │ ├── contact.html │ │ │ ├── contact.routes.ts │ │ │ ├── contact.spec.ts │ │ │ ├── contact.ts │ │ │ ├── mailing │ │ │ │ ├── mailing.css │ │ │ │ ├── mailing.html │ │ │ │ ├── mailing.spec.ts │ │ │ │ └── mailing.ts │ │ │ ├── mapping │ │ │ │ ├── mapping.css │ │ │ │ ├── mapping.html │ │ │ │ ├── mapping.spec.ts │ │ │ │ └── mapping.ts │ │ │ └── website │ │ │ │ ├── website.css │ │ │ │ ├── website.html │ │ │ │ ├── website.spec.ts │ │ │ │ └── website.ts │ │ │ ├── home │ │ │ ├── home.css │ │ │ ├── home.html │ │ │ ├── home.spec.ts │ │ │ └── home.ts │ │ │ ├── login │ │ │ ├── login.css │ │ │ ├── login.html │ │ │ ├── login.spec.ts │ │ │ └── login.ts │ │ │ ├── not-found │ │ │ ├── not-found.css │ │ │ ├── not-found.html │ │ │ ├── not-found.spec.ts │ │ │ └── not-found.ts │ │ │ ├── signup │ │ │ ├── signup.css │ │ │ ├── signup.html │ │ │ ├── signup.spec.ts │ │ │ └── signup.ts │ │ │ └── tutorials │ │ │ └── example-bootstrap │ │ │ ├── 00-main │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ ├── items.component.ts │ │ │ └── items.ts │ │ │ ├── accordions │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ ├── items.component.spec.ts │ │ │ └── items.component.ts │ │ │ ├── alerts │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── badges │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── blockquotes │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── breadcrumb │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── buttons │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── cards │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── checkbox │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── collapses │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── dropdowns │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── forms │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── list-group │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── pagination │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── progress │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── spinners │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── tables │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ │ │ ├── tutorial.component.css │ │ │ ├── tutorial.component.html │ │ │ ├── tutorial.component.spec.ts │ │ │ ├── tutorial.component.ts │ │ │ ├── tutorial.config.ts │ │ │ ├── tutorial.routes.ts │ │ │ └── typography │ │ │ ├── items.component.css │ │ │ ├── items.component.html │ │ │ └── items.component.ts │ ├── assets │ │ ├── .gitkeep │ │ └── params │ │ │ ├── css │ │ │ ├── fonts.googleapis.css │ │ │ └── fonts.googleapis.min.css │ │ │ ├── images │ │ │ ├── example-bootstrap │ │ │ │ └── movie-screen.jpg │ │ │ └── logo │ │ │ │ ├── ganatan-logo.png │ │ │ │ └── ganatan-logo@2x.png │ │ │ └── js │ │ │ ├── popovers.js │ │ │ ├── toasts.js │ │ │ └── tooltips.js │ ├── environments │ │ ├── environment.development.ts │ │ └── environment.ts │ ├── index.html │ ├── main.ts │ └── styles.css ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── ui │ ├── assets │ ├── bootstrap │ │ ├── css │ │ │ ├── bootstrap-grid.css │ │ │ ├── bootstrap-grid.css.map │ │ │ ├── bootstrap-grid.min.css │ │ │ ├── bootstrap-grid.min.css.map │ │ │ ├── bootstrap-grid.rtl.css │ │ │ ├── bootstrap-grid.rtl.css.map │ │ │ ├── bootstrap-grid.rtl.min.css │ │ │ ├── bootstrap-grid.rtl.min.css.map │ │ │ ├── bootstrap-reboot.css │ │ │ ├── bootstrap-reboot.css.map │ │ │ ├── bootstrap-reboot.min.css │ │ │ ├── bootstrap-reboot.min.css.map │ │ │ ├── bootstrap-reboot.rtl.css │ │ │ ├── bootstrap-reboot.rtl.css.map │ │ │ ├── bootstrap-reboot.rtl.min.css │ │ │ ├── bootstrap-reboot.rtl.min.css.map │ │ │ ├── bootstrap-utilities.css │ │ │ ├── bootstrap-utilities.css.map │ │ │ ├── bootstrap-utilities.min.css │ │ │ ├── bootstrap-utilities.min.css.map │ │ │ ├── bootstrap-utilities.rtl.css │ │ │ ├── bootstrap-utilities.rtl.css.map │ │ │ ├── bootstrap-utilities.rtl.min.css │ │ │ ├── bootstrap-utilities.rtl.min.css.map │ │ │ ├── bootstrap.css │ │ │ ├── bootstrap.css.map │ │ │ ├── bootstrap.min.css │ │ │ ├── bootstrap.min.css.map │ │ │ ├── bootstrap.rtl.css │ │ │ ├── bootstrap.rtl.css.map │ │ │ ├── bootstrap.rtl.min.css │ │ │ └── bootstrap.rtl.min.css.map │ │ └── js │ │ │ ├── bootstrap.bundle.js │ │ │ ├── bootstrap.bundle.js.map │ │ │ ├── bootstrap.bundle.min.js │ │ │ ├── bootstrap.bundle.min.js.map │ │ │ ├── bootstrap.esm.js │ │ │ ├── bootstrap.esm.js.map │ │ │ ├── bootstrap.esm.min.js │ │ │ ├── bootstrap.esm.min.js.map │ │ │ ├── bootstrap.js │ │ │ ├── bootstrap.js.map │ │ │ ├── bootstrap.min.js │ │ │ └── bootstrap.min.js.map │ ├── fontawesome │ │ ├── css │ │ │ ├── all.css │ │ │ ├── all.min.css │ │ │ ├── brands.css │ │ │ ├── brands.min.css │ │ │ ├── fontawesome.css │ │ │ ├── fontawesome.min.css │ │ │ ├── regular.css │ │ │ ├── regular.min.css │ │ │ ├── solid.css │ │ │ ├── solid.min.css │ │ │ ├── svg-with-js.css │ │ │ ├── svg-with-js.min.css │ │ │ ├── v4-font-face.css │ │ │ ├── v4-font-face.min.css │ │ │ ├── v4-shims.css │ │ │ ├── v4-shims.min.css │ │ │ ├── v5-font-face.css │ │ │ └── v5-font-face.min.css │ │ ├── js │ │ │ ├── all.js │ │ │ ├── all.min.js │ │ │ ├── brands.js │ │ │ ├── brands.min.js │ │ │ ├── conflict-detection.js │ │ │ ├── conflict-detection.min.js │ │ │ ├── fontawesome.js │ │ │ ├── fontawesome.min.js │ │ │ ├── regular.js │ │ │ ├── regular.min.js │ │ │ ├── solid.js │ │ │ ├── solid.min.js │ │ │ ├── v4-shims.js │ │ │ └── v4-shims.min.js │ │ └── webfonts │ │ │ ├── fa-brands-400.ttf │ │ │ ├── fa-brands-400.woff2 │ │ │ ├── fa-regular-400.ttf │ │ │ ├── fa-regular-400.woff2 │ │ │ ├── fa-solid-900.ttf │ │ │ ├── fa-solid-900.woff2 │ │ │ ├── fa-v4compatibility.ttf │ │ │ └── fa-v4compatibility.woff2 │ └── params │ │ ├── css │ │ ├── body.css │ │ ├── fonts.googleapis.css │ │ ├── fonts.googleapis.min.css │ │ ├── footer.css │ │ └── header.css │ │ ├── images │ │ └── logo │ │ │ ├── ganatan-logo.png │ │ │ └── ganatan-logo@2x.png │ │ └── js │ │ ├── popovers.js │ │ ├── toasts.js │ │ └── tooltips.js │ └── home.html ├── frontend-react ├── .eslintrc.json ├── .gitignore ├── nginx.conf ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── server.js └── src │ ├── app │ ├── app-routing.js │ ├── app.css │ ├── app.js │ ├── app.test.js │ └── modules │ │ ├── application │ │ └── example-bootstrap │ │ │ ├── 00-main │ │ │ ├── main.css │ │ │ └── main.js │ │ │ ├── accordions │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── alerts │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── badges │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── blockquotes │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── breadcrumb │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── buttons │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── cards │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── checkbox │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── collapses │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── dropdowns │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── example-bootstrap-routing.js │ │ │ ├── example-bootstrap.css │ │ │ ├── example-bootstrap.js │ │ │ ├── forms │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── list-group │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── modal │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── pagination │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── popovers │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── progress │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── spinners │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── tables │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── toasts │ │ │ ├── items.css │ │ │ └── items.js │ │ │ ├── tooltips │ │ │ ├── items.css │ │ │ └── items.js │ │ │ └── typography │ │ │ ├── items.css │ │ │ └── items.js │ │ └── general │ │ ├── about │ │ ├── about.css │ │ └── about.js │ │ ├── contact │ │ ├── contact-routing.js │ │ ├── contact.css │ │ ├── contact.js │ │ ├── mailing │ │ │ ├── mailing.css │ │ │ └── mailing.js │ │ ├── mapping │ │ │ ├── mapping.css │ │ │ └── mapping.js │ │ └── website │ │ │ ├── website.css │ │ │ └── website.js │ │ ├── home │ │ ├── home.css │ │ └── home.js │ │ ├── login │ │ ├── login.css │ │ └── login.js │ │ ├── not-found │ │ ├── not-found.css │ │ └── not-found.js │ │ └── signup │ │ ├── signup.css │ │ └── signup.js │ ├── assets │ ├── .gitkeep │ └── params │ │ ├── css │ │ ├── fonts.googleapis.css │ │ └── fonts.googleapis.min.css │ │ └── images │ │ ├── example-bootstrap │ │ └── movie-screen.jpg │ │ └── logo │ │ ├── ganatan-logo.png │ │ └── ganatan-logo@2x.png │ ├── environments │ └── environment.js │ ├── index.css │ ├── index.js │ ├── reportWebVitals.js │ └── setupTests.js └── img └── ganatan-about-github.png /frontend-angular-19/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | ij_typescript_use_double_quotes = false 14 | 15 | [*.md] 16 | max_line_length = off 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /frontend-angular-19/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /frontend-angular-19/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2017-2025 Ganatan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /frontend-angular-19/README.md: -------------------------------------------------------------------------------- 1 | 2 | ### Installation 3 | * `npm install` (installing dependencies) 4 | * `npm outdated` (verifying dependencies) 5 | 6 | ### Developpement 7 | * `npm run start` 8 | * in your browser [http://localhost:4200](http://localhost:4200) 9 | 10 | ## Linter 11 | * `npm run lint` 12 | 13 | ## Tests 14 | * `npm run test` 15 | * `npm run coverage` 16 | 17 | ### Compilation 18 | * `npm run build` ( without SSR) 19 | 20 | ### Production 21 | * `npm run serve` 22 | * in your browser [http://localhost:4000](http://localhost:4000) 23 | 24 | 25 | ### Author 26 | * Author : danny 27 | -------------------------------------------------------------------------------- /frontend-angular-19/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | const eslint = require("@eslint/js"); 3 | const tseslint = require("typescript-eslint"); 4 | const angular = require("angular-eslint"); 5 | 6 | module.exports = tseslint.config( 7 | { 8 | files: ["**/*.ts"], 9 | extends: [ 10 | eslint.configs.recommended, 11 | ...tseslint.configs.recommended, 12 | ...tseslint.configs.stylistic, 13 | ...angular.configs.tsRecommended, 14 | ], 15 | processor: angular.processInlineTemplates, 16 | rules: { 17 | "@angular-eslint/directive-selector": [ 18 | "error", 19 | { 20 | type: "attribute", 21 | prefix: "app", 22 | style: "camelCase", 23 | }, 24 | ], 25 | "@angular-eslint/component-selector": [ 26 | "error", 27 | { 28 | type: "element", 29 | prefix: "app", 30 | style: "kebab-case", 31 | }, 32 | ], 33 | "no-undefined": "error", 34 | "no-var": "error", 35 | "prefer-const": "error", 36 | "func-names": "error", 37 | "id-length": "error", 38 | "newline-before-return": "error", 39 | "space-before-blocks": "error", 40 | "no-alert": "error" 41 | }, 42 | }, 43 | { 44 | files: ["**/*.html"], 45 | extends: [ 46 | ...angular.configs.templateRecommended, 47 | ...angular.configs.templateAccessibility, 48 | ], 49 | rules: {}, 50 | } 51 | ); 52 | -------------------------------------------------------------------------------- /frontend-angular-19/nginx.conf: -------------------------------------------------------------------------------- 1 | user www-data; 2 | worker_processes auto; 3 | pid /run/nginx.pid; 4 | error_log /var/log/nginx/error.log; 5 | include /etc/nginx/modules-enabled/*.conf; 6 | 7 | events { 8 | worker_connections 768; 9 | } 10 | 11 | http { 12 | sendfile on; 13 | tcp_nopush on; 14 | types_hash_max_size 2048; 15 | 16 | include /etc/nginx/mime.types; 17 | default_type application/octet-stream; 18 | 19 | ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE 20 | ssl_prefer_server_ciphers on; 21 | 22 | access_log /var/log/nginx/access.log; 23 | gzip on; 24 | include /etc/nginx/conf.d/*.conf; 25 | server { 26 | listen 80 default_server; 27 | listen [::]:80 default_server; 28 | 29 | root /var/www/html; 30 | index index.html index.htm index.nginx-debian.html; 31 | server_name _; 32 | location / { 33 | try_files $uri $uri/ =404; 34 | } 35 | 36 | } 37 | } -------------------------------------------------------------------------------- /frontend-angular-19/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-starter", 3 | "version": "19.2.10", 4 | "scripts": { 5 | "ng": "ng", 6 | "dev": "ng serve --port 4200", 7 | "start": "ng serve --port 4200", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development", 10 | "test": "ng test", 11 | "coverage": "ng test --no-watch --code-coverage", 12 | "lint": "ng lint", 13 | "serve": "node server.js" 14 | }, 15 | "private": true, 16 | "dependencies": { 17 | "@angular/animations": "19.2.10", 18 | "@angular/common": "19.2.10", 19 | "@angular/compiler": "19.2.10", 20 | "@angular/core": "19.2.10", 21 | "@angular/forms": "19.2.10", 22 | "@angular/platform-browser": "19.2.10", 23 | "@angular/platform-browser-dynamic": "19.2.10", 24 | "@angular/router": "19.2.10", 25 | "@fortawesome/fontawesome-free": "6.7.2", 26 | "bootstrap": "5.3.6", 27 | "rxjs": "7.8.2", 28 | "tslib": "2.8.1", 29 | "zone.js": "0.15.0" 30 | }, 31 | "devDependencies": { 32 | "@angular-devkit/build-angular": "19.2.11", 33 | "@angular/cli": "19.2.11", 34 | "@angular/compiler-cli": "19.2.10", 35 | "@types/jasmine": "5.1.8", 36 | "angular-eslint": "19.4.0", 37 | "eslint": "9.26.0", 38 | "jasmine-core": "5.7.1", 39 | "karma": "6.4.4", 40 | "karma-chrome-launcher": "3.2.0", 41 | "karma-coverage": "2.2.1", 42 | "karma-jasmine": "5.1.0", 43 | "karma-jasmine-html-reporter": "2.1.0", 44 | "typescript": "5.6.3", 45 | "typescript-eslint": "8.32.1" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /frontend-angular-19/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/public/favicon.ico -------------------------------------------------------------------------------- /frontend-angular-19/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const path = require('path'); 3 | const app = express(); 4 | 5 | app.use(express.static(path.join(__dirname, 'dist/angular-starter/browser'))); 6 | 7 | app.get('/*', function (req, res) { 8 | res.sendFile(path.join(__dirname, 'dist/angular-starter/browser', 'index.html')); 9 | }); 10 | 11 | const port = 4000; 12 | app.listen(port, () => { 13 | console.log(`Example app listening on port ${port}`) 14 | }) 15 | 16 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .navbar.navbar-dark .navbar-nav .nav-item .nav-link { 2 | color: white; 3 | font-weight: 500; 4 | border-top: 1px solid #09238d; 5 | border-bottom: 1px solid #09238d; 6 | } 7 | 8 | .navbar.navbar-dark .navbar-nav .nav-item .nav-link:hover { 9 | color: yellow; 10 | border-top: 1px solid yellow; 11 | border-bottom: 1px solid yellow; 12 | } 13 | 14 | .nga-navbar { 15 | -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 11px 10px 0 rgba(0, 0, 0, 0.12); 16 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 11px 10px 0 rgba(0, 0, 0, 0.12); 17 | background-color: #09238d; 18 | } 19 | 20 | .nga-navbar-logo { 21 | font-weight: 700; 22 | } 23 | 24 | .nga-navbar-logo:hover { 25 | color: rgba(255, 255, 255, 0.75); 26 | } 27 | 28 | .nga-logo { 29 | font-weight: 700; 30 | } 31 | 32 | .nga-logo:hover { 33 | color: rgba(255, 255, 255, 0.75); 34 | } 35 | 36 | .nga-footer { 37 | background-color: #212121; 38 | color: white; 39 | } 40 | 41 | .nga-footer a { 42 | color: white; 43 | text-decoration: none 44 | } 45 | 46 | .nga-footer a:hover, 47 | .nga-footer a:focus { 48 | color: yellow; 49 | text-decoration: underline; 50 | } 51 | 52 | .nga-footer .hint { 53 | background-color: #1976d2; 54 | } 55 | 56 | .nga-footer .hint:hover { 57 | opacity: 0.8; 58 | } -------------------------------------------------------------------------------- /frontend-angular-19/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | import { ActivatedRoute } from '@angular/router'; 5 | 6 | describe('AppComponent', () => { 7 | beforeEach(async () => { 8 | await TestBed.configureTestingModule({ 9 | imports: [AppComponent], 10 | providers: [ 11 | { 12 | provide: ActivatedRoute, 13 | useValue: {} 14 | } 15 | ] 16 | }).compileComponents(); 17 | }); 18 | 19 | it('should create the app', () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.componentInstance; 22 | expect(app).toBeTruthy(); 23 | }); 24 | 25 | it(`should have the 'angular-starter' title`, () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | const app = fixture.componentInstance; 28 | expect(app.title).toEqual('angular-routing'); 29 | }); 30 | 31 | }); 32 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterLink, RouterOutlet } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | imports: [CommonModule, RouterLink, RouterOutlet], 8 | templateUrl: './app.component.html', 9 | styleUrl: './app.component.css' 10 | }) 11 | export class AppComponent implements OnInit { 12 | title = 'angular-routing'; 13 | footerUrl = 'https://www.ganatan.com'; 14 | footerLink = 'www.ganatan.com'; 15 | ngOnInit(): void { 16 | 17 | const navMain = document.getElementById('navbarCollapse'); 18 | if (navMain) { 19 | navMain.onclick = function onClick() { 20 | if (navMain) { 21 | navMain.classList.remove("show"); 22 | } 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.routes'; 5 | 6 | export const appConfig: ApplicationConfig = { 7 | providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { HomeComponent } from './features/home/home.component'; 4 | import { NotFoundComponent } from './features/not-found/not-found.component'; 5 | 6 | export const routes: Routes = [ 7 | { path: '', component: HomeComponent, }, 8 | 9 | { 10 | path: 'bootstrap', 11 | loadChildren: () => import(`./features/tutorials/example-bootstrap/tutorial.routes`) 12 | .then(routes => routes.routes) 13 | }, 14 | 15 | { 16 | path: 'login', 17 | loadComponent: () => import(`./features/login/login.component`) 18 | .then(mod => mod.LoginComponent) 19 | }, 20 | { 21 | path: 'signup', 22 | loadComponent: () => import(`./features/signup/signup.component`) 23 | .then(mod => mod.SignupComponent) 24 | }, 25 | 26 | { 27 | path: 'contact', 28 | loadChildren: () => import(`./features/contact/contact.routes`) 29 | .then(routes => routes.routes) 30 | }, 31 | 32 | { 33 | path: 'about', 34 | loadChildren: () => import('./features/about/about.routes') 35 | .then(routes => routes.routes) 36 | }, 37 | 38 | { path: '**', component: NotFoundComponent } 39 | ]; -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/about/about.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/about/about.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/about/about.component.html: -------------------------------------------------------------------------------- 1 |
2 |

about works!

3 | 7 |

Child Routes Result

8 | 9 |
-------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/about/about.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AboutComponent } from './about.component'; 4 | import { ActivatedRoute } from '@angular/router'; 5 | 6 | describe('AboutComponent', () => { 7 | let component: AboutComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [AboutComponent], 13 | providers: [ 14 | { 15 | provide: ActivatedRoute, 16 | useValue: {} 17 | } 18 | ] 19 | }) 20 | .compileComponents(); 21 | 22 | fixture = TestBed.createComponent(AboutComponent); 23 | component = fixture.componentInstance; 24 | fixture.detectChanges(); 25 | }); 26 | 27 | it('should create', () => { 28 | expect(component).toBeTruthy(); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/about/about.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterLink, RouterOutlet } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-about', 7 | imports: [CommonModule, RouterLink, RouterOutlet], 8 | templateUrl: './about.component.html', 9 | styleUrl: './about.component.css' 10 | }) 11 | export class AboutComponent { 12 | 13 | } 14 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/about/about.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './about.routes'; 5 | 6 | export const aboutConfig: ApplicationConfig = { 7 | providers: [provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/about/about.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { AboutComponent } from './about.component'; 4 | 5 | export const routes: Routes = [ 6 | { 7 | path: '', component: AboutComponent, children: [ 8 | { 9 | path: '', 10 | loadComponent: () => import(`./experience/experience.component`) 11 | .then(mod => mod.ExperienceComponent) 12 | }, 13 | { 14 | path: 'experience', 15 | loadComponent: () => import(`./experience/experience.component`) 16 | .then(mod => mod.ExperienceComponent) 17 | }, 18 | { 19 | path: 'skill', 20 | loadComponent: () => import(`./skill/skill.component`) 21 | .then(mod => mod.SkillComponent) 22 | }, 23 | 24 | { 25 | path: '**', 26 | loadComponent: () => import(`./experience/experience.component`) 27 | .then(mod => mod.ExperienceComponent) 28 | }, 29 | 30 | ] 31 | }, 32 | ]; -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/about/experience/experience.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/about/experience/experience.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/about/experience/experience.component.html: -------------------------------------------------------------------------------- 1 |

experience works!

2 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/about/experience/experience.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ExperienceComponent } from './experience.component'; 4 | 5 | describe('ExperienceComponent', () => { 6 | let component: ExperienceComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [ExperienceComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(ExperienceComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/about/experience/experience.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-experience', 5 | imports: [], 6 | templateUrl: './experience.component.html', 7 | styleUrl: './experience.component.css' 8 | }) 9 | export class ExperienceComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/about/skill/skill.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/about/skill/skill.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/about/skill/skill.component.html: -------------------------------------------------------------------------------- 1 |

skill works!

2 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/about/skill/skill.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SkillComponent } from './skill.component'; 4 | 5 | describe('SkillComponent', () => { 6 | let component: SkillComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [SkillComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(SkillComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/about/skill/skill.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-skill', 5 | imports: [], 6 | templateUrl: './skill.component.html', 7 | styleUrl: './skill.component.css' 8 | }) 9 | export class SkillComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/contact.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/contact/contact.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/contact.component.html: -------------------------------------------------------------------------------- 1 |
2 |

contact works!

3 | 8 |

Child Routes Result

9 | 10 |
-------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/contact.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ContactComponent } from './contact.component'; 4 | import { ActivatedRoute } from '@angular/router'; 5 | 6 | describe('ContactComponent', () => { 7 | let component: ContactComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [ContactComponent], 13 | providers: [ 14 | { 15 | provide: ActivatedRoute, 16 | useValue: {} 17 | } 18 | ] 19 | }) 20 | .compileComponents(); 21 | 22 | fixture = TestBed.createComponent(ContactComponent); 23 | component = fixture.componentInstance; 24 | fixture.detectChanges(); 25 | }); 26 | 27 | it('should create', () => { 28 | expect(component).toBeTruthy(); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/contact.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterLink, RouterOutlet } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-contact', 7 | imports: [CommonModule, RouterLink, RouterOutlet], 8 | templateUrl: './contact.component.html', 9 | styleUrl: './contact.component.css' 10 | }) 11 | export class ContactComponent { 12 | 13 | } 14 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/contact.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './contact.routes'; 5 | 6 | export const contactConfig: ApplicationConfig = { 7 | providers: [provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/contact.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { ContactComponent } from './contact.component'; 4 | 5 | export const routes: Routes = [ 6 | { 7 | path: '', component: ContactComponent, children: [ 8 | { 9 | path: '', 10 | loadComponent: () => import(`./mailing/mailing.component`) 11 | .then(mod => mod.MailingComponent) 12 | }, 13 | { 14 | path: 'mapping', 15 | loadComponent: () => import(`./mapping/mapping.component`) 16 | .then(mod => mod.MappingComponent) 17 | }, 18 | { 19 | path: 'website', 20 | loadComponent: () => import(`./website/website.component`) 21 | .then(mod => mod.WebsiteComponent) 22 | }, 23 | 24 | { 25 | path: '**', 26 | loadComponent: () => import(`./mailing/mailing.component`) 27 | .then(mod => mod.MailingComponent) 28 | }, 29 | 30 | ] 31 | }, 32 | ]; -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/mailing/mailing.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/contact/mailing/mailing.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/mailing/mailing.component.html: -------------------------------------------------------------------------------- 1 |

mailing works!

2 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/mailing/mailing.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MailingComponent } from './mailing.component'; 4 | 5 | describe('MailingComponent', () => { 6 | let component: MailingComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [MailingComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(MailingComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/mailing/mailing.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-mailing', 5 | imports: [], 6 | templateUrl: './mailing.component.html', 7 | styleUrl: './mailing.component.css' 8 | }) 9 | export class MailingComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/mapping/mapping.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/contact/mapping/mapping.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/mapping/mapping.component.html: -------------------------------------------------------------------------------- 1 |

mapping works!

2 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/mapping/mapping.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MappingComponent } from './mapping.component'; 4 | 5 | describe('MappingComponent', () => { 6 | let component: MappingComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [MappingComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(MappingComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/mapping/mapping.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-mapping', 5 | imports: [], 6 | templateUrl: './mapping.component.html', 7 | styleUrl: './mapping.component.css' 8 | }) 9 | export class MappingComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/website/website.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/contact/website/website.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/website/website.component.html: -------------------------------------------------------------------------------- 1 |

website works!

2 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/website/website.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { WebsiteComponent } from './website.component'; 4 | 5 | describe('WebsiteComponent', () => { 6 | let component: WebsiteComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [WebsiteComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(WebsiteComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/contact/website/website.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-website', 5 | imports: [], 6 | templateUrl: './website.component.html', 7 | styleUrl: './website.component.css' 8 | }) 9 | export class WebsiteComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/home/home.component.css: -------------------------------------------------------------------------------- 1 | .nga-card { 2 | display: block; 3 | background-color: rgba(255, 255, 255, .8); 4 | box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); 5 | border-radius: 2px; 6 | transition: all .2s ease-in-out; 7 | cursor: pointer; 8 | } 9 | 10 | .nga-card:hover { 11 | transform: translateY(-3px); 12 | box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23); 13 | } 14 | 15 | .nga-card a { 16 | color: black; 17 | text-decoration: none; 18 | } 19 | 20 | .nga-card a:hover { 21 | color: #0d6efd; 22 | text-decoration: none; 23 | } 24 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | import { ActivatedRoute } from '@angular/router'; 5 | 6 | describe('HomeComponent', () => { 7 | let component: HomeComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [HomeComponent], 13 | providers: [ 14 | { 15 | provide: ActivatedRoute, 16 | useValue: {} 17 | } 18 | ] 19 | }) 20 | .compileComponents(); 21 | 22 | fixture = TestBed.createComponent(HomeComponent); 23 | component = fixture.componentInstance; 24 | fixture.detectChanges(); 25 | }); 26 | 27 | it('should create', () => { 28 | expect(component).toBeTruthy(); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { environment } from '../../../environments/environment'; 3 | import { RouterLink } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-home', 7 | imports: [RouterLink], 8 | templateUrl: './home.component.html', 9 | styleUrl: './home.component.css' 10 | }) 11 | export class HomeComponent { 12 | name = environment.application.name; 13 | version = environment.application.version; 14 | bootstrap = environment.application.bootstrap; 15 | fontawesome = environment.application.fontawesome; 16 | } 17 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/login/login.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/login/login.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/login/login.component.html: -------------------------------------------------------------------------------- 1 |

login works!

2 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/login/login.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { LoginComponent } from './login.component'; 4 | 5 | describe('LoginComponent', () => { 6 | let component: LoginComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [LoginComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(LoginComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/login/login.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-login', 5 | templateUrl: './login.component.html', 6 | styleUrl: './login.component.css' 7 | }) 8 | export class LoginComponent { 9 | 10 | } -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/not-found/not-found.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/not-found/not-found.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/not-found/not-found.component.html: -------------------------------------------------------------------------------- 1 |

not-found works!

2 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/not-found/not-found.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NotFoundComponent } from './not-found.component'; 4 | 5 | describe('NotFoundComponent', () => { 6 | let component: NotFoundComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [NotFoundComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(NotFoundComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/not-found/not-found.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-not-found', 5 | imports: [], 6 | templateUrl: './not-found.component.html', 7 | styleUrl: './not-found.component.css' 8 | }) 9 | export class NotFoundComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/signup/signup.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/signup/signup.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/signup/signup.component.html: -------------------------------------------------------------------------------- 1 |

signup works!

2 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/signup/signup.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SignupComponent } from './signup.component'; 4 | 5 | describe('SignupComponent', () => { 6 | let component: SignupComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [SignupComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(SignupComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/signup/signup.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-signup', 5 | templateUrl: './signup.component.html', 6 | styleUrl: './signup.component.css' 7 | }) 8 | export class SignupComponent { 9 | 10 | } -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/00-main/items.component.css: -------------------------------------------------------------------------------- 1 | .card { 2 | -webkit-transition: -webkit-transform 1s; 3 | -moz-transition: -moz-transform 1s; 4 | -o-transition: -o-transform 1s; 5 | transition: transform 1s; 6 | -webkit-transform-style: preserve-3d; 7 | -moz-transform-style: preserve-3d; 8 | -o-transform-style: preserve-3d; 9 | transform-style: preserve-3d; 10 | position: relative; 11 | } 12 | 13 | .nga-card-header { 14 | padding: 0.5rem 1rem; 15 | margin-bottom: 0; 16 | background-color: white; 17 | } 18 | 19 | .nga-card-rotate { 20 | -webkit-perspective: 800px; 21 | -moz-perspective: 800px; 22 | -o-perspective: 800px; 23 | perspective: 800px; 24 | margin-bottom: 30px; 25 | } 26 | 27 | .nga-card-rotate a { 28 | text-decoration: none; 29 | } 30 | 31 | .nga-card-rotate:not(.manual-flip):hover .card, 32 | .nga-card-rotate.hover.manual-flip .card { 33 | -webkit-transform: rotateY(180deg); 34 | -moz-transform: rotateY(180deg); 35 | -o-transform: rotateY(180deg); 36 | transform: rotateY(180deg); 37 | } -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/00-main/items.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Bootstrap Features

4 |
5 |
6 | 7 |
8 |
9 |
10 | 11 |
12 |
13 |
14 |
15 |
{{ item.name }}
16 |
17 |
18 | 19 |
20 |
21 |
22 |
23 | 24 |
25 |
26 |
-------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/00-main/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterLink } from '@angular/router'; 4 | import { ITEMS } from './items'; 5 | 6 | @Component({ 7 | selector: 'app-00-main', 8 | imports: [CommonModule, RouterLink], 9 | templateUrl: './items.component.html', 10 | styleUrls: ['./items.component.css'] 11 | }) 12 | export class ItemsComponent { 13 | items = ITEMS; 14 | } 15 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/accordions/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/tutorials/example-bootstrap/accordions/items.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/accordions/items.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ItemsComponent } from './items.component'; 4 | 5 | describe('AccordionsComponent', () => { 6 | let component: ItemsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [ItemsComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(ItemsComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/accordions/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-accordions', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/alerts/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/tutorials/example-bootstrap/alerts/items.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/alerts/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-alerts', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/badges/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/tutorials/example-bootstrap/badges/items.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/badges/items.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Badges

4 |

Example heading New

5 |

Example heading New

6 |

Example heading New

7 |

Example heading New

8 |
Example heading New
9 |
Example heading New
10 |
11 | 14 |
15 | 22 |
23 | 29 |
30 | Primary 31 | Secondary 32 | Success 33 | Danger 34 | Warning 35 | Info 36 | Light 37 | Dark 38 |
39 |
40 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/badges/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-badge', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/blockquotes/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/tutorials/example-bootstrap/blockquotes/items.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/blockquotes/items.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Blockquotes

6 |
7 |

A well-known quote, contained in a blockquote element.

8 |
9 |
10 |
11 |
12 |

A well-known quote, contained in a blockquote element.

13 |
14 |
15 | Someone famous in Source Title 16 |
17 |
18 |
19 |
20 |
21 |

A well-known quote, contained in a blockquote element.

22 |
23 |
24 | Someone famous in Source Title 25 |
26 |
27 |
28 |
29 |
30 |

A well-known quote, contained in a blockquote element.

31 |
32 |
33 | Someone famous in Source Title 34 |
35 |
36 |
37 |
38 |
39 |
40 |
-------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/blockquotes/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-blockquotes', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/breadcrumb/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/tutorials/example-bootstrap/breadcrumb/items.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/breadcrumb/items.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Breadcrumb

4 | 9 | 15 | 22 |
23 |
24 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/breadcrumb/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-breadcrumb', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/buttons/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/tutorials/example-bootstrap/buttons/items.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/buttons/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-buttons', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/cards/items.component.css: -------------------------------------------------------------------------------- 1 | .nga-card { 2 | -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 3 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) 4 | } 5 | 6 | .nga-card-box { 7 | display: block; 8 | background-color: rgba(255, 255, 255, .8); 9 | box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); 10 | border-radius: 2px; 11 | transition: all .2s ease-in-out; 12 | cursor: pointer; 13 | } 14 | 15 | .nga-card-box:hover { 16 | box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23); 17 | } -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/cards/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-alerts', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/checkbox/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/tutorials/example-bootstrap/checkbox/items.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/checkbox/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-collapse', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/collapses/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/tutorials/example-bootstrap/collapses/items.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/collapses/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | // eslint-disable-next-line 4 | declare const bootstrap: any; 5 | 6 | @Component({ 7 | selector: 'app-collapse', 8 | templateUrl: './items.component.html', 9 | styleUrls: ['./items.component.css'] 10 | }) 11 | export class ItemsComponent { 12 | 13 | closeCollapse() { 14 | const myCollapse = document.getElementById('collapseWidthJavascript') 15 | new bootstrap.Collapse(myCollapse, { 16 | hide: true, 17 | }) 18 | } 19 | 20 | showCollapse() { 21 | const myCollapse = document.getElementById('collapseWidthJavascript') 22 | new bootstrap.Collapse(myCollapse, { 23 | show: true, 24 | }) 25 | } 26 | 27 | toggleCollapse() { 28 | const myCollapse = document.getElementById('collapseWidthJavascript') 29 | new bootstrap.Collapse(myCollapse, { 30 | toggle: true, 31 | }) 32 | } 33 | 34 | } 35 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/dropdowns/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/tutorials/example-bootstrap/dropdowns/items.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/dropdowns/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dropdowns', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/forms/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/tutorials/example-bootstrap/forms/items.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/forms/items.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Forms

4 |
5 |
6 | 7 | 8 |
9 |
10 | 11 | 18 |
19 |
20 | 21 | 28 |
29 |
30 | 31 | 32 |
33 |
34 |
35 |
-------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/forms/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-forms', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/list-group/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/tutorials/example-bootstrap/list-group/items.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/list-group/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-list-group', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/pagination/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/tutorials/example-bootstrap/pagination/items.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/pagination/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-pagination', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/progress/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/tutorials/example-bootstrap/progress/items.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/progress/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-progress', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/spinners/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/tutorials/example-bootstrap/spinners/items.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/spinners/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-spinners', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/tables/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/tutorials/example-bootstrap/tables/items.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/tables/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-pagination', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/tutorial.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TutorialComponent } from './tutorial.component'; 4 | import { ActivatedRoute } from '@angular/router'; 5 | 6 | describe('TutorialComponent', () => { 7 | let component: TutorialComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [TutorialComponent], 13 | providers: [ 14 | { 15 | provide: ActivatedRoute, 16 | useValue: {} 17 | } 18 | ] 19 | }) 20 | .compileComponents(); 21 | 22 | fixture = TestBed.createComponent(TutorialComponent); 23 | component = fixture.componentInstance; 24 | fixture.detectChanges(); 25 | }); 26 | 27 | it('should create', () => { 28 | expect(component).toBeTruthy(); 29 | }); 30 | }); 31 | 32 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/tutorial.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterLink, RouterOutlet } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-example-bootstrap', 7 | imports: [CommonModule, RouterLink, RouterOutlet], 8 | templateUrl: './tutorial.component.html', 9 | styleUrls: ['./tutorial.component.css'] 10 | }) 11 | export class TutorialComponent { 12 | 13 | } 14 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/tutorial.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './tutorial.routes'; 5 | 6 | export const tutorialConfig: ApplicationConfig = { 7 | providers: [provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/typography/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/app/features/tutorials/example-bootstrap/typography/items.component.css -------------------------------------------------------------------------------- /frontend-angular-19/src/app/features/tutorials/example-bootstrap/typography/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-collapse', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/assets/.gitkeep -------------------------------------------------------------------------------- /frontend-angular-19/src/assets/params/images/example-bootstrap/movie-screen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/assets/params/images/example-bootstrap/movie-screen.jpg -------------------------------------------------------------------------------- /frontend-angular-19/src/assets/params/images/logo/ganatan-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/assets/params/images/logo/ganatan-logo.png -------------------------------------------------------------------------------- /frontend-angular-19/src/assets/params/images/logo/ganatan-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/src/assets/params/images/logo/ganatan-logo@2x.png -------------------------------------------------------------------------------- /frontend-angular-19/src/assets/params/js/popovers.js: -------------------------------------------------------------------------------- 1 | var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) 2 | var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { 3 | return new bootstrap.Popover(popoverTriggerEl) 4 | }) 5 | -------------------------------------------------------------------------------- /frontend-angular-19/src/assets/params/js/toasts.js: -------------------------------------------------------------------------------- 1 | var myToastEl = document.getElementById('myToast') 2 | myToastEl.classList.add("show"); 3 | -------------------------------------------------------------------------------- /frontend-angular-19/src/assets/params/js/tooltips.js: -------------------------------------------------------------------------------- 1 | /*var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')) 2 | var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 3 | return new bootstrap.Tooltip(tooltipTriggerEl) 4 | })*/ 5 | 6 | var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) 7 | var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 8 | return new bootstrap.Tooltip(tooltipTriggerEl) 9 | }) 10 | 11 | -------------------------------------------------------------------------------- /frontend-angular-19/src/environments/environment.development.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | application: 3 | { 4 | name: 'angular-bootstrap', 5 | version: 'Angular 19.2.10', 6 | bootstrap: 'Bootstrap 5.3.6', 7 | fontawesome: 'Font Awesome 6.7.1', 8 | } 9 | }; -------------------------------------------------------------------------------- /frontend-angular-19/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | application: 3 | { 4 | name: 'angular-bootstrap', 5 | version: 'Angular 19.2.10', 6 | bootstrap: 'Bootstrap 5.3.6', 7 | fontawesome: 'Font Awesome 6.7.1', 8 | } 9 | }; -------------------------------------------------------------------------------- /frontend-angular-19/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | AngularStarter 7 | 8 | 9 | 10 | 11 | 12 | 13 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /frontend-angular-19/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /frontend-angular-19/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 3.5rem; 3 | font-family: "Roboto", sans-serif; 4 | } -------------------------------------------------------------------------------- /frontend-angular-19/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/app", 7 | "types": [] 8 | }, 9 | "files": [ 10 | "src/main.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /frontend-angular-19/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "compileOnSave": false, 5 | "compilerOptions": { 6 | "outDir": "./dist/out-tsc", 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "isolatedModules": true, 14 | "esModuleInterop": true, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "bundler", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022" 20 | }, 21 | "angularCompilerOptions": { 22 | "enableI18nLegacyMessageIdFormat": false, 23 | "strictInjectionParameters": true, 24 | "strictInputAccessModifiers": true, 25 | "strictTemplates": true 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /frontend-angular-19/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "src/**/*.spec.ts", 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/fontawesome/css/regular.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | :root, :host { 7 | --fa-style-family-classic: 'Font Awesome 6 Free'; 8 | --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free'; } 9 | 10 | @font-face { 11 | font-family: 'Font Awesome 6 Free'; 12 | font-style: normal; 13 | font-weight: 400; 14 | font-display: block; 15 | src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); } 16 | 17 | .far, 18 | .fa-regular { 19 | font-weight: 400; } 20 | -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/fontawesome/css/regular.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | :host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400} -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/fontawesome/css/solid.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | :root, :host { 7 | --fa-style-family-classic: 'Font Awesome 6 Free'; 8 | --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; } 9 | 10 | @font-face { 11 | font-family: 'Font Awesome 6 Free'; 12 | font-style: normal; 13 | font-weight: 900; 14 | font-display: block; 15 | src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); } 16 | 17 | .fas, 18 | .fa-solid { 19 | font-weight: 900; } 20 | -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/fontawesome/css/solid.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | :host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900} -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/fontawesome/css/v4-font-face.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | @font-face { 7 | font-family: 'FontAwesome'; 8 | font-display: block; 9 | src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); } 10 | 11 | @font-face { 12 | font-family: 'FontAwesome'; 13 | font-display: block; 14 | src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); } 15 | 16 | @font-face { 17 | font-family: 'FontAwesome'; 18 | font-display: block; 19 | src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); 20 | unicode-range: U+F003,U+F006,U+F014,U+F016-F017,U+F01A-F01B,U+F01D,U+F022,U+F03E,U+F044,U+F046,U+F05C-F05D,U+F06E,U+F070,U+F087-F088,U+F08A,U+F094,U+F096-F097,U+F09D,U+F0A0,U+F0A2,U+F0A4-F0A7,U+F0C5,U+F0C7,U+F0E5-F0E6,U+F0EB,U+F0F6-F0F8,U+F10C,U+F114-F115,U+F118-F11A,U+F11C-F11D,U+F133,U+F147,U+F14E,U+F150-F152,U+F185-F186,U+F18E,U+F190-F192,U+F196,U+F1C1-F1C9,U+F1D9,U+F1DB,U+F1E3,U+F1EA,U+F1F7,U+F1F9,U+F20A,U+F247-F248,U+F24A,U+F24D,U+F255-F25B,U+F25D,U+F271-F274,U+F278,U+F27B,U+F28C,U+F28E,U+F29C,U+F2B5,U+F2B7,U+F2BA,U+F2BC,U+F2BE,U+F2C0-F2C1,U+F2C3,U+F2D0,U+F2D2,U+F2D4,U+F2DC; } 21 | 22 | @font-face { 23 | font-family: 'FontAwesome'; 24 | font-display: block; 25 | src: url("../webfonts/fa-v4compatibility.woff2") format("woff2"), url("../webfonts/fa-v4compatibility.ttf") format("truetype"); 26 | unicode-range: U+F041,U+F047,U+F065-F066,U+F07D-F07E,U+F080,U+F08B,U+F08E,U+F090,U+F09A,U+F0AC,U+F0AE,U+F0B2,U+F0D0,U+F0D6,U+F0E4,U+F0EC,U+F10A-F10B,U+F123,U+F13E,U+F148-F149,U+F14C,U+F156,U+F15E,U+F160-F161,U+F163,U+F175-F178,U+F195,U+F1F8,U+F219,U+F27A; } 27 | -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/fontawesome/css/v4-font-face.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | @font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a} -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/fontawesome/css/v5-font-face.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | @font-face { 7 | font-family: 'Font Awesome 5 Brands'; 8 | font-display: block; 9 | font-weight: 400; 10 | src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); } 11 | 12 | @font-face { 13 | font-family: 'Font Awesome 5 Free'; 14 | font-display: block; 15 | font-weight: 900; 16 | src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); } 17 | 18 | @font-face { 19 | font-family: 'Font Awesome 5 Free'; 20 | font-display: block; 21 | font-weight: 400; 22 | src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); } 23 | -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/fontawesome/css/v5-font-face.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | @font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")} -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/fontawesome/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/ui/assets/fontawesome/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/fontawesome/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/ui/assets/fontawesome/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/fontawesome/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/ui/assets/fontawesome/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/fontawesome/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/ui/assets/fontawesome/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/fontawesome/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/ui/assets/fontawesome/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/fontawesome/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/ui/assets/fontawesome/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/fontawesome/webfonts/fa-v4compatibility.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/ui/assets/fontawesome/webfonts/fa-v4compatibility.ttf -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/fontawesome/webfonts/fa-v4compatibility.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/ui/assets/fontawesome/webfonts/fa-v4compatibility.woff2 -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/params/css/body.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 3.5rem; 3 | font-family: "Roboto", sans-serif; 4 | } 5 | -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/params/css/footer.css: -------------------------------------------------------------------------------- 1 | .nga-footer { 2 | background-color: #212121; 3 | color: white; 4 | } 5 | 6 | .nga-footer a { 7 | color: white; 8 | text-decoration: none 9 | } 10 | 11 | .nga-footer a:hover, 12 | .nga-footer a:focus { 13 | color: yellow; 14 | text-decoration: underline; 15 | } 16 | 17 | .nga-footer .hint { 18 | background-color: #1976d2; 19 | } 20 | 21 | .nga-footer .hint:hover { 22 | opacity: 0.8; 23 | } 24 | -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/params/css/header.css: -------------------------------------------------------------------------------- 1 | .navbar.navbar-dark .navbar-nav .nav-item .nav-link { 2 | color: white; 3 | font-weight: 500; 4 | border-top: 1px solid #09238d; 5 | border-bottom: 1px solid #09238d; 6 | } 7 | 8 | .navbar.navbar-dark .navbar-nav .nav-item .nav-link:hover { 9 | color: yellow; 10 | border-top: 1px solid yellow; 11 | border-bottom: 1px solid yellow; 12 | } 13 | 14 | .nga-navbar { 15 | -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 11px 10px 0 rgba(0, 0, 0, 0.12); 16 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 11px 10px 0 rgba(0, 0, 0, 0.12); 17 | background-color: #09238d; 18 | } 19 | 20 | .nga-logo { 21 | font-weight: 700; 22 | } 23 | 24 | .nga-logo:hover { 25 | color: rgba(255, 255, 255, 0.75); 26 | } -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/params/images/logo/ganatan-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/ui/assets/params/images/logo/ganatan-logo.png -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/params/images/logo/ganatan-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular-19/ui/assets/params/images/logo/ganatan-logo@2x.png -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/params/js/popovers.js: -------------------------------------------------------------------------------- 1 | var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]')) 2 | var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { 3 | return new bootstrap.Popover(popoverTriggerEl) 4 | }) -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/params/js/toasts.js: -------------------------------------------------------------------------------- 1 | var myToastEl = document.getElementById('myToast') 2 | myToastEl.classList.add("show"); 3 | -------------------------------------------------------------------------------- /frontend-angular-19/ui/assets/params/js/tooltips.js: -------------------------------------------------------------------------------- 1 | var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')) 2 | var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 3 | return new bootstrap.Tooltip(tooltipTriggerEl) 4 | }) 5 | -------------------------------------------------------------------------------- /frontend-angular/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | ij_typescript_use_double_quotes = false 14 | 15 | [*.md] 16 | max_line_length = off 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /frontend-angular/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /frontend-angular/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:22 2 | 3 | WORKDIR /app 4 | 5 | COPY package*.json ./ 6 | 7 | RUN npm install 8 | 9 | COPY . . 10 | 11 | RUN npm run build 12 | 13 | EXPOSE 4000 14 | 15 | CMD ["npm", "run", "serve"] 16 | -------------------------------------------------------------------------------- /frontend-angular/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2017-2025 Ganatan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /frontend-angular/README.md: -------------------------------------------------------------------------------- 1 | ### Installation 2 | * `npm install` (installing dependencies) 3 | * `npm outdated` (verifying dependencies) 4 | 5 | ### Developpement 6 | * `npm run start` 7 | * in your browser [http://localhost:4200](http://localhost:4200) 8 | 9 | ## Linter 10 | * `npm run lint` 11 | 12 | ## Tests 13 | * `npm run test` 14 | * `npm run coverage` 15 | 16 | ### Compilation 17 | * `npm run build` ( without SSR) 18 | 19 | ### Production 20 | * `npm run serve` 21 | * in your browser [http://localhost:4000](http://localhost:4000) 22 | 23 | 24 | ### Author 25 | * Author : danny 26 | -------------------------------------------------------------------------------- /frontend-angular/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | const eslint = require("@eslint/js"); 3 | const tseslint = require("typescript-eslint"); 4 | const angular = require("angular-eslint"); 5 | 6 | module.exports = tseslint.config( 7 | { 8 | files: ["**/*.ts"], 9 | extends: [ 10 | eslint.configs.recommended, 11 | ...tseslint.configs.recommended, 12 | ...tseslint.configs.stylistic, 13 | ...angular.configs.tsRecommended, 14 | ], 15 | processor: angular.processInlineTemplates, 16 | rules: { 17 | "@angular-eslint/directive-selector": [ 18 | "error", 19 | { 20 | type: "attribute", 21 | prefix: "app", 22 | style: "camelCase", 23 | }, 24 | ], 25 | "@angular-eslint/component-selector": [ 26 | "error", 27 | { 28 | type: "element", 29 | prefix: "app", 30 | style: "kebab-case", 31 | }, 32 | ], 33 | "@angular-eslint/component-class-suffix": [ 34 | "error", 35 | { 36 | suffixes: ["","Component"] 37 | } 38 | ], 39 | "no-undefined": "error", 40 | "no-var": "error", 41 | "prefer-const": "error", 42 | "func-names": "error", 43 | "id-length": "error", 44 | "newline-before-return": "error", 45 | "space-before-blocks": "error", 46 | "no-alert": "error" 47 | }, 48 | }, 49 | { 50 | files: ["**/*.html"], 51 | extends: [ 52 | ...angular.configs.templateRecommended, 53 | ...angular.configs.templateAccessibility, 54 | ], 55 | rules: {}, 56 | } 57 | ); 58 | -------------------------------------------------------------------------------- /frontend-angular/nginx.conf: -------------------------------------------------------------------------------- 1 | user www-data; 2 | worker_processes auto; 3 | pid /run/nginx.pid; 4 | error_log /var/log/nginx/error.log; 5 | include /etc/nginx/modules-enabled/*.conf; 6 | 7 | events { 8 | worker_connections 768; 9 | } 10 | 11 | http { 12 | sendfile on; 13 | tcp_nopush on; 14 | types_hash_max_size 2048; 15 | 16 | include /etc/nginx/mime.types; 17 | default_type application/octet-stream; 18 | 19 | ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE 20 | ssl_prefer_server_ciphers on; 21 | 22 | access_log /var/log/nginx/access.log; 23 | gzip on; 24 | include /etc/nginx/conf.d/*.conf; 25 | server { 26 | listen 80 default_server; 27 | listen [::]:80 default_server; 28 | 29 | root /var/www/html; 30 | index index.html index.htm index.nginx-debian.html; 31 | server_name _; 32 | location / { 33 | try_files $uri $uri/ =404; 34 | } 35 | 36 | } 37 | } -------------------------------------------------------------------------------- /frontend-angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-starter", 3 | "version": "20.0.1", 4 | "scripts": { 5 | "ng": "ng", 6 | "dev": "ng serve --port 4200", 7 | "start": "ng serve --port 4200", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development", 10 | "test": "ng test", 11 | "test:headless": "ng test --watch=false --browsers=ChromeHeadless", 12 | "coverage": "ng test --no-watch --code-coverage", 13 | "lint": "ng lint", 14 | "serve": "node server.js", 15 | "docker:list-containers": "docker ps -a", 16 | "docker:list-images": "docker images", 17 | "docker:build": "docker build -t frontend-angular-bootstrap .", 18 | "docker:run": "docker run -p 4000:4000 frontend-angular-bootstrap" 19 | }, 20 | "private": true, 21 | "dependencies": { 22 | "@angular/common": "20.0.1", 23 | "@angular/compiler": "20.0.1", 24 | "@angular/core": "20.0.1", 25 | "@angular/forms": "20.0.1", 26 | "@angular/platform-browser": "20.0.1", 27 | "@angular/router": "20.0.1", 28 | "@fortawesome/fontawesome-free": "6.7.2", 29 | "bootstrap": "5.3.6", 30 | "express": "5.1.0", 31 | "rxjs": "7.8.2", 32 | "tslib": "2.8.1", 33 | "zone.js": "0.15.1" 34 | }, 35 | "devDependencies": { 36 | "@angular/build": "20.0.1", 37 | "@angular/cli": "20.0.1", 38 | "@angular/compiler-cli": "20.0.1", 39 | "@types/jasmine": "5.1.8", 40 | "angular-eslint": "19.7.1", 41 | "eslint": "9.28.0", 42 | "jasmine-core": "5.7.1", 43 | "karma": "6.4.4", 44 | "karma-chrome-launcher": "3.2.0", 45 | "karma-coverage": "2.2.1", 46 | "karma-jasmine": "5.1.0", 47 | "karma-jasmine-html-reporter": "2.1.0", 48 | "typescript": "5.8.3", 49 | "typescript-eslint": "8.33.1" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /frontend-angular/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/public/favicon.ico -------------------------------------------------------------------------------- /frontend-angular/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const path = require('path'); 3 | const app = express(); 4 | 5 | app.use(express.static(path.join(__dirname, 'dist/angular-starter/browser'))); 6 | 7 | app.get('/', function (req, res) { 8 | res.sendFile(path.join(__dirname, 'dist/angular-starter/browser', 'index.html')); 9 | }); 10 | 11 | const port = 4000; 12 | const host = 'localhost'; 13 | app.listen(port, () => { 14 | console.log(`Server running at http://${host}:${port}`); 15 | }) 16 | 17 | -------------------------------------------------------------------------------- /frontend-angular/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.routes'; 5 | 6 | export const appConfig: ApplicationConfig = { 7 | providers: [ 8 | provideBrowserGlobalErrorListeners(), 9 | provideZoneChangeDetection({ eventCoalescing: true }), 10 | provideRouter(routes) 11 | ] 12 | }; 13 | -------------------------------------------------------------------------------- /frontend-angular/src/app/app.css: -------------------------------------------------------------------------------- 1 | .navbar.navbar-dark .navbar-nav .nav-item .nav-link { 2 | color: white; 3 | font-weight: 500; 4 | border-top: 1px solid #09238d; 5 | border-bottom: 1px solid #09238d; 6 | } 7 | 8 | .navbar.navbar-dark .navbar-nav .nav-item .nav-link:hover { 9 | color: yellow; 10 | border-top: 1px solid yellow; 11 | border-bottom: 1px solid yellow; 12 | } 13 | 14 | .nga-navbar { 15 | -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 11px 10px 0 rgba(0, 0, 0, 0.12); 16 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 11px 10px 0 rgba(0, 0, 0, 0.12); 17 | background-color: #09238d; 18 | } 19 | 20 | .nga-navbar-logo { 21 | font-weight: 700; 22 | } 23 | 24 | .nga-navbar-logo:hover { 25 | color: rgba(255, 255, 255, 0.75); 26 | } 27 | 28 | .nga-logo { 29 | font-weight: 700; 30 | } 31 | 32 | .nga-logo:hover { 33 | color: rgba(255, 255, 255, 0.75); 34 | } 35 | 36 | .nga-footer { 37 | background-color: #212121; 38 | color: white; 39 | } 40 | 41 | .nga-footer a { 42 | color: white; 43 | text-decoration: none 44 | } 45 | 46 | .nga-footer a:hover, 47 | .nga-footer a:focus { 48 | color: yellow; 49 | text-decoration: underline; 50 | } 51 | 52 | .nga-footer .hint { 53 | background-color: #1976d2; 54 | } 55 | 56 | .nga-footer .hint:hover { 57 | opacity: 0.8; 58 | } -------------------------------------------------------------------------------- /frontend-angular/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { Home } from './features/home/home'; 4 | import { NotFound } from './features/not-found/not-found'; 5 | 6 | export const routes: Routes = [ 7 | { path: '', component: Home, }, 8 | 9 | { 10 | path: 'bootstrap', 11 | loadChildren: () => import(`./features/tutorials/example-bootstrap/tutorial.routes`) 12 | .then(routes => routes.routes) 13 | }, 14 | 15 | { 16 | path: 'login', 17 | loadComponent: () => import(`./features/login/login`) 18 | .then(mod => mod.Login) 19 | }, 20 | { 21 | path: 'signup', 22 | loadComponent: () => import(`./features/signup/signup`) 23 | .then(mod => mod.Signup) 24 | }, 25 | 26 | { 27 | path: 'contact', 28 | loadChildren: () => import(`./features/contact/contact.routes`) 29 | .then(routes => routes.routes) 30 | }, 31 | 32 | { 33 | path: 'about', 34 | loadChildren: () => import('./features/about/about.routes') 35 | .then(routes => routes.routes) 36 | }, 37 | 38 | { path: '**', component: NotFound } 39 | ]; -------------------------------------------------------------------------------- /frontend-angular/src/app/app.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { App } from './app'; 3 | import { ActivatedRoute } from '@angular/router'; 4 | 5 | describe('App', () => { 6 | beforeEach(async () => { 7 | await TestBed.configureTestingModule({ 8 | imports: [App], 9 | providers: [ 10 | { 11 | provide: ActivatedRoute, 12 | useValue: {} 13 | } 14 | ] 15 | }).compileComponents(); 16 | }); 17 | 18 | it('should create the app', () => { 19 | const fixture = TestBed.createComponent(App); 20 | const app = fixture.componentInstance; 21 | expect(app).toBeTruthy(); 22 | }); 23 | 24 | it('should render title', () => { 25 | const fixture = TestBed.createComponent(App); 26 | const app = fixture.componentInstance; 27 | expect(app.title).toEqual('angular-routing'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /frontend-angular/src/app/app.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterLink, RouterOutlet } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | imports: [CommonModule, RouterLink, RouterOutlet], 8 | templateUrl: './app.html', 9 | styleUrl: './app.css' 10 | }) 11 | export class App implements OnInit { 12 | title = 'angular-routing'; 13 | footerUrl = 'https://www.ganatan.com'; 14 | footerLink = 'www.ganatan.com'; 15 | ngOnInit(): void { 16 | 17 | const navMain = document.getElementById('navbarCollapse'); 18 | if (navMain) { 19 | navMain.onclick = function onClick() { 20 | if (navMain) { 21 | navMain.classList.remove("show"); 22 | } 23 | } 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/about.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './about.routes'; 5 | 6 | export const aboutConfig: ApplicationConfig = { 7 | providers: [provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/about.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/about/about.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/about.html: -------------------------------------------------------------------------------- 1 |
2 |

about works!

3 | 7 |

Child Routes Result

8 | 9 |
-------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/about.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { About } from './about'; 4 | 5 | export const routes: Routes = [ 6 | { 7 | path: '', component: About, children: [ 8 | { 9 | path: '', 10 | loadComponent: () => import(`./experience/experience`) 11 | .then(mod => mod.Experience) 12 | }, 13 | { 14 | path: 'experience', 15 | loadComponent: () => import(`./experience/experience`) 16 | .then(mod => mod.Experience) 17 | }, 18 | { 19 | path: 'skill', 20 | loadComponent: () => import(`./skill/skill`) 21 | .then(mod => mod.Skill) 22 | }, 23 | 24 | { 25 | path: '**', 26 | loadComponent: () => import(`./experience/experience`) 27 | .then(mod => mod.Experience) 28 | }, 29 | 30 | ] 31 | }, 32 | ]; -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/about.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { About } from './about'; 4 | import { ActivatedRoute } from '@angular/router'; 5 | 6 | describe('About', () => { 7 | let component: About; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [About], 13 | providers: [ 14 | { 15 | provide: ActivatedRoute, 16 | useValue: {} 17 | } 18 | ] 19 | }).compileComponents(); 20 | 21 | fixture = TestBed.createComponent(About); 22 | component = fixture.componentInstance; 23 | fixture.detectChanges(); 24 | }); 25 | 26 | it('should create', () => { 27 | expect(component).toBeTruthy(); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/about.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterLink, RouterOutlet } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-about', 7 | imports: [CommonModule, RouterLink, RouterOutlet], 8 | templateUrl: './about.html', 9 | styleUrl: './about.css' 10 | }) 11 | export class About { 12 | 13 | } -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/experience/experience.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/about/experience/experience.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/experience/experience.html: -------------------------------------------------------------------------------- 1 |

experience works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/experience/experience.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Experience } from './experience'; 4 | 5 | describe('Experience', () => { 6 | let component: Experience; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [Experience] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(Experience); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/experience/experience.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-experience', 5 | imports: [], 6 | templateUrl: './experience.html', 7 | styleUrl: './experience.css' 8 | }) 9 | export class Experience { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/skill/skill.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/about/skill/skill.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/skill/skill.html: -------------------------------------------------------------------------------- 1 |

skill works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/skill/skill.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Skill } from './skill'; 4 | 5 | describe('Skill', () => { 6 | let component: Skill; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [Skill] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(Skill); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/skill/skill.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-skill', 5 | imports: [], 6 | templateUrl: './skill.html', 7 | styleUrl: './skill.css' 8 | }) 9 | export class Skill { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/contact.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './contact.routes'; 5 | 6 | export const contactConfig: ApplicationConfig = { 7 | providers: [provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/contact.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/contact/contact.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/contact.html: -------------------------------------------------------------------------------- 1 |
2 |

contact works!

3 | 8 |

Child Routes Result

9 | 10 |
-------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/contact.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { Contact } from './contact'; 4 | 5 | export const routes: Routes = [ 6 | { 7 | path: '', component: Contact, children: [ 8 | { 9 | path: '', 10 | loadComponent: () => import(`./mailing/mailing`) 11 | .then(mod => mod.Mailing) 12 | }, 13 | { 14 | path: 'mapping', 15 | loadComponent: () => import(`./mapping/mapping`) 16 | .then(mod => mod.Mapping) 17 | }, 18 | { 19 | path: 'website', 20 | loadComponent: () => import(`./website/website`) 21 | .then(mod => mod.Website) 22 | }, 23 | 24 | { 25 | path: '**', 26 | loadComponent: () => import(`./mailing/mailing`) 27 | .then(mod => mod.Mailing) 28 | }, 29 | 30 | ] 31 | }, 32 | ]; -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/contact.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Contact } from './contact'; 4 | import { ActivatedRoute } from '@angular/router'; 5 | 6 | describe('Contact', () => { 7 | let component: Contact; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [Contact], 13 | providers: [ 14 | { 15 | provide: ActivatedRoute, 16 | useValue: {} 17 | } 18 | ] 19 | }) 20 | .compileComponents(); 21 | 22 | fixture = TestBed.createComponent(Contact); 23 | component = fixture.componentInstance; 24 | fixture.detectChanges(); 25 | }); 26 | 27 | it('should create', () => { 28 | expect(component).toBeTruthy(); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/contact.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterLink, RouterOutlet } from '@angular/router'; 4 | 5 | 6 | @Component({ 7 | selector: 'app-contact', 8 | imports: [CommonModule, RouterLink, RouterOutlet], 9 | templateUrl: './contact.html', 10 | styleUrl: './contact.css' 11 | }) 12 | export class Contact { 13 | 14 | } -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/mailing/mailing.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/contact/mailing/mailing.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/mailing/mailing.html: -------------------------------------------------------------------------------- 1 |

mailing works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/mailing/mailing.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Mailing } from './mailing'; 4 | 5 | describe('Mailing', () => { 6 | let component: Mailing; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [Mailing] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(Mailing); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/mailing/mailing.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-mailing', 5 | imports: [], 6 | templateUrl: './mailing.html', 7 | styleUrl: './mailing.css' 8 | }) 9 | export class Mailing { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/mapping/mapping.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/contact/mapping/mapping.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/mapping/mapping.html: -------------------------------------------------------------------------------- 1 |

mapping works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/mapping/mapping.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Mapping } from './mapping'; 4 | 5 | describe('Mapping', () => { 6 | let component: Mapping; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [Mapping] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(Mapping); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/mapping/mapping.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-mapping', 5 | imports: [], 6 | templateUrl: './mapping.html', 7 | styleUrl: './mapping.css' 8 | }) 9 | export class Mapping { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/website/website.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/contact/website/website.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/website/website.html: -------------------------------------------------------------------------------- 1 |

website works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/website/website.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Website } from './website'; 4 | 5 | describe('Website', () => { 6 | let component: Website; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [Website] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(Website); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/website/website.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-website', 5 | imports: [], 6 | templateUrl: './website.html', 7 | styleUrl: './website.css' 8 | }) 9 | export class Website { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/home/home.css: -------------------------------------------------------------------------------- 1 | .nga-card { 2 | display: block; 3 | background-color: rgba(255, 255, 255, .8); 4 | box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); 5 | border-radius: 2px; 6 | transition: all .2s ease-in-out; 7 | cursor: pointer; 8 | } 9 | 10 | .nga-card:hover { 11 | transform: translateY(-3px); 12 | box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23); 13 | } 14 | 15 | .nga-card a { 16 | color: black; 17 | text-decoration: none; 18 | } 19 | 20 | .nga-card a:hover { 21 | color: #0d6efd; 22 | text-decoration: none; 23 | } 24 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/home/home.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Home } from './home'; 4 | import { ActivatedRoute } from '@angular/router'; 5 | 6 | describe('Home', () => { 7 | let component: Home; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [Home], 13 | providers: [ 14 | { 15 | provide: ActivatedRoute, 16 | useValue: {} 17 | } 18 | ] 19 | }) 20 | .compileComponents(); 21 | 22 | fixture = TestBed.createComponent(Home); 23 | component = fixture.componentInstance; 24 | fixture.detectChanges(); 25 | }); 26 | 27 | it('should create', () => { 28 | expect(component).toBeTruthy(); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/home/home.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { environment } from '../../../environments/environment'; 3 | import { RouterLink } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-home', 7 | imports: [RouterLink], 8 | templateUrl: './home.html', 9 | styleUrl: './home.css' 10 | }) 11 | export class Home { 12 | name = environment.application.name; 13 | version = environment.application.version; 14 | bootstrap = environment.application.bootstrap; 15 | fontawesome = environment.application.fontawesome; 16 | } 17 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/login/login.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/login/login.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/login/login.html: -------------------------------------------------------------------------------- 1 |

login works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/login/login.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Login } from './login'; 4 | 5 | describe('Login', () => { 6 | let component: Login; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [Login] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(Login); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/login/login.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-login', 5 | imports: [], 6 | templateUrl: './login.html', 7 | styleUrl: './login.css' 8 | }) 9 | export class Login { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/not-found/not-found.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/not-found/not-found.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/not-found/not-found.html: -------------------------------------------------------------------------------- 1 |

not-found works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/not-found/not-found.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NotFound } from './not-found'; 4 | 5 | describe('NotFound', () => { 6 | let component: NotFound; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [NotFound] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(NotFound); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/not-found/not-found.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-not-found', 5 | imports: [], 6 | templateUrl: './not-found.html', 7 | styleUrl: './not-found.css' 8 | }) 9 | export class NotFound { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/signup/signup.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/signup/signup.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/signup/signup.html: -------------------------------------------------------------------------------- 1 |

signup works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/signup/signup.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Signup } from './signup'; 4 | 5 | describe('Signup', () => { 6 | let component: Signup; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [Signup] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(Signup); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/signup/signup.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-signup', 5 | imports: [], 6 | templateUrl: './signup.html', 7 | styleUrl: './signup.css' 8 | }) 9 | export class Signup { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/00-main/items.component.css: -------------------------------------------------------------------------------- 1 | .card { 2 | -webkit-transition: -webkit-transform 1s; 3 | -moz-transition: -moz-transform 1s; 4 | -o-transition: -o-transform 1s; 5 | transition: transform 1s; 6 | -webkit-transform-style: preserve-3d; 7 | -moz-transform-style: preserve-3d; 8 | -o-transform-style: preserve-3d; 9 | transform-style: preserve-3d; 10 | position: relative; 11 | } 12 | 13 | .nga-card-header { 14 | padding: 0.5rem 1rem; 15 | margin-bottom: 0; 16 | background-color: white; 17 | } 18 | 19 | .nga-card-rotate { 20 | -webkit-perspective: 800px; 21 | -moz-perspective: 800px; 22 | -o-perspective: 800px; 23 | perspective: 800px; 24 | margin-bottom: 30px; 25 | } 26 | 27 | .nga-card-rotate a { 28 | text-decoration: none; 29 | } 30 | 31 | .nga-card-rotate:not(.manual-flip):hover .card, 32 | .nga-card-rotate.hover.manual-flip .card { 33 | -webkit-transform: rotateY(180deg); 34 | -moz-transform: rotateY(180deg); 35 | -o-transform: rotateY(180deg); 36 | transform: rotateY(180deg); 37 | } -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/00-main/items.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Bootstrap Features

4 |
5 |
6 | 7 |
8 |
9 |
10 | 11 |
12 |
13 |
14 |
15 |
{{ item.name }}
16 |
17 |
18 | 19 |
20 |
21 |
22 |
23 | 24 |
25 |
26 |
-------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/00-main/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterLink } from '@angular/router'; 4 | import { ITEMS } from './items'; 5 | 6 | @Component({ 7 | selector: 'app-00-main', 8 | imports: [CommonModule, RouterLink], 9 | templateUrl: './items.component.html', 10 | styleUrls: ['./items.component.css'] 11 | }) 12 | export class ItemsComponent { 13 | items = ITEMS; 14 | } 15 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/accordions/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/tutorials/example-bootstrap/accordions/items.component.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/accordions/items.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ItemsComponent } from './items.component'; 4 | 5 | describe('AccordionsComponent', () => { 6 | let component: ItemsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [ItemsComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(ItemsComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/accordions/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-accordions', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/alerts/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/tutorials/example-bootstrap/alerts/items.component.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/alerts/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-alerts', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/badges/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/tutorials/example-bootstrap/badges/items.component.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/badges/items.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Badges

4 |

Example heading New

5 |

Example heading New

6 |

Example heading New

7 |

Example heading New

8 |
Example heading New
9 |
Example heading New
10 |
11 | 14 |
15 | 22 |
23 | 29 |
30 | Primary 31 | Secondary 32 | Success 33 | Danger 34 | Warning 35 | Info 36 | Light 37 | Dark 38 |
39 |
40 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/badges/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-badge', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/blockquotes/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/tutorials/example-bootstrap/blockquotes/items.component.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/blockquotes/items.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Blockquotes

6 |
7 |

A well-known quote, contained in a blockquote element.

8 |
9 |
10 |
11 |
12 |

A well-known quote, contained in a blockquote element.

13 |
14 |
15 | Someone famous in Source Title 16 |
17 |
18 |
19 |
20 |
21 |

A well-known quote, contained in a blockquote element.

22 |
23 |
24 | Someone famous in Source Title 25 |
26 |
27 |
28 |
29 |
30 |

A well-known quote, contained in a blockquote element.

31 |
32 |
33 | Someone famous in Source Title 34 |
35 |
36 |
37 |
38 |
39 |
40 |
-------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/blockquotes/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-blockquotes', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/breadcrumb/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/tutorials/example-bootstrap/breadcrumb/items.component.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/breadcrumb/items.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Breadcrumb

4 | 9 | 15 | 22 |
23 |
24 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/breadcrumb/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-breadcrumb', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/buttons/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/tutorials/example-bootstrap/buttons/items.component.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/buttons/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-buttons', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/cards/items.component.css: -------------------------------------------------------------------------------- 1 | .nga-card { 2 | -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 3 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) 4 | } 5 | 6 | .nga-card-box { 7 | display: block; 8 | background-color: rgba(255, 255, 255, .8); 9 | box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); 10 | border-radius: 2px; 11 | transition: all .2s ease-in-out; 12 | cursor: pointer; 13 | } 14 | 15 | .nga-card-box:hover { 16 | box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23); 17 | } -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/cards/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-alerts', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/checkbox/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/tutorials/example-bootstrap/checkbox/items.component.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/checkbox/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-collapse', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/collapses/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/tutorials/example-bootstrap/collapses/items.component.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/collapses/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | // eslint-disable-next-line 4 | declare const bootstrap: any; 5 | 6 | @Component({ 7 | selector: 'app-collapse', 8 | templateUrl: './items.component.html', 9 | styleUrls: ['./items.component.css'] 10 | }) 11 | export class ItemsComponent { 12 | 13 | closeCollapse() { 14 | const myCollapse = document.getElementById('collapseWidthJavascript') 15 | new bootstrap.Collapse(myCollapse, { 16 | hide: true, 17 | }) 18 | } 19 | 20 | showCollapse() { 21 | const myCollapse = document.getElementById('collapseWidthJavascript') 22 | new bootstrap.Collapse(myCollapse, { 23 | show: true, 24 | }) 25 | } 26 | 27 | toggleCollapse() { 28 | const myCollapse = document.getElementById('collapseWidthJavascript') 29 | new bootstrap.Collapse(myCollapse, { 30 | toggle: true, 31 | }) 32 | } 33 | 34 | } 35 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/dropdowns/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/tutorials/example-bootstrap/dropdowns/items.component.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/dropdowns/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dropdowns', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/forms/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/tutorials/example-bootstrap/forms/items.component.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/forms/items.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Forms

4 |
5 |
6 | 7 | 8 |
9 |
10 | 11 | 18 |
19 |
20 | 21 | 28 |
29 |
30 | 31 | 32 |
33 |
34 |
35 |
-------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/forms/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-forms', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/list-group/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/tutorials/example-bootstrap/list-group/items.component.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/list-group/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-list-group', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/pagination/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/tutorials/example-bootstrap/pagination/items.component.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/pagination/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-pagination', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/progress/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/tutorials/example-bootstrap/progress/items.component.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/progress/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-progress', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/spinners/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/tutorials/example-bootstrap/spinners/items.component.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/spinners/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-spinners', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/tables/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/tutorials/example-bootstrap/tables/items.component.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/tables/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-pagination', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/tutorial.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TutorialComponent } from './tutorial.component'; 4 | import { ActivatedRoute } from '@angular/router'; 5 | 6 | describe('TutorialComponent', () => { 7 | let component: TutorialComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [TutorialComponent], 13 | providers: [ 14 | { 15 | provide: ActivatedRoute, 16 | useValue: {} 17 | } 18 | ] 19 | }) 20 | .compileComponents(); 21 | 22 | fixture = TestBed.createComponent(TutorialComponent); 23 | component = fixture.componentInstance; 24 | fixture.detectChanges(); 25 | }); 26 | 27 | it('should create', () => { 28 | expect(component).toBeTruthy(); 29 | }); 30 | }); 31 | 32 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/tutorial.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterLink, RouterOutlet } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-example-bootstrap', 7 | imports: [CommonModule, RouterLink, RouterOutlet], 8 | templateUrl: './tutorial.component.html', 9 | styleUrls: ['./tutorial.component.css'] 10 | }) 11 | export class TutorialComponent { 12 | 13 | } 14 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/tutorial.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './tutorial.routes'; 5 | 6 | export const tutorialConfig: ApplicationConfig = { 7 | providers: [provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/typography/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/app/features/tutorials/example-bootstrap/typography/items.component.css -------------------------------------------------------------------------------- /frontend-angular/src/app/features/tutorials/example-bootstrap/typography/items.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-collapse', 5 | templateUrl: './items.component.html', 6 | styleUrls: ['./items.component.css'] 7 | }) 8 | export class ItemsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /frontend-angular/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/assets/.gitkeep -------------------------------------------------------------------------------- /frontend-angular/src/assets/params/images/example-bootstrap/movie-screen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/assets/params/images/example-bootstrap/movie-screen.jpg -------------------------------------------------------------------------------- /frontend-angular/src/assets/params/images/logo/ganatan-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/assets/params/images/logo/ganatan-logo.png -------------------------------------------------------------------------------- /frontend-angular/src/assets/params/images/logo/ganatan-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/src/assets/params/images/logo/ganatan-logo@2x.png -------------------------------------------------------------------------------- /frontend-angular/src/assets/params/js/popovers.js: -------------------------------------------------------------------------------- 1 | var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) 2 | var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { 3 | return new bootstrap.Popover(popoverTriggerEl) 4 | }) 5 | -------------------------------------------------------------------------------- /frontend-angular/src/assets/params/js/toasts.js: -------------------------------------------------------------------------------- 1 | var myToastEl = document.getElementById('myToast') 2 | myToastEl.classList.add("show"); 3 | -------------------------------------------------------------------------------- /frontend-angular/src/assets/params/js/tooltips.js: -------------------------------------------------------------------------------- 1 | /*var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')) 2 | var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 3 | return new bootstrap.Tooltip(tooltipTriggerEl) 4 | })*/ 5 | 6 | var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) 7 | var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 8 | return new bootstrap.Tooltip(tooltipTriggerEl) 9 | }) 10 | 11 | -------------------------------------------------------------------------------- /frontend-angular/src/environments/environment.development.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | application: 3 | { 4 | name: 'angular-bootstrap', 5 | version: 'Angular 20.0.1', 6 | bootstrap: 'Bootstrap 5.3.6', 7 | fontawesome: 'Font Awesome 6.7.2', 8 | } 9 | }; -------------------------------------------------------------------------------- /frontend-angular/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | application: 3 | { 4 | name: 'angular-bootstrap', 5 | version: 'Angular 20.0.1', 6 | bootstrap: 'Bootstrap 5.3.6', 7 | fontawesome: 'Font Awesome 6.7.2', 8 | } 9 | }; -------------------------------------------------------------------------------- /frontend-angular/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularStarter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /frontend-angular/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { App } from './app/app'; 4 | 5 | bootstrapApplication(App, appConfig) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /frontend-angular/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 3.5rem; 3 | font-family: "Roboto", sans-serif; 4 | } -------------------------------------------------------------------------------- /frontend-angular/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/app", 7 | "types": [] 8 | }, 9 | "include": [ 10 | "src/**/*.ts" 11 | ], 12 | "exclude": [ 13 | "src/**/*.spec.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /frontend-angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "compileOnSave": false, 5 | "compilerOptions": { 6 | "strict": true, 7 | "noImplicitOverride": true, 8 | "noPropertyAccessFromIndexSignature": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "skipLibCheck": true, 12 | "isolatedModules": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true, 15 | "target": "ES2022", 16 | "module": "preserve" 17 | }, 18 | "angularCompilerOptions": { 19 | "enableI18nLegacyMessageIdFormat": false, 20 | "strictInjectionParameters": true, 21 | "strictInputAccessModifiers": true, 22 | "typeCheckHostBindings": true, 23 | "strictTemplates": true 24 | }, 25 | "files": [], 26 | "references": [ 27 | { 28 | "path": "./tsconfig.app.json" 29 | }, 30 | { 31 | "path": "./tsconfig.spec.json" 32 | } 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /frontend-angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "src/**/*.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /frontend-angular/ui/assets/fontawesome/css/regular.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | :root, :host { 7 | --fa-style-family-classic: 'Font Awesome 6 Free'; 8 | --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free'; } 9 | 10 | @font-face { 11 | font-family: 'Font Awesome 6 Free'; 12 | font-style: normal; 13 | font-weight: 400; 14 | font-display: block; 15 | src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); } 16 | 17 | .far, 18 | .fa-regular { 19 | font-weight: 400; } 20 | -------------------------------------------------------------------------------- /frontend-angular/ui/assets/fontawesome/css/regular.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | :host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400} -------------------------------------------------------------------------------- /frontend-angular/ui/assets/fontawesome/css/solid.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | :root, :host { 7 | --fa-style-family-classic: 'Font Awesome 6 Free'; 8 | --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; } 9 | 10 | @font-face { 11 | font-family: 'Font Awesome 6 Free'; 12 | font-style: normal; 13 | font-weight: 900; 14 | font-display: block; 15 | src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); } 16 | 17 | .fas, 18 | .fa-solid { 19 | font-weight: 900; } 20 | -------------------------------------------------------------------------------- /frontend-angular/ui/assets/fontawesome/css/solid.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | :host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900} -------------------------------------------------------------------------------- /frontend-angular/ui/assets/fontawesome/css/v4-font-face.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | @font-face { 7 | font-family: 'FontAwesome'; 8 | font-display: block; 9 | src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); } 10 | 11 | @font-face { 12 | font-family: 'FontAwesome'; 13 | font-display: block; 14 | src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); } 15 | 16 | @font-face { 17 | font-family: 'FontAwesome'; 18 | font-display: block; 19 | src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); 20 | unicode-range: U+F003,U+F006,U+F014,U+F016-F017,U+F01A-F01B,U+F01D,U+F022,U+F03E,U+F044,U+F046,U+F05C-F05D,U+F06E,U+F070,U+F087-F088,U+F08A,U+F094,U+F096-F097,U+F09D,U+F0A0,U+F0A2,U+F0A4-F0A7,U+F0C5,U+F0C7,U+F0E5-F0E6,U+F0EB,U+F0F6-F0F8,U+F10C,U+F114-F115,U+F118-F11A,U+F11C-F11D,U+F133,U+F147,U+F14E,U+F150-F152,U+F185-F186,U+F18E,U+F190-F192,U+F196,U+F1C1-F1C9,U+F1D9,U+F1DB,U+F1E3,U+F1EA,U+F1F7,U+F1F9,U+F20A,U+F247-F248,U+F24A,U+F24D,U+F255-F25B,U+F25D,U+F271-F274,U+F278,U+F27B,U+F28C,U+F28E,U+F29C,U+F2B5,U+F2B7,U+F2BA,U+F2BC,U+F2BE,U+F2C0-F2C1,U+F2C3,U+F2D0,U+F2D2,U+F2D4,U+F2DC; } 21 | 22 | @font-face { 23 | font-family: 'FontAwesome'; 24 | font-display: block; 25 | src: url("../webfonts/fa-v4compatibility.woff2") format("woff2"), url("../webfonts/fa-v4compatibility.ttf") format("truetype"); 26 | unicode-range: U+F041,U+F047,U+F065-F066,U+F07D-F07E,U+F080,U+F08B,U+F08E,U+F090,U+F09A,U+F0AC,U+F0AE,U+F0B2,U+F0D0,U+F0D6,U+F0E4,U+F0EC,U+F10A-F10B,U+F123,U+F13E,U+F148-F149,U+F14C,U+F156,U+F15E,U+F160-F161,U+F163,U+F175-F178,U+F195,U+F1F8,U+F219,U+F27A; } 27 | -------------------------------------------------------------------------------- /frontend-angular/ui/assets/fontawesome/css/v4-font-face.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | @font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a} -------------------------------------------------------------------------------- /frontend-angular/ui/assets/fontawesome/css/v5-font-face.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | @font-face { 7 | font-family: 'Font Awesome 5 Brands'; 8 | font-display: block; 9 | font-weight: 400; 10 | src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); } 11 | 12 | @font-face { 13 | font-family: 'Font Awesome 5 Free'; 14 | font-display: block; 15 | font-weight: 900; 16 | src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); } 17 | 18 | @font-face { 19 | font-family: 'Font Awesome 5 Free'; 20 | font-display: block; 21 | font-weight: 400; 22 | src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); } 23 | -------------------------------------------------------------------------------- /frontend-angular/ui/assets/fontawesome/css/v5-font-face.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | * Copyright 2023 Fonticons, Inc. 5 | */ 6 | @font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")} -------------------------------------------------------------------------------- /frontend-angular/ui/assets/fontawesome/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/ui/assets/fontawesome/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /frontend-angular/ui/assets/fontawesome/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/ui/assets/fontawesome/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /frontend-angular/ui/assets/fontawesome/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/ui/assets/fontawesome/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /frontend-angular/ui/assets/fontawesome/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/ui/assets/fontawesome/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /frontend-angular/ui/assets/fontawesome/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/ui/assets/fontawesome/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /frontend-angular/ui/assets/fontawesome/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/ui/assets/fontawesome/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /frontend-angular/ui/assets/fontawesome/webfonts/fa-v4compatibility.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/ui/assets/fontawesome/webfonts/fa-v4compatibility.ttf -------------------------------------------------------------------------------- /frontend-angular/ui/assets/fontawesome/webfonts/fa-v4compatibility.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/ui/assets/fontawesome/webfonts/fa-v4compatibility.woff2 -------------------------------------------------------------------------------- /frontend-angular/ui/assets/params/css/body.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 3.5rem; 3 | font-family: "Roboto", sans-serif; 4 | } 5 | -------------------------------------------------------------------------------- /frontend-angular/ui/assets/params/css/footer.css: -------------------------------------------------------------------------------- 1 | .nga-footer { 2 | background-color: #212121; 3 | color: white; 4 | } 5 | 6 | .nga-footer a { 7 | color: white; 8 | text-decoration: none 9 | } 10 | 11 | .nga-footer a:hover, 12 | .nga-footer a:focus { 13 | color: yellow; 14 | text-decoration: underline; 15 | } 16 | 17 | .nga-footer .hint { 18 | background-color: #1976d2; 19 | } 20 | 21 | .nga-footer .hint:hover { 22 | opacity: 0.8; 23 | } 24 | -------------------------------------------------------------------------------- /frontend-angular/ui/assets/params/css/header.css: -------------------------------------------------------------------------------- 1 | .navbar.navbar-dark .navbar-nav .nav-item .nav-link { 2 | color: white; 3 | font-weight: 500; 4 | border-top: 1px solid #09238d; 5 | border-bottom: 1px solid #09238d; 6 | } 7 | 8 | .navbar.navbar-dark .navbar-nav .nav-item .nav-link:hover { 9 | color: yellow; 10 | border-top: 1px solid yellow; 11 | border-bottom: 1px solid yellow; 12 | } 13 | 14 | .nga-navbar { 15 | -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 11px 10px 0 rgba(0, 0, 0, 0.12); 16 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 11px 10px 0 rgba(0, 0, 0, 0.12); 17 | background-color: #09238d; 18 | } 19 | 20 | .nga-logo { 21 | font-weight: 700; 22 | } 23 | 24 | .nga-logo:hover { 25 | color: rgba(255, 255, 255, 0.75); 26 | } -------------------------------------------------------------------------------- /frontend-angular/ui/assets/params/images/logo/ganatan-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/ui/assets/params/images/logo/ganatan-logo.png -------------------------------------------------------------------------------- /frontend-angular/ui/assets/params/images/logo/ganatan-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-angular/ui/assets/params/images/logo/ganatan-logo@2x.png -------------------------------------------------------------------------------- /frontend-angular/ui/assets/params/js/popovers.js: -------------------------------------------------------------------------------- 1 | var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]')) 2 | var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { 3 | return new bootstrap.Popover(popoverTriggerEl) 4 | }) -------------------------------------------------------------------------------- /frontend-angular/ui/assets/params/js/toasts.js: -------------------------------------------------------------------------------- 1 | var myToastEl = document.getElementById('myToast') 2 | myToastEl.classList.add("show"); 3 | -------------------------------------------------------------------------------- /frontend-angular/ui/assets/params/js/tooltips.js: -------------------------------------------------------------------------------- 1 | var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')) 2 | var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 3 | return new bootstrap.Tooltip(tooltipTriggerEl) 4 | }) 5 | -------------------------------------------------------------------------------- /frontend-react/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "jest": true 6 | }, 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:react/recommended" 10 | ], 11 | "parserOptions": { 12 | "ecmaFeatures": { 13 | "jsx": true 14 | }, 15 | "ecmaVersion": "latest", 16 | "sourceType": "module" 17 | }, 18 | "plugins": [ 19 | "react" 20 | ], 21 | "rules": { 22 | "react/react-in-jsx-scope": "off", 23 | "linebreak-style": 0, 24 | "no-var": "error", 25 | "prefer-const": "error", 26 | "func-names": "error", 27 | "id-length": "error", 28 | "newline-before-return": "error", 29 | "space-before-blocks": "error", 30 | "no-alert": "error", 31 | "react/prop-types": 0, 32 | "indent": [ 33 | "error", 34 | 2 35 | ] 36 | }, 37 | "settings": { 38 | "react": { 39 | "version": "detect" 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /frontend-react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /frontend-react/nginx.conf: -------------------------------------------------------------------------------- 1 | user www-data; 2 | worker_processes auto; 3 | pid /run/nginx.pid; 4 | include /etc/nginx/modules-enabled/*.conf; 5 | 6 | events { 7 | worker_connections 768; 8 | } 9 | 10 | http { 11 | sendfile on; 12 | tcp_nopush on; 13 | tcp_nodelay on; 14 | keepalive_timeout 65; 15 | types_hash_max_size 2048; 16 | include /etc/nginx/mime.types; 17 | default_type application/octet-stream; 18 | 19 | ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE 20 | ssl_prefer_server_ciphers on; 21 | 22 | access_log /var/log/nginx/access.log; 23 | error_log /var/log/nginx/error.log; 24 | 25 | gzip on; 26 | 27 | include /etc/nginx/conf.d/*.conf; 28 | 29 | server { 30 | listen 80 default_server; 31 | listen [::]:80 default_server; 32 | root /var/www/html; 33 | index index.html index.htm index.nginx-debian.html; 34 | 35 | server_name _; 36 | 37 | location / { 38 | try_files $uri $uri/ =404; 39 | } 40 | 41 | } 42 | 43 | } 44 | 45 | -------------------------------------------------------------------------------- /frontend-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-bootstrap", 3 | "version": "18.3.1", 4 | "private": true, 5 | "dependencies": { 6 | "@fortawesome/fontawesome-free": "6.5.2", 7 | "@testing-library/jest-dom": "6.4.6", 8 | "@testing-library/react": "16.0.0", 9 | "@testing-library/user-event": "14.5.2", 10 | "bootstrap": "5.3.3", 11 | "react": "18.3.1", 12 | "react-dom": "18.3.1", 13 | "react-router-dom": "6.24.1", 14 | "react-scripts": "5.0.1", 15 | "web-vitals": "4.2.1" 16 | }, 17 | "scripts": { 18 | "dev": "cross-env PORT=4200 react-scripts start", 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --watchAll=false", 22 | "coverage": "react-scripts test --coverage --watchAll=false", 23 | "serve": "node server", 24 | "eject": "react-scripts eject", 25 | "lint": "eslint \"src/**/*.{js,jsx}\"" 26 | }, 27 | "eslintConfig": { 28 | "extends": [ 29 | "react-app", 30 | "react-app/jest" 31 | ] 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | }, 45 | "devDependencies": { 46 | "cross-env": "^7.0.3", 47 | "eslint": "8.55.0", 48 | "eslint-plugin-react": "7.34.2" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /frontend-react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/public/favicon.ico -------------------------------------------------------------------------------- /frontend-react/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/public/logo192.png -------------------------------------------------------------------------------- /frontend-react/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/public/logo512.png -------------------------------------------------------------------------------- /frontend-react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /frontend-react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /frontend-react/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const path = require('path'); 3 | const app = express(); 4 | 5 | app.use(express.static(path.join(__dirname, 'build'))); 6 | 7 | app.get('/*', function (req, res) { 8 | res.sendFile(path.join(__dirname, 'build', 'index.html')); 9 | }); 10 | 11 | const port = 3000; 12 | app.listen(port, () => { 13 | console.log(`Example app listening on port ${port}`) 14 | }) 15 | 16 | -------------------------------------------------------------------------------- /frontend-react/src/app/app-routing.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense } from 'react'; 2 | import { Routes, Route } from "react-router-dom"; 3 | 4 | import Home from './modules/general/home/home'; 5 | import Notfound from './modules/general/not-found/not-found'; 6 | 7 | const About = React.lazy(() => import('./modules/general/about/about')); 8 | const Login = React.lazy(() => import('./modules/general/login/login')); 9 | const Signup = React.lazy(() => import('./modules/general/signup/signup')); 10 | 11 | const Contact = React.lazy(() => import('./modules/general/contact/contact')); 12 | 13 | const ExampleBootstrap = React.lazy(() => import('./modules/application/example-bootstrap/example-bootstrap')); 14 | 15 | class AppRouting extends React.Component { 16 | 17 | render() { 18 | return ( 19 | 20 | } /> 21 | 22 | ...}>} /> 23 | ...}>} /> 24 | ...}>} /> 25 | 26 | ...}>} /> 27 | ...}>} /> 28 | 29 | } /> 30 | 31 | 32 | ) 33 | } 34 | 35 | } 36 | 37 | export default AppRouting; -------------------------------------------------------------------------------- /frontend-react/src/app/app.css: -------------------------------------------------------------------------------- 1 | .navbar.navbar-dark .navbar-nav .nav-item .nav-link { 2 | color: white; 3 | font-weight: 500; 4 | border-top: 1px solid #09238d; 5 | border-bottom: 1px solid #09238d; 6 | } 7 | 8 | .navbar.navbar-dark .navbar-nav .nav-item .nav-link:hover { 9 | color: yellow; 10 | border-top: 1px solid yellow; 11 | border-bottom: 1px solid yellow; 12 | } 13 | 14 | .nga-navbar { 15 | -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 11px 10px 0 rgba(0, 0, 0, 0.12); 16 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 11px 10px 0 rgba(0, 0, 0, 0.12); 17 | background-color: #09238d; 18 | } 19 | 20 | .nga-navbar-logo { 21 | font-weight: 700; 22 | } 23 | 24 | .nga-navbar-logo:hover { 25 | color: rgba(255, 255, 255, 0.75); 26 | } 27 | 28 | .nga-logo { 29 | font-weight: 700; 30 | } 31 | 32 | .nga-logo:hover { 33 | color: rgba(255, 255, 255, 0.75); 34 | } 35 | 36 | .nga-footer { 37 | background-color: #212121; 38 | color: white; 39 | } 40 | 41 | .nga-footer a { 42 | color: white; 43 | text-decoration: none 44 | } 45 | 46 | .nga-footer a:hover, 47 | .nga-footer a:focus { 48 | color: yellow; 49 | text-decoration: underline; 50 | } 51 | 52 | .nga-footer .hint { 53 | background-color: #1976d2; 54 | } 55 | 56 | .nga-footer .hint:hover { 57 | opacity: 0.8; 58 | } -------------------------------------------------------------------------------- /frontend-react/src/app/app.test.js: -------------------------------------------------------------------------------- 1 | import { render } from '@testing-library/react'; 2 | import { BrowserRouter } from 'react-router-dom'; 3 | 4 | import App from './App'; 5 | 6 | it('renders App with Routes', () => { 7 | render( 8 | 9 | 10 | 11 | ); 12 | expect(true).toStrictEqual(true); 13 | }); 14 | 15 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/00-main/main.css: -------------------------------------------------------------------------------- 1 | .card { 2 | -webkit-transition: -webkit-transform 1s; 3 | -moz-transition: -moz-transform 1s; 4 | -o-transition: -o-transform 1s; 5 | transition: transform 1s; 6 | -webkit-transform-style: preserve-3d; 7 | -moz-transform-style: preserve-3d; 8 | -o-transform-style: preserve-3d; 9 | transform-style: preserve-3d; 10 | position: relative; 11 | } 12 | 13 | .nga-card-header { 14 | padding: 0.5rem 1rem; 15 | margin-bottom: 0; 16 | background-color: white; 17 | } 18 | 19 | .nga-card-rotate { 20 | -webkit-perspective: 800px; 21 | -moz-perspective: 800px; 22 | -o-perspective: 800px; 23 | perspective: 800px; 24 | margin-bottom: 30px; 25 | } 26 | 27 | .nga-card-rotate a { 28 | text-decoration: none; 29 | } 30 | 31 | .nga-card-rotate:not(.manual-flip):hover .card, 32 | .nga-card-rotate.hover.manual-flip .card { 33 | -webkit-transform: rotateY(180deg); 34 | -moz-transform: rotateY(180deg); 35 | -o-transform: rotateY(180deg); 36 | transform: rotateY(180deg); 37 | } -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/accordions/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/accordions/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/alerts/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/alerts/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/badges/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/badges/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/blockquotes/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/blockquotes/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/breadcrumb/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/breadcrumb/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/breadcrumb/items.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './items.css'; 4 | 5 | class Blockquotes extends React.Component { 6 | 7 | render() { 8 | return ( 9 | 10 |
11 |
12 |

Breadcrumb

13 | 18 | 24 | 31 |
32 |
33 | 34 | ) 35 | } 36 | 37 | } 38 | export default Blockquotes; 39 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/buttons/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/buttons/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/cards/items.css: -------------------------------------------------------------------------------- 1 | .nga-card { 2 | -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 3 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) 4 | } 5 | 6 | .nga-card-box { 7 | display: block; 8 | background-color: rgba(255, 255, 255, .8); 9 | box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); 10 | border-radius: 2px; 11 | transition: all .2s ease-in-out; 12 | cursor: pointer; 13 | } 14 | 15 | .nga-card-box:hover { 16 | box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23); 17 | } -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/checkbox/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/checkbox/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/collapses/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/collapses/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/dropdowns/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/dropdowns/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/example-bootstrap.css: -------------------------------------------------------------------------------- 1 | .nga-btn-toggle { 2 | display: inline-flex; 3 | align-items: center; 4 | padding: .25rem .5rem; 5 | font-weight: 600; 6 | color: rgba(0, 0, 0, .65); 7 | background-color: transparent; 8 | border: 0; 9 | } 10 | 11 | .nga-btn-toggle:hover, 12 | .nga-btn-toggle:focus { 13 | color: rgba(0, 0, 0, .85); 14 | background-color: #cfe2ff; 15 | } 16 | 17 | .nga-btn-toggle::before { 18 | width: 1.25em; 19 | line-height: 0; 20 | content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); 21 | transition: transform .35s ease; 22 | transform-origin: .5em 50%; 23 | } 24 | 25 | .nga-btn-toggle[aria-expanded="true"] { 26 | color: #0d6efd; 27 | } 28 | 29 | .nga-btn-toggle[aria-expanded="true"]::before { 30 | transform: rotate(90deg); 31 | } 32 | 33 | .nga-btn-toggle-nav a { 34 | display: inline-flex; 35 | padding: .1875rem .5rem; 36 | margin-top: .125rem; 37 | margin-left: 1.25rem; 38 | text-decoration: none; 39 | } 40 | 41 | .nga-btn-toggle-nav a:hover, 42 | .nga-btn-toggle-nav a:focus { 43 | color: #0d6efd; 44 | background-color: #cfe2ff; 45 | font-weight: bold; 46 | } 47 | 48 | @media (min-width: 768px) { 49 | .nga-container-layout { 50 | display: grid; 51 | gap: 1.5rem; 52 | grid-template-columns: 1fr 3fr 53 | } 54 | } 55 | 56 | @media (min-width: 992px) { 57 | .nga-container-layout { 58 | grid-template-columns: 1fr 5fr 59 | } 60 | } 61 | 62 | .nga-container-sidebar { 63 | overflow: auto; 64 | font-weight: 600 65 | } 66 | 67 | @media (min-width: 768px) { 68 | .nga-container-sidebar { 69 | position: -webkit-sticky; 70 | position: sticky; 71 | top: 5rem; 72 | display: block; 73 | height: calc(100vh - 7rem); 74 | padding-left: .25rem; 75 | margin-left: -.25rem; 76 | overflow-y: auto 77 | } 78 | } -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/forms/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/forms/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/forms/items.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './items.css'; 4 | 5 | class Blockquotes extends React.Component { 6 | 7 | render() { 8 | return ( 9 | 10 |
11 |
12 |

Forms

13 |
14 |
15 | 16 | 17 |
18 |
19 | 20 | 27 |
28 |
29 | 30 | 37 |
38 |
39 | 40 | 41 |
42 |
43 |
44 |
45 | 46 | ) 47 | } 48 | 49 | } 50 | export default Blockquotes; 51 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/list-group/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/list-group/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/modal/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/modal/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/pagination/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/pagination/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/popovers/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/popovers/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/progress/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/progress/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/progress/items.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './items.css'; 4 | 5 | class Blockquotes extends React.Component { 6 | 7 | render() { 8 | return ( 9 |
10 |

progress works!

11 |
12 | ) 13 | } 14 | 15 | } 16 | export default Blockquotes; 17 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/spinners/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/spinners/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/spinners/items.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './items.css'; 4 | 5 | class Blockquotes extends React.Component { 6 | 7 | render() { 8 | return ( 9 |
10 |

spinners works!

11 |
12 | ) 13 | } 14 | 15 | } 16 | export default Blockquotes; 17 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/tables/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/tables/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/tables/items.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './items.css'; 4 | 5 | class Blockquotes extends React.Component { 6 | 7 | render() { 8 | return ( 9 |
10 |

tables works!

11 |
12 | ) 13 | } 14 | 15 | } 16 | export default Blockquotes; 17 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/toasts/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/toasts/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/toasts/items.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './items.css'; 4 | 5 | class Blockquotes extends React.Component { 6 | 7 | render() { 8 | return ( 9 |
10 |

toasts works!

11 |
12 | ) 13 | } 14 | 15 | } 16 | export default Blockquotes; 17 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/tooltips/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/tooltips/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/tooltips/items.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './items.css'; 4 | 5 | class Blockquotes extends React.Component { 6 | 7 | render() { 8 | return ( 9 |
10 |

tooltips works!

11 |
12 | ) 13 | } 14 | 15 | } 16 | export default Blockquotes; 17 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/typography/items.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/application/example-bootstrap/typography/items.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/application/example-bootstrap/typography/items.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './items.css'; 4 | 5 | class Blockquotes extends React.Component { 6 | 7 | render() { 8 | return ( 9 |
10 |

typography works!

11 |
12 | ) 13 | } 14 | 15 | } 16 | export default Blockquotes; 17 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/about/about.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/general/about/about.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/about/about.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './about.css'; 4 | 5 | class About extends React.Component { 6 | render() { 7 | return ( 8 |
9 |

about works!

10 |
11 | ) 12 | } 13 | } 14 | 15 | export default About; 16 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/contact-routing.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense } from 'react'; 2 | import { Routes, Route } from "react-router-dom"; 3 | 4 | import Mailing from './mailing/mailing'; 5 | 6 | const Mapping = React.lazy(() => import('./mapping/mapping')); 7 | const Website = React.lazy(() => import('./website/website')); 8 | 9 | import Notfound from '../../../modules/general/not-found/not-found'; 10 | 11 | class AppRouting extends React.Component { 12 | 13 | render() { 14 | return ( 15 | 16 | } /> 17 | } /> 18 | 19 | ...}>} /> 20 | ...}>} /> 21 | } /> 22 | 23 | ) 24 | } 25 | 26 | } 27 | 28 | export default AppRouting; -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/contact.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/general/contact/contact.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/contact.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | import ContactRouting from './contact-routing'; 5 | 6 | import './contact.css'; 7 | 8 | class Contact extends React.Component { 9 | 10 | render() { 11 | return ( 12 |
13 |

contact works!

14 |
    15 |
  • Mailing
    • 16 |
  • Mapping
    • 17 |
  • Website
    • 18 |
19 |

Child Routes Result

20 | 21 |
22 | ) 23 | } 24 | 25 | } 26 | export default Contact; 27 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/mailing/mailing.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/general/contact/mailing/mailing.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/mailing/mailing.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './mailing.css'; 4 | 5 | class Mailing extends React.Component { 6 | 7 | render() { 8 | return ( 9 |
10 |

mailing works!

11 |
12 | ) 13 | } 14 | 15 | } 16 | export default Mailing; 17 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/mapping/mapping.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/general/contact/mapping/mapping.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/mapping/mapping.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './mapping.css'; 4 | 5 | class Mapping extends React.Component { 6 | 7 | render() { 8 | return ( 9 |
10 |

mapping works!

11 |
12 | ) 13 | } 14 | 15 | } 16 | export default Mapping; 17 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/website/website.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/general/contact/website/website.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/website/website.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './website.css'; 4 | 5 | class Website extends React.Component { 6 | 7 | render() { 8 | return ( 9 |
10 |

Website works!

11 |
12 | ) 13 | } 14 | 15 | } 16 | export default Website; 17 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/home/home.css: -------------------------------------------------------------------------------- 1 | .nga-card { 2 | display: block; 3 | background-color: rgba(255, 255, 255, .8); 4 | box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); 5 | border-radius: 2px; 6 | transition: all .2s ease-in-out; 7 | cursor: pointer; 8 | } 9 | 10 | .nga-card:hover { 11 | transform: translateY(-3px); 12 | box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23); 13 | } 14 | 15 | .nga-card a { 16 | color: black; 17 | text-decoration: none; 18 | } 19 | 20 | .nga-card a:hover { 21 | color: #0d6efd; 22 | text-decoration: none; 23 | } 24 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/login/login.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/general/login/login.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/login/login.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './login.css'; 4 | 5 | class Login extends React.Component { 6 | 7 | render() { 8 | return ( 9 |
10 |

login works!

11 |
12 | ) 13 | } 14 | 15 | } 16 | export default Login; 17 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/not-found/not-found.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/general/not-found/not-found.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/not-found/not-found.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './not-found.css'; 4 | 5 | class Notfound extends React.Component { 6 | 7 | render() { 8 | return ( 9 |
10 |

not-found works!

11 |
12 | ) 13 | } 14 | 15 | } 16 | export default Notfound; 17 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/signup/signup.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/app/modules/general/signup/signup.css -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/signup/signup.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './signup.css'; 4 | 5 | class Signup extends React.Component { 6 | 7 | render() { 8 | return ( 9 |
10 |

signup works!

11 |
12 | ) 13 | } 14 | 15 | } 16 | export default Signup; 17 | -------------------------------------------------------------------------------- /frontend-react/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/assets/.gitkeep -------------------------------------------------------------------------------- /frontend-react/src/assets/params/images/example-bootstrap/movie-screen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/assets/params/images/example-bootstrap/movie-screen.jpg -------------------------------------------------------------------------------- /frontend-react/src/assets/params/images/logo/ganatan-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/assets/params/images/logo/ganatan-logo.png -------------------------------------------------------------------------------- /frontend-react/src/assets/params/images/logo/ganatan-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/frontend-react/src/assets/params/images/logo/ganatan-logo@2x.png -------------------------------------------------------------------------------- /frontend-react/src/environments/environment.js: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | application: 3 | { 4 | name: 'react-bootstrap', 5 | version: 'React 18.2.0', 6 | bootstrap: 'Bootstrap 5.2.2', 7 | fontawesome: 'Font Awesome 6.2.0', 8 | } 9 | }; -------------------------------------------------------------------------------- /frontend-react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 3.5rem; 3 | font-family: "Roboto", sans-serif; 4 | } -------------------------------------------------------------------------------- /frontend-react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import { BrowserRouter } from "react-router-dom"; 4 | 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | import "bootstrap/dist/css/bootstrap.min.css"; 8 | import "@fortawesome/fontawesome-free/css/all.min.css"; 9 | import "./assets/params/css/fonts.googleapis.min.css"; 10 | 11 | import './index.css'; 12 | 13 | import App from './app/app'; 14 | 15 | const root = ReactDOM.createRoot(document.getElementById('root')); 16 | root.render( 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | 24 | // If you want to start measuring performance in your app, pass a function 25 | // to log results (for example: reportWebVitals(console.log)) 26 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 27 | reportWebVitals(); 28 | -------------------------------------------------------------------------------- /frontend-react/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /frontend-react/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /img/ganatan-about-github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-bootstrap/90f19c635e3e8732b49ce4fa63deb89318e55b9c/img/ganatan-about-github.png --------------------------------------------------------------------------------