├── .dockerignore ├── .editorconfig ├── .eslintrc.json ├── .gitignore ├── Dockerfile ├── README.md ├── angular.json ├── package.json ├── server.ts ├── src ├── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.config.server.ts │ ├── app.config.ts │ ├── app.routes.ts │ └── pages │ │ ├── application │ │ ├── example-bootstrap │ │ │ ├── 00-main │ │ │ │ ├── exercice-routing.module.ts │ │ │ │ ├── exercice.component.css │ │ │ │ ├── exercice.component.html │ │ │ │ ├── exercice.component.spec.ts │ │ │ │ ├── exercice.component.ts │ │ │ │ ├── exercice.module.ts │ │ │ │ └── items.ts │ │ │ ├── accordions │ │ │ │ ├── items.component.css │ │ │ │ ├── items.component.html │ │ │ │ └── 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-routing.module.ts │ │ │ ├── tutorial.component.css │ │ │ ├── tutorial.component.html │ │ │ ├── tutorial.component.spec.ts │ │ │ ├── tutorial.component.ts │ │ │ ├── tutorial.module.ts │ │ │ └── typography │ │ │ │ ├── items.component.css │ │ │ │ ├── items.component.html │ │ │ │ └── items.component.ts │ │ ├── example-components │ │ │ ├── channel │ │ │ │ ├── channel.component.css │ │ │ │ ├── channel.component.html │ │ │ │ ├── channel.component.spec.ts │ │ │ │ ├── channel.component.ts │ │ │ │ └── channel.ts │ │ │ ├── tutorial-routing.module.ts │ │ │ ├── tutorial.component.css │ │ │ ├── tutorial.component.html │ │ │ ├── tutorial.component.spec.ts │ │ │ ├── tutorial.component.ts │ │ │ └── tutorial.module.ts │ │ ├── example-forms │ │ │ ├── 00-main │ │ │ │ ├── exercice-routing.module.ts │ │ │ │ ├── exercice.component.css │ │ │ │ ├── exercice.component.html │ │ │ │ ├── exercice.component.spec.ts │ │ │ │ ├── exercice.component.ts │ │ │ │ ├── exercice.module.ts │ │ │ │ └── items.ts │ │ │ ├── 01-single │ │ │ │ ├── exercice-routing.module.ts │ │ │ │ ├── exercice.component.css │ │ │ │ ├── exercice.component.html │ │ │ │ ├── exercice.component.spec.ts │ │ │ │ ├── exercice.component.ts │ │ │ │ └── exercice.module.ts │ │ │ ├── 02-multi │ │ │ │ ├── exercice-routing.module.ts │ │ │ │ ├── exercice.component.css │ │ │ │ ├── exercice.component.html │ │ │ │ ├── exercice.component.spec.ts │ │ │ │ ├── exercice.component.ts │ │ │ │ ├── exercice.module.ts │ │ │ │ ├── movie.spec.ts │ │ │ │ └── movie.ts │ │ │ ├── 03-init-class │ │ │ │ ├── exercice-routing.module.ts │ │ │ │ ├── exercice.component.css │ │ │ │ ├── exercice.component.html │ │ │ │ ├── exercice.component.spec.ts │ │ │ │ ├── exercice.component.ts │ │ │ │ ├── exercice.module.ts │ │ │ │ ├── movie.spec.ts │ │ │ │ └── movie.ts │ │ │ ├── 04-prototype │ │ │ │ ├── exercice-routing.module.ts │ │ │ │ ├── exercice.component.css │ │ │ │ ├── exercice.component.html │ │ │ │ ├── exercice.component.spec.ts │ │ │ │ ├── exercice.component.ts │ │ │ │ └── exercice.module.ts │ │ │ ├── 05-form-control │ │ │ │ ├── exercice-routing.module.ts │ │ │ │ ├── exercice.component.css │ │ │ │ ├── exercice.component.html │ │ │ │ ├── exercice.component.spec.ts │ │ │ │ ├── exercice.component.ts │ │ │ │ └── exercice.module.ts │ │ │ ├── 06-form-control-class │ │ │ │ ├── exercice-routing.module.ts │ │ │ │ ├── exercice.component.css │ │ │ │ ├── exercice.component.html │ │ │ │ ├── exercice.component.spec.ts │ │ │ │ ├── exercice.component.ts │ │ │ │ ├── exercice.module.ts │ │ │ │ ├── movie.ts │ │ │ │ └── pretty-json.pipe.ts │ │ │ ├── 07-form-group │ │ │ │ ├── exercice-routing.module.ts │ │ │ │ ├── exercice.component.css │ │ │ │ ├── exercice.component.html │ │ │ │ ├── exercice.component.spec.ts │ │ │ │ ├── exercice.component.ts │ │ │ │ ├── exercice.module.ts │ │ │ │ └── pretty-json.pipe.ts │ │ │ ├── 08-form-builder │ │ │ │ ├── exercice-routing.module.ts │ │ │ │ ├── exercice.component.css │ │ │ │ ├── exercice.component.html │ │ │ │ ├── exercice.component.spec.ts │ │ │ │ ├── exercice.component.ts │ │ │ │ ├── exercice.module.ts │ │ │ │ └── pretty-json.pipe.ts │ │ │ ├── 09-form-builder-nested │ │ │ │ ├── exercice-routing.module.ts │ │ │ │ ├── exercice.component.css │ │ │ │ ├── exercice.component.html │ │ │ │ ├── exercice.component.spec.ts │ │ │ │ ├── exercice.component.ts │ │ │ │ ├── exercice.module.ts │ │ │ │ ├── movie.ts │ │ │ │ └── pretty-json.pipe.ts │ │ │ ├── 10-form-array │ │ │ │ ├── exercice-routing.module.ts │ │ │ │ ├── exercice.component.css │ │ │ │ ├── exercice.component.html │ │ │ │ ├── exercice.component.spec.ts │ │ │ │ ├── exercice.component.ts │ │ │ │ ├── exercice.module.ts │ │ │ │ ├── movie.ts │ │ │ │ └── pretty-json.pipe.ts │ │ │ ├── 11-form-multi │ │ │ │ ├── exercice-routing.module.ts │ │ │ │ ├── exercice.component.css │ │ │ │ ├── exercice.component.html │ │ │ │ ├── exercice.component.spec.ts │ │ │ │ ├── exercice.component.ts │ │ │ │ ├── exercice.module.ts │ │ │ │ ├── movie.ts │ │ │ │ └── pretty-json.pipe.ts │ │ │ ├── tutorial-routing.module.ts │ │ │ ├── tutorial.component.css │ │ │ ├── tutorial.component.html │ │ │ ├── tutorial.component.spec.ts │ │ │ ├── tutorial.component.ts │ │ │ └── tutorial.module.ts │ │ └── example-services │ │ │ ├── safe.pipe.ts │ │ │ ├── song │ │ │ ├── mock-songs.ts │ │ │ ├── song.service.spec.ts │ │ │ ├── song.service.ts │ │ │ └── song.ts │ │ │ ├── tutorial-routing.module.ts │ │ │ ├── tutorial.component.css │ │ │ ├── tutorial.component.html │ │ │ ├── tutorial.component.spec.ts │ │ │ ├── tutorial.component.ts │ │ │ └── tutorial.module.ts │ │ └── general │ │ ├── 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-routing.module.ts │ │ ├── contact.component.css │ │ ├── contact.component.html │ │ ├── contact.component.spec.ts │ │ ├── contact.component.ts │ │ ├── contact.module.ts │ │ ├── mailing │ │ │ ├── mailing-routing.module.ts │ │ │ ├── mailing.component.css │ │ │ ├── mailing.component.html │ │ │ ├── mailing.component.spec.ts │ │ │ ├── mailing.component.ts │ │ │ └── mailing.module.ts │ │ ├── mapping │ │ │ ├── mapping-routing.module.ts │ │ │ ├── mapping.component.css │ │ │ ├── mapping.component.html │ │ │ ├── mapping.component.spec.ts │ │ │ ├── mapping.component.ts │ │ │ └── mapping.module.ts │ │ └── website │ │ │ ├── website-routing.module.ts │ │ │ ├── website.component.css │ │ │ ├── website.component.html │ │ │ ├── website.component.spec.ts │ │ │ ├── website.component.ts │ │ │ └── website.module.ts │ │ ├── home │ │ ├── feature.ts │ │ ├── home.component.css │ │ ├── home.component.html │ │ ├── home.component.spec.ts │ │ └── home.component.ts │ │ ├── login │ │ ├── login-routing.module.ts │ │ ├── login.component.css │ │ ├── login.component.html │ │ ├── login.component.spec.ts │ │ ├── login.component.ts │ │ └── login.module.ts │ │ ├── not-found │ │ ├── not-found.component.css │ │ ├── not-found.component.html │ │ ├── not-found.component.spec.ts │ │ └── not-found.component.ts │ │ └── signup │ │ ├── signup-routing.module.ts │ │ ├── signup.component.css │ │ ├── signup.component.html │ │ ├── signup.component.spec.ts │ │ ├── signup.component.ts │ │ └── signup.module.ts ├── assets │ ├── .gitkeep │ └── params │ │ ├── css │ │ ├── fonts.googleapis.css │ │ └── fonts.googleapis.min.css │ │ ├── images │ │ ├── channels │ │ │ ├── cinemax.jpg │ │ │ ├── cw.jpg │ │ │ ├── discovery-channel.jpg │ │ │ ├── disney-channel.jpg │ │ │ ├── fox.jpg │ │ │ ├── hbo.jpg │ │ │ ├── history.jpg │ │ │ ├── hulu.jpg │ │ │ ├── mtv.jpg │ │ │ ├── nbc.jpg │ │ │ ├── netflix.jpg │ │ │ ├── showtime.jpg │ │ │ └── usa-network.jpg │ │ ├── example-bootstrap │ │ │ └── movie-screen.jpg │ │ ├── logo │ │ │ ├── ganatan-logo.png │ │ │ └── ganatan-logo@2x.png │ │ └── studio │ │ │ ├── 2560px-Valve_old_logo.svg.png │ │ │ ├── Bioware-logo.png │ │ │ ├── Electronic_Arts-Logo.wine.png │ │ │ ├── Logo-Nintendo-1.jpg │ │ │ ├── Naughty-dog-logo.png │ │ │ └── Rockstar_Games_Logo.svg.png │ │ └── js │ │ ├── popovers.js │ │ ├── toasts.js │ │ └── tooltips.js ├── environments │ ├── environment.development.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.server.ts ├── 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 /.dockerignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | node_modules 3 | dist -------------------------------------------------------------------------------- /.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 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "ignorePatterns": [ 4 | "projects/**/*" 5 | ], 6 | "overrides": [ 7 | { 8 | "files": [ 9 | "*.ts" 10 | ], 11 | "extends": [ 12 | "eslint:recommended", 13 | "plugin:@typescript-eslint/recommended", 14 | "plugin:@angular-eslint/recommended", 15 | "plugin:@angular-eslint/template/process-inline-templates" 16 | ], 17 | "rules": { 18 | "@angular-eslint/directive-selector": [ 19 | "error", 20 | { 21 | "type": "attribute", 22 | "prefix": "app", 23 | "style": "camelCase" 24 | } 25 | ], 26 | "@angular-eslint/component-selector": [ 27 | "error", 28 | { 29 | "type": "element", 30 | "prefix": "app", 31 | "style": "kebab-case" 32 | } 33 | ], 34 | "no-undefined": "error", 35 | "no-var": "error", 36 | "prefer-const": "error", 37 | "func-names": "error", 38 | "id-length": "error", 39 | "newline-before-return": "error", 40 | "space-before-blocks": "error", 41 | "no-alert": "error" 42 | } 43 | }, 44 | { 45 | "files": [ 46 | "*.html" 47 | ], 48 | "extends": [ 49 | "plugin:@angular-eslint/template/recommended", 50 | "plugin:@angular-eslint/template/accessibility" 51 | ], 52 | "rules": { 53 | } 54 | } 55 | ] 56 | } 57 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-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 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:latest 2 | 3 | WORKDIR /app 4 | COPY . . 5 | RUN npm install 6 | RUN npm run build 7 | 8 | RUN rm -rf node_modules 9 | 10 | EXPOSE 4000 11 | 12 | CMD ["node", "dist/angular-starter/server/server.mjs"] -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular 17 Example SSR 2 | 3 | > An Angular starter kit featuring [Angular 17.2.3](https://angular.io), [Angular CLI 17.2.2](https://cli.angular.io/) 4 | 5 | > it's part of a repo series designed to create a Progressive Web App with Angular 6 | 7 | # Web Application Live Demo 8 |

9 |

10 | 11 | Angular 16 Example 
 12 |       Application 13 | 14 |

15 |

16 | 17 | ## Quick start 18 | 19 | ```bash 20 | # choose a repo 21 | # download the example or clone the repo from github 22 | git clone https://github.com/ganatan/angular-ssr.git 23 | 24 | # download the example or clone the repo from gitlab 25 | git clone https://gitlab.com/ganatan/angular-ssr.git 26 | 27 | # change directory 28 | cd angular-ssr 29 | 30 | # install the repo with npm 31 | npm install 32 | 33 | # start the server 34 | npm start 35 | 36 | ``` 37 | in your browser go to [http://localhost:4200](http://localhost:4200) 38 | 39 | ## Getting Started 40 | 41 | 42 | ### Installation 43 | * `npm install` (installing dependencies) 44 | * `npm outdated` (verifying dependencies) 45 | 46 | ### Developpement 47 | * `npm run start` 48 | * in your browser [http://localhost:4200](http://localhost:4200) 49 | 50 | 51 | ## Linter 52 | * `npm run lint` 53 | 54 | ## Tests 55 | * `npm run test` 56 | * `npm run coverage` 57 | 58 | ### Compilation 59 | * `npm run build` ( with SSR) 60 | 61 | ### Production 62 | * `npm run serve` 63 | * in your browser [http://localhost:4000](http://localhost:4000) 64 | 65 | 66 | 67 | ## Tests 68 | * `npm run test` 69 | 70 | 71 | ### Prototype Bootstrap 5 72 | * `change directory` cd ui 73 | * launch html pages in your browser 74 | 75 | 76 | ### Angular & Docker 77 | 78 | * `build image` 79 | * docker build -t angular-starter:1.0.0 . 80 | 81 | * `run container` 82 | * docker run -d -p 4000:4000 angular-starter:1.0.0 83 | 84 | * `run container mode bash` 85 | * docker run -it angular-starter:1.0.0 /bin/bash 86 | 87 | 88 | * in your browser [http://localhost:4000](http://localhost:4000) 89 | 90 | 91 | ### Author 92 | * Author : danny 93 | 94 | ### Documentation 95 | 96 | English Tutorials 97 | - Tutorials Step-by-Step - https://www.ganatan.com/tutorials/en 98 | 99 | Tutoriels en français 100 | - Installation - https://www.ganatan.com/tutorials/modules-avec-angular 101 | - Tutoriels Etape par étape - https://www.ganatan.com/tutorials 102 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-starter", 3 | "version": "17.2.3", 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 dist/angular-starter/server/server.mjs" 14 | }, 15 | "private": true, 16 | "dependencies": { 17 | "@angular/animations": "17.2.3", 18 | "@angular/common": "17.2.3", 19 | "@angular/compiler": "17.2.3", 20 | "@angular/core": "17.2.3", 21 | "@angular/forms": "17.2.3", 22 | "@angular/platform-browser": "17.2.3", 23 | "@angular/platform-browser-dynamic": "17.2.3", 24 | "@angular/platform-server": "17.2.3", 25 | "@angular/router": "17.2.3", 26 | "@angular/ssr": "17.2.2", 27 | "@fortawesome/fontawesome-free": "6.5.1", 28 | "bootstrap": "5.3.3", 29 | "express": "4.18.3", 30 | "rxjs": "7.8.1", 31 | "tslib": "2.6.2", 32 | "zone.js": "0.14.4" 33 | }, 34 | "devDependencies": { 35 | "@angular-devkit/build-angular": "17.2.2", 36 | "@angular-eslint/builder": "17.2.1", 37 | "@angular-eslint/eslint-plugin": "17.2.1", 38 | "@angular-eslint/eslint-plugin-template": "17.2.1", 39 | "@angular-eslint/schematics": "17.2.1", 40 | "@angular-eslint/template-parser": "17.2.1", 41 | "@angular/cli": "17.2.2", 42 | "@angular/compiler-cli": "17.2.3", 43 | "@types/express": "4.17.21", 44 | "@types/jasmine": "5.1.4", 45 | "@types/node": "20.11.24", 46 | "@typescript-eslint/eslint-plugin": "7.1.1", 47 | "@typescript-eslint/parser": "7.1.1", 48 | "eslint": "8.57.0", 49 | "jasmine-core": "5.1.2", 50 | "karma": "6.4.3", 51 | "karma-chrome-launcher": "3.2.0", 52 | "karma-coverage": "2.2.1", 53 | "karma-jasmine": "5.1.0", 54 | "karma-jasmine-html-reporter": "2.1.0", 55 | "typescript": "5.2.2" 56 | } 57 | } -------------------------------------------------------------------------------- /server.ts: -------------------------------------------------------------------------------- 1 | import { APP_BASE_HREF } from '@angular/common'; 2 | import { CommonEngine } from '@angular/ssr'; 3 | import express from 'express'; 4 | import { fileURLToPath } from 'node:url'; 5 | import { dirname, join, resolve } from 'node:path'; 6 | import bootstrap from './src/main.server'; 7 | 8 | // The Express app is exported so that it can be used by serverless Functions. 9 | export function app(): express.Express { 10 | const server = express(); 11 | const serverDistFolder = dirname(fileURLToPath(import.meta.url)); 12 | const browserDistFolder = resolve(serverDistFolder, '../browser'); 13 | const indexHtml = join(serverDistFolder, 'index.server.html'); 14 | 15 | const commonEngine = new CommonEngine(); 16 | 17 | server.set('view engine', 'html'); 18 | server.set('views', browserDistFolder); 19 | 20 | // Example Express Rest API endpoints 21 | // server.get('/api/**', (req, res) => { }); 22 | // Serve static files from /browser 23 | server.get('*.*', express.static(browserDistFolder, { 24 | maxAge: '1y' 25 | })); 26 | 27 | // All regular routes use the Angular engine 28 | server.get('*', (req, res, next) => { 29 | const { protocol, originalUrl, baseUrl, headers } = req; 30 | 31 | commonEngine 32 | .render({ 33 | bootstrap, 34 | documentFilePath: indexHtml, 35 | url: `${protocol}://${headers.host}${originalUrl}`, 36 | publicPath: browserDistFolder, 37 | providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }], 38 | }) 39 | .then((html) => res.send(html)) 40 | .catch((err) => next(err)); 41 | }); 42 | 43 | return server; 44 | } 45 | 46 | function run(): void { 47 | const port = process.env['PORT'] || 4000; 48 | 49 | // Start up the Node server 50 | const server = app(); 51 | server.listen(port, () => { 52 | console.log(`Node Express server listening on http://localhost:${port}`); 53 | }); 54 | } 55 | 56 | run(); 57 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 38 | 39 |
40 | 41 |
42 | 43 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | import { RouterTestingModule } from '@angular/router/testing'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async () => { 7 | await TestBed.configureTestingModule({ 8 | imports: [AppComponent, RouterTestingModule], 9 | }).compileComponents(); 10 | }); 11 | 12 | it('should create the app', () => { 13 | const fixture = TestBed.createComponent(AppComponent); 14 | const app = fixture.componentInstance; 15 | expect(app).toBeTruthy(); 16 | }); 17 | 18 | it(`should have the 'angular-routing' title`, () => { 19 | const fixture = TestBed.createComponent(AppComponent); 20 | const app = fixture.componentInstance; 21 | expect(app.title).toEqual('angular-routing'); 22 | }); 23 | 24 | }); -------------------------------------------------------------------------------- /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 | import { Inject, PLATFORM_ID } from '@angular/core'; 6 | import { isPlatformBrowser } from '@angular/common'; 7 | 8 | @Component({ 9 | selector: 'app-root', 10 | standalone: true, 11 | imports: [CommonModule, RouterLink, RouterOutlet], 12 | templateUrl: './app.component.html', 13 | styleUrls: ['./app.component.css'] 14 | }) 15 | 16 | export class AppComponent implements OnInit { 17 | title = 'angular-routing'; 18 | footerUrl = 'https://www.ganatan.com'; 19 | footerLink = 'www.ganatan.com'; 20 | 21 | constructor( 22 | @Inject(PLATFORM_ID) private platformId: object) { 23 | } 24 | 25 | ngOnInit(): void { 26 | 27 | if (isPlatformBrowser(this.platformId)) { 28 | const navMain = document.getElementById('navbarCollapse'); 29 | if (navMain) { 30 | navMain.onclick = function onClick() { 31 | if (navMain) { 32 | navMain.classList.remove("show"); 33 | } 34 | } 35 | } 36 | } 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /src/app/app.config.server.ts: -------------------------------------------------------------------------------- 1 | import { mergeApplicationConfig, ApplicationConfig } from '@angular/core'; 2 | import { provideServerRendering } from '@angular/platform-server'; 3 | import { appConfig } from './app.config'; 4 | 5 | const serverConfig: ApplicationConfig = { 6 | providers: [ 7 | provideServerRendering() 8 | ] 9 | }; 10 | 11 | export const config = mergeApplicationConfig(appConfig, serverConfig); 12 | -------------------------------------------------------------------------------- /src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.routes'; 5 | import { provideClientHydration } from '@angular/platform-browser'; 6 | 7 | export const appConfig: ApplicationConfig = { 8 | providers: [provideRouter(routes), provideClientHydration()] 9 | }; 10 | -------------------------------------------------------------------------------- /src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { HomeComponent } from './pages/general/home/home.component'; 4 | import { NotFoundComponent } from './pages/general/not-found/not-found.component'; 5 | 6 | export const routes: Routes = [ 7 | { path: '', component: HomeComponent, }, 8 | 9 | { 10 | path: 'bootstrap', 11 | loadChildren: () => import('./pages/application/example-bootstrap/tutorial.module') 12 | .then(mod => mod.TutorialModule) 13 | }, 14 | { 15 | path: 'components', 16 | loadChildren: () => import('./pages/application/example-components/tutorial.module') 17 | .then(mod => mod.TutorialModule) 18 | }, 19 | { 20 | path: 'forms', 21 | loadChildren: () => import('./pages/application/example-forms/tutorial.module') 22 | .then(mod => mod.TutorialModule) 23 | }, 24 | { 25 | path: 'services', 26 | loadChildren: () => import('./pages/application/example-services/tutorial.module') 27 | .then(mod => mod.TutorialModule) 28 | }, 29 | 30 | { 31 | path: 'login', 32 | loadChildren: () => import('./pages/general/login/login.module') 33 | .then(mod => mod.LoginModule) 34 | }, 35 | { 36 | path: 'signup', 37 | loadChildren: () => import('./pages/general/signup/signup.module') 38 | .then(mod => mod.SignupModule) 39 | }, 40 | { 41 | path: 'contact', 42 | loadChildren: () => import('./pages/general/contact/contact.module') 43 | .then(mod => mod.ContactModule) 44 | }, 45 | 46 | { 47 | path: 'about', 48 | loadChildren: () => import('./pages/general/about/about.routes').then(routes => routes.routes) 49 | }, 50 | 51 | { path: '**', component: NotFoundComponent } 52 | ]; -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/00-main/exercice-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { ExerciceComponent } from './exercice.component'; 4 | 5 | const routes: Routes = [ 6 | { path: '', component: ExerciceComponent, children: [] } 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [RouterModule.forChild(routes)], 11 | exports: [RouterModule] 12 | }) 13 | export class ExerciceRoutingModule { } 14 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/00-main/exercice.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 | } -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/00-main/exercice.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Bootstrap Features

4 |
5 |
6 | 7 |
8 |
9 | 25 |
26 |
-------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/00-main/exercice.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | 4 | import { ExerciceComponent } from './exercice.component'; 5 | 6 | describe('ExampleMainComponent', () => { 7 | let component: ExerciceComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | TestBed.configureTestingModule({ 12 | imports: [ 13 | RouterTestingModule 14 | ], 15 | declarations: [ExerciceComponent] 16 | }) 17 | .compileComponents(); 18 | }); 19 | 20 | beforeEach(() => { 21 | fixture = TestBed.createComponent(ExerciceComponent); 22 | component = fixture.componentInstance; 23 | fixture.detectChanges(); 24 | }); 25 | 26 | it('should create', () => { 27 | expect(component).toBeTruthy(); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/00-main/exercice.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { ITEMS } from './items'; 3 | 4 | @Component({ 5 | selector: 'app-prototype', 6 | templateUrl: './exercice.component.html', 7 | styleUrls: ['./exercice.component.css'] 8 | }) 9 | export class ExerciceComponent { 10 | items = ITEMS; 11 | } 12 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/00-main/exercice.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 3 | import { CommonModule } from '@angular/common'; 4 | 5 | import { ExerciceRoutingModule } from './exercice-routing.module'; 6 | import { ExerciceComponent } from './exercice.component'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | ExerciceComponent, 11 | ], 12 | providers: [ 13 | ], 14 | imports: [ 15 | ExerciceRoutingModule, 16 | FormsModule, 17 | CommonModule, 18 | ReactiveFormsModule, 19 | ], 20 | exports: [ 21 | ExerciceComponent 22 | ], 23 | }) 24 | export class ExerciceModule { } 25 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/00-main/items.ts: -------------------------------------------------------------------------------- 1 | export class Item { 2 | 3 | id: number; 4 | name: string; 5 | link: string; 6 | icon: string; 7 | 8 | constructor() { 9 | this.id = 0; 10 | this.name = ''; 11 | this.link = ''; 12 | this.icon = ''; 13 | } 14 | } 15 | 16 | export const ITEMS: Item[] = 17 | [ 18 | { id: 1, name: 'Accordions', link: 'accordions', icon: 'far fa-address-card' }, 19 | { id: 2, name: 'Alerts', link: 'alerts', icon: 'fas fa-user' }, 20 | { id: 3, name: 'Badges', link: 'badges', icon: 'fas fa-user-friends' }, 21 | { id: 4, name: 'Blockquotes', link: 'blockquotes', icon: 'fas fa-house-user' }, 22 | { id: 5, name: 'Breadcrumb', link: 'breadcrumb', icon: 'fab fa-app-store' }, 23 | { id: 6, name: 'Buttons', link: 'buttons', icon: 'fab fa-artstation' }, 24 | { id: 7, name: 'Cards', link: 'cards', icon: 'fab fa-asymmetrik' }, 25 | { id: 8, name: 'Checkbox', link: 'checkbox', icon: 'fas fa-atom' }, 26 | { id: 9, name: 'Collapse', link: 'collapse', icon: 'fas fa-balance-scale-right' }, 27 | { id: 10, name: 'Dropdowns', link: 'dropdowns', icon: 'fas fa-bahai' }, 28 | { id: 11, name: 'Forms', link: 'forms', icon: 'fas fa-basketball-ball' }, 29 | { id: 12, name: 'List-group', link: 'list-group', icon: 'fab fa-battle-net' }, 30 | { id: 13, name: 'Modal', link: 'modal', icon: 'fab fa-canadian-maple-leaf' }, 31 | { id: 14, name: 'Pagination', link: 'pagination', icon: 'far fa-address-card' }, 32 | { id: 15, name: 'Popovers', link: 'popovers', icon: 'fab fa-jedi-order' }, 33 | { id: 16, name: 'Progress', link: 'progress', icon: 'fab fa-galactic-republic' }, 34 | { id: 17, name: 'Spinners', link: 'spinners', icon: 'fab fa-empire' }, 35 | { id: 18, name: 'Tables', link: 'tables', icon: 'fas fa-chart-line' }, 36 | { id: 19, name: 'Toasts', link: 'toasts', icon: 'fas fa-cogs' }, 37 | { id: 20, name: 'Tooltips', link: 'tooltips', icon: 'fab fa-edge' }, 38 | { id: 21, name: 'Typography', link: 'typography', icon: 'fas fa-dove' }, 39 | ]; 40 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/accordions/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-bootstrap/accordions/items.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/accordions/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 AccordionsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/alerts/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-bootstrap/alerts/items.component.css -------------------------------------------------------------------------------- /src/app/pages/application/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 AlertsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/badges/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-bootstrap/badges/items.component.css -------------------------------------------------------------------------------- /src/app/pages/application/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 | -------------------------------------------------------------------------------- /src/app/pages/application/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 BadgesComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/blockquotes/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-bootstrap/blockquotes/items.component.css -------------------------------------------------------------------------------- /src/app/pages/application/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 | 17 |
18 |
19 |
20 |
21 |

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

22 |
23 | 26 |
27 |
28 |
29 |
30 |

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

31 |
32 | 35 |
36 |
37 |
38 |
39 |
40 |
-------------------------------------------------------------------------------- /src/app/pages/application/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 BlockquotesComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/breadcrumb/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-bootstrap/breadcrumb/items.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/breadcrumb/items.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Breadcrumb

4 | 9 | 15 | 22 |
23 |
24 | -------------------------------------------------------------------------------- /src/app/pages/application/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 BreadcrumbComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/buttons/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-bootstrap/buttons/items.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/buttons/items.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Buttons

4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |

Button Tags

18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 |
26 |

Outline buttons

27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
36 |
37 |
38 |
39 |

Sizes

40 | 41 | 42 | 43 | 44 |
45 |
-------------------------------------------------------------------------------- /src/app/pages/application/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 ButtonsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/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 | } -------------------------------------------------------------------------------- /src/app/pages/application/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 CardsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/checkbox/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-bootstrap/checkbox/items.component.css -------------------------------------------------------------------------------- /src/app/pages/application/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 CheckboxComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/collapses/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-bootstrap/collapses/items.component.css -------------------------------------------------------------------------------- /src/app/pages/application/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 CollapsesComponent { 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 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/dropdowns/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-bootstrap/dropdowns/items.component.css -------------------------------------------------------------------------------- /src/app/pages/application/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 DropdownsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/forms/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-bootstrap/forms/items.component.css -------------------------------------------------------------------------------- /src/app/pages/application/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 |
-------------------------------------------------------------------------------- /src/app/pages/application/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 FormsComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/list-group/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-bootstrap/list-group/items.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/list-group/items.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

List group

4 |
    5 |
  • Cras justo odio
  • 6 |
  • Dapibus ac facilisis in
  • 7 |
  • Morbi leo risus
  • 8 |
  • Porta ac consectetur ac
  • 9 |
  • Vestibulum at eros
  • 10 |
11 |
12 | 23 |
24 |
    25 |
  • 26 | Cras justo odio 27 | 14 28 |
  • 29 |
  • 30 | Dapibus ac facilisis in 31 | 2 32 |
  • 33 |
  • 34 | Morbi leo risus 35 | 1 36 |
  • 37 |
38 |
39 |
-------------------------------------------------------------------------------- /src/app/pages/application/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 ListGroupComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/pagination/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-bootstrap/pagination/items.component.css -------------------------------------------------------------------------------- /src/app/pages/application/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 PaginationComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/progress/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-bootstrap/progress/items.component.css -------------------------------------------------------------------------------- /src/app/pages/application/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 ProgressComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/spinners/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-bootstrap/spinners/items.component.css -------------------------------------------------------------------------------- /src/app/pages/application/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 SpinnersComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/tables/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-bootstrap/tables/items.component.css -------------------------------------------------------------------------------- /src/app/pages/application/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 TablesComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/tutorial-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { TutorialComponent } from './tutorial.component'; 5 | 6 | import { AccordionsComponent } from './accordions/items.component'; 7 | import { AlertsComponent } from './alerts/items.component'; 8 | import { BadgesComponent } from './badges/items.component'; 9 | import { BlockquotesComponent } from './blockquotes/items.component'; 10 | import { BreadcrumbComponent } from './breadcrumb/items.component'; 11 | import { ButtonsComponent } from './buttons/items.component'; 12 | import { CardsComponent } from './cards/items.component'; 13 | import { CheckboxComponent } from './checkbox/items.component'; 14 | import { CollapsesComponent } from './collapses/items.component'; 15 | import { DropdownsComponent } from './dropdowns/items.component'; 16 | import { FormsComponent } from './forms/items.component'; 17 | import { ListGroupComponent } from './list-group/items.component'; 18 | import { PaginationComponent } from './pagination/items.component'; 19 | import { ProgressComponent } from './progress/items.component'; 20 | import { SpinnersComponent } from './spinners/items.component'; 21 | import { TablesComponent } from './tables/items.component'; 22 | import { TypographyComponent } from './typography/items.component'; 23 | 24 | const routes: Routes = [ 25 | { 26 | path: '', component: TutorialComponent, children: [ 27 | { 28 | path: '', 29 | loadChildren: () => import('./00-main/exercice.module') 30 | .then(mod => mod.ExerciceModule) 31 | }, 32 | { path: 'accordions', component: AccordionsComponent }, 33 | { path: 'alerts', component: AlertsComponent }, 34 | { path: 'badges', component: BadgesComponent }, 35 | { path: 'blockquotes', component: BlockquotesComponent }, 36 | { path: 'breadcrumb', component: BreadcrumbComponent }, 37 | { path: 'buttons', component: ButtonsComponent }, 38 | { path: 'cards', component: CardsComponent }, 39 | { path: 'collapse', component: CollapsesComponent }, 40 | { path: 'checkbox', component: CheckboxComponent }, 41 | { path: 'dropdowns', component: DropdownsComponent }, 42 | { path: 'forms', component: FormsComponent }, 43 | { path: 'list-group', component: ListGroupComponent }, 44 | { path: 'pagination', component: PaginationComponent }, 45 | { path: 'progress', component: ProgressComponent }, 46 | { path: 'spinners', component: SpinnersComponent }, 47 | { path: 'tables', component: TablesComponent }, 48 | { path: 'typography', component: TypographyComponent }, 49 | { 50 | path: '', 51 | redirectTo: '/bootstrap/alerts', 52 | pathMatch: 'full' 53 | }, 54 | { path: '**', component: AlertsComponent }, 55 | ] 56 | }, 57 | ]; 58 | 59 | @NgModule({ 60 | imports: [RouterModule.forChild(routes)], 61 | exports: [RouterModule] 62 | }) 63 | export class TutorialRoutingModule { } 64 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/tutorial.component.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 | } -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/tutorial.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TutorialComponent } from './tutorial.component'; 4 | import { FormBuilder } from '@angular/forms'; 5 | import { RouterTestingModule } from '@angular/router/testing'; 6 | 7 | describe('ExampleBootstrapComponent', () => { 8 | let component: TutorialComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(async () => { 12 | TestBed.configureTestingModule({ 13 | imports: [ 14 | RouterTestingModule 15 | ], 16 | declarations: [ 17 | TutorialComponent, 18 | ], 19 | providers: [ 20 | FormBuilder 21 | ] 22 | }) 23 | .compileComponents(); 24 | }); 25 | 26 | beforeEach(() => { 27 | fixture = TestBed.createComponent(TutorialComponent); 28 | component = fixture.componentInstance; 29 | fixture.detectChanges(); 30 | }); 31 | 32 | it('should create', () => { 33 | expect(component).toBeTruthy(); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/tutorial.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-example-bootstrap', 5 | templateUrl: './tutorial.component.html', 6 | styleUrls: ['./tutorial.component.css'] 7 | }) 8 | export class TutorialComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/tutorial.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { TutorialRoutingModule } from './tutorial-routing.module'; 5 | import { TutorialComponent } from './tutorial.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | TutorialComponent, 10 | ], 11 | imports: [ 12 | CommonModule, 13 | TutorialRoutingModule 14 | ], 15 | exports: [ 16 | TutorialComponent, 17 | ], 18 | }) 19 | export class TutorialModule { } 20 | -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/typography/items.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-bootstrap/typography/items.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-bootstrap/typography/items.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Headings with h

4 |

h1. The Age of Innocence

5 |

h2. Gangs of New York

6 |

h3. The Wolf of Wall Street

7 |

h4. The Irishman

8 |
h5. Killers of the Flower Moon
9 |
h6. The Color of Money
10 |
11 |
12 |
13 |
14 |

Headings with p

15 |

h1. The King of Comedy

16 |

h2. Raging Bull

17 |

h3. New York, New York

18 |

h4. Taxi Driver

19 |

h5. Mean Streets

20 |

h6. After Hours

21 |
22 |
23 |
24 |
25 |

Display Headings

26 |

Display 1

27 |

Display 2

28 |

Display 3

29 |

Display 4

30 |

Display 5

31 |

Display 6

32 |
33 |
34 |
35 |
36 |

Inline Text Elements

37 |

You can use the mark tag to highlight text.

38 |

This line of text is meant to be treated as deleted text.

39 |

This line of text is meant to be treated as no longer accurate.

40 |

This line of text is meant to be treated as an addition to the document.

41 |

This line of text will render as underlined.

42 |

This line of text is meant to be treated as fine print.

43 |

This line rendered as bold text.

44 |

This line rendered as italicized text.

45 |
46 |
-------------------------------------------------------------------------------- /src/app/pages/application/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 TypographyComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/application/example-components/channel/channel.component.css: -------------------------------------------------------------------------------- 1 | .nga-card-component { 2 | position: relative; 3 | display: flex; 4 | flex-direction: column; 5 | min-width: 0; 6 | word-wrap: break-word; 7 | background-color: #fff; 8 | background-clip: border-box; 9 | cursor: pointer; 10 | -webkit-box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.16), 0 0px 5px 0 rgba(0, 0, 0, 0.12); 11 | box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.16), 0 0px 5px 0 rgba(0, 0, 0, 0.12); 12 | } 13 | 14 | .nga-card-component:hover { 15 | -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 16 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 17 | } 18 | -------------------------------------------------------------------------------- /src/app/pages/application/example-components/channel/channel.component.html: -------------------------------------------------------------------------------- 1 |
2 | {{channel.name }} 3 |
4 |

{{ channel.releaseDate }}

5 | 6 |
7 |
-------------------------------------------------------------------------------- /src/app/pages/application/example-components/channel/channel.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ChannelComponent } from './channel.component'; 4 | 5 | describe('ChannelComponent', () => { 6 | let component: ChannelComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ChannelComponent] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ChannelComponent); 18 | component = fixture.componentInstance; 19 | component.channel = { 20 | title: 'NetFlix', 21 | name: 'NetFlix', 22 | releaseDate: '03/01/1982', 23 | }; 24 | fixture.detectChanges(); 25 | }); 26 | 27 | it('should create', () => { 28 | expect(component).toBeTruthy(); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /src/app/pages/application/example-components/channel/channel.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, EventEmitter, Output, Input } from '@angular/core'; 2 | 3 | import { Channel } from './channel'; 4 | 5 | @Component({ 6 | selector: 'app-channel', 7 | templateUrl: './channel.component.html', 8 | styleUrls: ['./channel.component.css'] 9 | }) 10 | export class ChannelComponent { 11 | 12 | @Input() channel: Channel; 13 | @Input() index: number; 14 | @Output() selected: EventEmitter = new EventEmitter(); 15 | 16 | constructor() { 17 | this.channel = new Channel(); 18 | this.index = 0; 19 | } 20 | 21 | select(channel: Channel): void { 22 | this.selected.emit(channel); 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /src/app/pages/application/example-components/channel/channel.ts: -------------------------------------------------------------------------------- 1 | export class Channel { 2 | 3 | title: string; 4 | name: string; 5 | releaseDate: string; 6 | 7 | constructor() { 8 | this.title = ''; 9 | this.name = ''; 10 | this.releaseDate = ''; 11 | } 12 | 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pages/application/example-components/tutorial-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { TutorialComponent } from './tutorial.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: TutorialComponent, 10 | }, 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule] 16 | }) 17 | export class TutorialRoutingModule { } 18 | -------------------------------------------------------------------------------- /src/app/pages/application/example-components/tutorial.component.css: -------------------------------------------------------------------------------- 1 | .nga-card-component { 2 | position: relative; 3 | display: flex; 4 | flex-direction: column; 5 | min-width: 0; 6 | word-wrap: break-word; 7 | background-color: #fff; 8 | background-clip: border-box; 9 | cursor: pointer; 10 | -webkit-box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.16), 0 0px 5px 0 rgba(0, 0, 0, 0.12); 11 | box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.16), 0 0px 5px 0 rgba(0, 0, 0, 0.12); 12 | } 13 | 14 | .nga-card-component:hover { 15 | -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 16 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 17 | } 18 | -------------------------------------------------------------------------------- /src/app/pages/application/example-components/tutorial.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Components Features

5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
{{ channelSelected.title }}
13 |
{{ channelSelected.releaseDate }}
14 |
15 | 20 |
21 |
22 | channel.name 24 | 25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | 33 |
34 |
35 |
36 |
37 |
-------------------------------------------------------------------------------- /src/app/pages/application/example-components/tutorial.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TutorialComponent } from './tutorial.component'; 4 | import { ChannelComponent } from './channel/channel.component'; 5 | 6 | describe('ExampleComponentsComponent', () => { 7 | let component: TutorialComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | TestBed.configureTestingModule({ 12 | declarations: [ 13 | TutorialComponent, 14 | ChannelComponent, 15 | ] 16 | }) 17 | .compileComponents(); 18 | }); 19 | 20 | beforeEach(() => { 21 | fixture = TestBed.createComponent(TutorialComponent); 22 | component = fixture.componentInstance; 23 | fixture.detectChanges(); 24 | }); 25 | 26 | it('should create', () => { 27 | expect(component).toBeTruthy(); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /src/app/pages/application/example-components/tutorial.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | import { Channel } from './channel/channel'; 4 | 5 | @Component({ 6 | selector: 'app-example-components', 7 | templateUrl: './tutorial.component.html', 8 | styleUrls: ['./tutorial.component.css'] 9 | }) 10 | export class TutorialComponent implements OnInit { 11 | 12 | channels: Channel[]; 13 | channelSelected: Channel; 14 | 15 | constructor() { 16 | this.channelSelected = new Channel(); 17 | this.channels = 18 | [ 19 | { title: 'Disney Channel', name: 'disney-channel', releaseDate: '22/03/1997' }, 20 | { title: 'FOX', name: 'fox', releaseDate: '09/10/1986' }, 21 | { title: 'Discovery Channel', name: 'discovery-channel', releaseDate: '17/06/1985' }, 22 | { title: 'HBO', name: 'hbo', releaseDate: '08/11/1972' }, 23 | { title: 'History', name: 'history', releaseDate: '01/01/1995' }, 24 | { title: 'Hulu', name: 'hulu', releaseDate: '29/03/2007' }, 25 | { title: 'MTV', name: 'mtv', releaseDate: '01/08/1981' }, 26 | { title: 'NBC', name: 'nbc', releaseDate: '01/07/1941' }, 27 | { title: 'Netflix', name: 'netflix', releaseDate: '29/08/1997' }, 28 | { title: 'Showtime', name: 'showtime', releaseDate: '09/05/1976' }, 29 | { title: 'USA Nnetwork', name: 'usa-network', releaseDate: '22/09/1977' }, 30 | ]; 31 | } 32 | 33 | ngOnInit(): void { 34 | this.channelSelected = this.channels[0]; 35 | } 36 | 37 | onSelected(event: Channel): void { 38 | this.channelSelected = event; 39 | } 40 | 41 | onReset(): void { 42 | this.channelSelected = new Channel(); 43 | } 44 | 45 | } 46 | -------------------------------------------------------------------------------- /src/app/pages/application/example-components/tutorial.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { TutorialRoutingModule } from './tutorial-routing.module'; 5 | import { TutorialComponent } from './tutorial.component'; 6 | import { ChannelComponent } from './channel/channel.component'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | TutorialComponent, 11 | ChannelComponent 12 | ], 13 | imports: [ 14 | CommonModule, 15 | TutorialRoutingModule 16 | ], 17 | exports: [ 18 | TutorialComponent, 19 | ], 20 | }) 21 | export class TutorialModule { } 22 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/00-main/exercice-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { ExerciceComponent } from './exercice.component'; 4 | 5 | const routes: Routes = [ 6 | { path: '', component: ExerciceComponent, children: [] } 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [RouterModule.forChild(routes)], 11 | exports: [RouterModule] 12 | }) 13 | export class ExerciceRoutingModule { } 14 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/00-main/exercice.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 | } -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/00-main/exercice.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Forms Features  

4 |
5 |
6 | 7 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/00-main/exercice.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | 4 | import { ExerciceComponent } from './exercice.component'; 5 | 6 | describe('ExampleFormsMainComponent', () => { 7 | let component: ExerciceComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | TestBed.configureTestingModule({ 12 | imports: [ 13 | RouterTestingModule 14 | ], 15 | declarations: [ExerciceComponent] 16 | }) 17 | .compileComponents(); 18 | }); 19 | 20 | beforeEach(() => { 21 | fixture = TestBed.createComponent(ExerciceComponent); 22 | component = fixture.componentInstance; 23 | fixture.detectChanges(); 24 | }); 25 | 26 | it('should create', () => { 27 | expect(component).toBeTruthy(); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/00-main/exercice.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { ITEMS } from './items'; 3 | 4 | @Component({ 5 | selector: 'app-prototype', 6 | templateUrl: './exercice.component.html', 7 | styleUrls: ['./exercice.component.css'] 8 | }) 9 | export class ExerciceComponent { 10 | items = ITEMS; 11 | } 12 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/00-main/exercice.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 3 | import { CommonModule } from '@angular/common'; 4 | 5 | import { ExerciceRoutingModule } from './exercice-routing.module'; 6 | import { ExerciceComponent } from './exercice.component'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | ExerciceComponent, 11 | ], 12 | providers: [ 13 | ], 14 | imports: [ 15 | ExerciceRoutingModule, 16 | FormsModule, 17 | CommonModule, 18 | ReactiveFormsModule, 19 | ], 20 | exports: [ 21 | ExerciceComponent 22 | ], 23 | }) 24 | export class ExerciceModule { } 25 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/00-main/items.ts: -------------------------------------------------------------------------------- 1 | export class Item { 2 | 3 | id: number; 4 | name: string; 5 | link: string; 6 | icon: string; 7 | 8 | constructor() { 9 | this.id = 0; 10 | this.name = ''; 11 | this.link = ''; 12 | this.icon = ''; 13 | } 14 | } 15 | 16 | 17 | export const ITEMS: Item[] = 18 | [ 19 | { id: 1, name: 'prototype', link: 'prototype', icon: 'far fa-address-card' }, 20 | { id: 2, name: 'form-control', link: 'form-control', icon: 'fas fa-user' }, 21 | { id: 3, name: 'form-control-class', link: 'form-control-class', icon: 'fas fa-user-friends' }, 22 | { id: 4, name: 'form-group', link: 'form-group', icon: 'fas fa-house-user' }, 23 | { id: 5, name: 'form-builder', link: 'form-builder', icon: 'fab fa-app-store' }, 24 | { id: 6, name: 'form-builder-nested', link: 'form-builder-nested', icon: 'fab fa-artstation' }, 25 | { id: 7, name: 'form-array', link: 'form-array', icon: 'fab fa-asymmetrik' }, 26 | { id: 8, name: 'form-multi', link: 'form-multi', icon: 'fas fa-atom' }, 27 | { id: 9, name: 'single', link: 'single', icon: 'fab fa-centos' }, 28 | { id: 10, name: 'multi', link: 'multi', icon: 'fas fa-chart-line' }, 29 | { id: 11, name: 'init-class', link: 'init-class', icon: 'fas fa-cogs' }, 30 | 31 | ]; 32 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/01-single/exercice-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { ExerciceComponent } from './exercice.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: ExerciceComponent, 10 | }, 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule] 16 | }) 17 | export class ExerciceRoutingModule { } 18 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/01-single/exercice.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-forms/01-single/exercice.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/01-single/exercice.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
Template Driven Form Single Test
4 |
5 |
6 |
7 |
8 |
9 | 10 | 12 |
13 |
14 | 15 | 17 |
18 | 19 |
20 |
21 |
22 | Input Result 23 | 26 | 29 |
30 |
31 |
32 |
-------------------------------------------------------------------------------- /src/app/pages/application/example-forms/01-single/exercice.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ExerciceComponent } from './exercice.component'; 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | describe('ExampleFormssingleComponent', () => { 7 | let component: ExerciceComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | TestBed.configureTestingModule({ 12 | imports: [ 13 | FormsModule, 14 | ], 15 | declarations: [ExerciceComponent] 16 | }) 17 | .compileComponents(); 18 | }); 19 | 20 | beforeEach(() => { 21 | fixture = TestBed.createComponent(ExerciceComponent); 22 | component = fixture.componentInstance; 23 | fixture.detectChanges(); 24 | }); 25 | 26 | it('should create', () => { 27 | expect(component).toBeTruthy(); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/01-single/exercice.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-exercice', 5 | templateUrl: './exercice.component.html', 6 | styleUrls: ['./exercice.component.css'] 7 | }) 8 | export class ExerciceComponent { 9 | 10 | firstName = 'Paul'; 11 | lastName = 'Atreides'; 12 | 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/01-single/exercice.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { ExerciceRoutingModule } from './exercice-routing.module'; 6 | import { ExerciceComponent } from './exercice.component'; 7 | 8 | 9 | @NgModule({ 10 | declarations: [ExerciceComponent], 11 | imports: [ 12 | CommonModule, 13 | FormsModule, 14 | ExerciceRoutingModule 15 | ], 16 | exports: [ 17 | ExerciceComponent, 18 | ], 19 | }) 20 | export class ExerciceModule { } 21 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/02-multi/exercice-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { ExerciceComponent } from './exercice.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: ExerciceComponent, 10 | }, 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule] 16 | }) 17 | export class ExerciceRoutingModule { } 18 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/02-multi/exercice.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-forms/02-multi/exercice.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/02-multi/exercice.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Template-driven Forms

4 |

Init

5 |
6 |
7 |
8 |
9 |
10 | Country : {{ country | json }}
11 | Actor : {{ actor | json }}
12 | movie : {{ movie | json }}
13 | movieAny : {{ movieAny | json }}
14 |
15 |
16 |
17 |
18 |

Item Form

19 |
20 |
21 |
22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 |
32 |
33 |
34 | 35 | 36 |
37 |
38 | 39 | 40 |
41 |
42 |
43 |
44 |
45 |
46 |
-------------------------------------------------------------------------------- /src/app/pages/application/example-forms/02-multi/exercice.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ExerciceComponent } from './exercice.component'; 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | describe('ExampleFormsMultiComponent', () => { 7 | let component: ExerciceComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | TestBed.configureTestingModule({ 12 | imports: [ 13 | FormsModule, 14 | ], 15 | declarations: [ExerciceComponent] 16 | }) 17 | .compileComponents(); 18 | }); 19 | 20 | beforeEach(() => { 21 | fixture = TestBed.createComponent(ExerciceComponent); 22 | component = fixture.componentInstance; 23 | fixture.detectChanges(); 24 | }); 25 | 26 | it('should create', () => { 27 | expect(component).toBeTruthy(); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/02-multi/exercice.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Movie } from './movie'; 3 | 4 | @Component({ 5 | selector: 'app-exercice', 6 | templateUrl: './exercice.component.html', 7 | styleUrls: ['./exercice.component.css'] 8 | }) 9 | export class ExerciceComponent { 10 | 11 | country: string; 12 | actor: string; 13 | movie: Movie = new Movie(); 14 | movieAny = { name: '' }; 15 | 16 | constructor() { 17 | this.country = 'United States'; 18 | this.actor = 'Tom Cruise'; 19 | this.movie.name = 'Edge of Tomorrow'; 20 | this.movieAny = { name: 'Avatar' }; 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/02-multi/exercice.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { ExerciceRoutingModule } from './exercice-routing.module'; 6 | import { ExerciceComponent } from './exercice.component'; 7 | 8 | 9 | @NgModule({ 10 | declarations: [ExerciceComponent], 11 | imports: [ 12 | CommonModule, 13 | FormsModule, 14 | ExerciceRoutingModule 15 | ], 16 | exports: [ 17 | ExerciceComponent, 18 | ], 19 | }) 20 | export class ExerciceModule { } 21 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/02-multi/movie.spec.ts: -------------------------------------------------------------------------------- 1 | import { Movie } from './movie'; 2 | 3 | describe('Movie', () => { 4 | it('should create an instance', () => { 5 | expect(new Movie()).toBeTruthy(); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/02-multi/movie.ts: -------------------------------------------------------------------------------- 1 | export class Movie { 2 | 3 | name: string; 4 | releaseDate: string; 5 | domestic: string; 6 | international: string; 7 | worldwide: string; 8 | franchise: boolean; 9 | 10 | constructor() { 11 | this.name = ''; 12 | this.releaseDate = ''; 13 | this.domestic = ''; 14 | this.international = ''; 15 | this.worldwide = ''; 16 | this.franchise = false; 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/03-init-class/exercice-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { ExerciceComponent } from './exercice.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: ExerciceComponent, 10 | }, 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule] 16 | }) 17 | export class ExerciceRoutingModule { } 18 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/03-init-class/exercice.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-forms/03-init-class/exercice.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/03-init-class/exercice.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Feature : Template-driven Forms

4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |

Movie : Avengers: Endgame

12 |
13 |
14 |
15 |
16 | 17 | 19 |
20 |
21 | 22 | 24 |
25 |
26 | 27 | 29 |
30 |
31 | 32 | 34 |
35 |
36 | 37 | 39 |
40 | 41 |
42 |
43 | 45 | 46 |
47 |
48 |
49 | 50 | 51 | 52 |
53 |
54 |
55 |
56 |
57 |
58 | {{ movie | json }} 59 |
60 |
-------------------------------------------------------------------------------- /src/app/pages/application/example-forms/03-init-class/exercice.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ExerciceComponent } from './exercice.component'; 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | describe('ExampleFormsInitClassComponent', () => { 7 | let component: ExerciceComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | TestBed.configureTestingModule({ 12 | imports: [ 13 | FormsModule, 14 | ], 15 | declarations: [ExerciceComponent] 16 | }) 17 | .compileComponents(); 18 | }); 19 | 20 | beforeEach(() => { 21 | fixture = TestBed.createComponent(ExerciceComponent); 22 | component = fixture.componentInstance; 23 | fixture.detectChanges(); 24 | }); 25 | 26 | it('should create', () => { 27 | expect(component).toBeTruthy(); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/03-init-class/exercice.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Movie } from './movie'; 3 | 4 | @Component({ 5 | selector: 'app-exercice', 6 | templateUrl: './exercice.component.html', 7 | styleUrls: ['./exercice.component.css'] 8 | }) 9 | export class ExerciceComponent { 10 | 11 | movie: Movie = new Movie(); 12 | 13 | constructor() { 14 | this.movie.name = 'Avengers : Endgame'; 15 | this.movie.releaseDate = '04/04/2019'; 16 | this.movie.domestic = '$858,373,000'; 17 | this.movie.international = '$2,797,800,564'; 18 | this.movie.worldwide = '$2,797,800,564'; 19 | this.movie.franchise = true; 20 | } 21 | 22 | } 23 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/03-init-class/exercice.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { ExerciceRoutingModule } from './exercice-routing.module'; 6 | import { ExerciceComponent } from './exercice.component'; 7 | 8 | 9 | @NgModule({ 10 | declarations: [ExerciceComponent], 11 | imports: [ 12 | CommonModule, 13 | FormsModule, 14 | ExerciceRoutingModule 15 | ], 16 | exports: [ 17 | ExerciceComponent, 18 | ], 19 | }) 20 | export class ExerciceModule { } 21 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/03-init-class/movie.spec.ts: -------------------------------------------------------------------------------- 1 | import { Movie } from './movie'; 2 | 3 | describe('Movie', () => { 4 | it('should create an instance', () => { 5 | expect(new Movie()).toBeTruthy(); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/03-init-class/movie.ts: -------------------------------------------------------------------------------- 1 | export class Movie { 2 | 3 | name: string; 4 | releaseDate: string; 5 | domestic: string; 6 | international: string; 7 | worldwide: string; 8 | franchise: boolean; 9 | 10 | constructor() { 11 | this.name = ''; 12 | this.releaseDate = ''; 13 | this.domestic = ''; 14 | this.international = ''; 15 | this.worldwide = ''; 16 | this.franchise = false; 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/04-prototype/exercice-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { ExerciceComponent } from './exercice.component'; 4 | 5 | const routes: Routes = [ 6 | { path: '', component: ExerciceComponent, children: [] } 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [RouterModule.forChild(routes)], 11 | exports: [RouterModule] 12 | }) 13 | export class ExerciceRoutingModule { } 14 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/04-prototype/exercice.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-forms/04-prototype/exercice.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/04-prototype/exercice.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ExerciceComponent } from './exercice.component'; 4 | 5 | describe('ExampleFormsPrototypeComponent', () => { 6 | let component: ExerciceComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ExerciceComponent] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ExerciceComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/04-prototype/exercice.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-prototype', 5 | templateUrl: './exercice.component.html', 6 | styleUrls: ['./exercice.component.css'] 7 | }) 8 | export class ExerciceComponent {} 9 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/04-prototype/exercice.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 3 | 4 | import { ExerciceRoutingModule } from './exercice-routing.module'; 5 | import { ExerciceComponent } from './exercice.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | ExerciceComponent, 10 | ], 11 | providers: [ 12 | ], 13 | imports: [ 14 | ExerciceRoutingModule, 15 | FormsModule, 16 | ReactiveFormsModule, 17 | ], 18 | exports: [ 19 | ExerciceComponent 20 | ], 21 | }) 22 | export class ExerciceModule { } 23 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/05-form-control/exercice-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { ExerciceComponent } from './exercice.component'; 4 | 5 | const routes: Routes = [ 6 | { path: '', component: ExerciceComponent, children: [] } 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [RouterModule.forChild(routes)], 11 | exports: [RouterModule] 12 | }) 13 | export class ExerciceRoutingModule { } 14 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/05-form-control/exercice.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-forms/05-form-control/exercice.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/05-form-control/exercice.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 3 | 4 | import { ExerciceComponent } from './exercice.component'; 5 | 6 | describe('ExampleFormsFormControlComponent', () => { 7 | let component: ExerciceComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | TestBed.configureTestingModule({ 12 | imports: [ 13 | ReactiveFormsModule, 14 | FormsModule, 15 | ], 16 | declarations: [ExerciceComponent] 17 | }) 18 | .compileComponents(); 19 | }); 20 | 21 | beforeEach(() => { 22 | fixture = TestBed.createComponent(ExerciceComponent); 23 | component = fixture.componentInstance; 24 | fixture.detectChanges(); 25 | }); 26 | 27 | it('should create', () => { 28 | expect(component).toBeTruthy(); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/05-form-control/exercice.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormControl } from '@angular/forms'; 3 | 4 | @Component({ 5 | selector: 'app-form-control', 6 | templateUrl: './exercice.component.html', 7 | styleUrls: ['./exercice.component.css'], 8 | }) 9 | export class ExerciceComponent implements OnInit { 10 | 11 | name = new FormControl(''); 12 | releaseDate = new FormControl(''); 13 | franchise = new FormControl(''); 14 | budget = new FormControl(''); 15 | worldwide = new FormControl(''); 16 | summary = new FormControl(''); 17 | 18 | ngOnInit(): void { 19 | this.updateControls(); 20 | } 21 | 22 | updateControls(): void { 23 | this.name.setValue('Avengers: Endgame'); 24 | this.releaseDate.setValue('26/04/2019'); 25 | this.franchise.setValue('true'); 26 | this.budget.setValue('356000000'); 27 | this.worldwide.setValue('2797800564'); 28 | this.summary.setValue('After the devastating events of Avengers: Infinity War (2018), ' + 29 | 'the universe is in ruins.'); 30 | } 31 | 32 | resetControls(): void { 33 | this.name.setValue(null); 34 | this.releaseDate.setValue(null); 35 | this.franchise.setValue(null); 36 | this.budget.setValue(null); 37 | this.worldwide.setValue(null); 38 | this.summary.setValue(null); 39 | } 40 | 41 | } 42 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/05-form-control/exercice.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 3 | 4 | import { ExerciceRoutingModule } from './exercice-routing.module'; 5 | import { ExerciceComponent } from './exercice.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | ExerciceComponent, 10 | ], 11 | providers: [ 12 | ], 13 | imports: [ 14 | ExerciceRoutingModule, 15 | FormsModule, 16 | ReactiveFormsModule, 17 | ], 18 | exports: [ 19 | ExerciceComponent 20 | ], 21 | }) 22 | export class ExerciceModule { } 23 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/06-form-control-class/exercice-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { ExerciceComponent } from './exercice.component'; 4 | 5 | const routes: Routes = [ 6 | { path: '', component: ExerciceComponent, children: [] } 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [RouterModule.forChild(routes)], 11 | exports: [RouterModule] 12 | }) 13 | export class ExerciceRoutingModule { } 14 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/06-form-control-class/exercice.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-forms/06-form-control-class/exercice.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/06-form-control-class/exercice.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { ReactiveFormsModule } from '@angular/forms'; 4 | 5 | import { ExerciceComponent } from './exercice.component'; 6 | 7 | describe('ExampleFormsFormcontrolClassComponent', () => { 8 | let component: ExerciceComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(async () => { 12 | TestBed.configureTestingModule({ 13 | imports: [ 14 | ReactiveFormsModule, 15 | FormsModule, 16 | ], 17 | declarations: [ExerciceComponent] 18 | }) 19 | .compileComponents(); 20 | }); 21 | 22 | beforeEach(() => { 23 | fixture = TestBed.createComponent(ExerciceComponent); 24 | component = fixture.componentInstance; 25 | fixture.detectChanges(); 26 | }); 27 | 28 | it('should create', () => { 29 | expect(component).toBeTruthy(); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/06-form-control-class/exercice.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormControl } from '@angular/forms'; 3 | 4 | import { Movie } from './movie'; 5 | 6 | @Component({ 7 | selector: 'app-form-control-class', 8 | templateUrl: './exercice.component.html', 9 | styleUrls: ['./exercice.component.css'], 10 | }) 11 | export class ExerciceComponent implements OnInit { 12 | 13 | name = new FormControl(''); 14 | releaseDate = new FormControl(''); 15 | franchise = new FormControl(true); 16 | budget = new FormControl(0); 17 | worldwide = new FormControl(0); 18 | summary = new FormControl(''); 19 | 20 | movie: Movie; 21 | 22 | constructor() { 23 | this.movie = new Movie(); 24 | } 25 | 26 | ngOnInit(): void { 27 | this.updateControls(); 28 | } 29 | 30 | updateClass(): void { 31 | this.movie.name = 'Avengers: Endgame'; 32 | this.movie.releaseDate = '26/04/2019'; 33 | this.movie.franchise = true; 34 | this.movie.budget = 356000000; 35 | this.movie.worldwide = 2797800564; 36 | this.movie.summary = 'After the devastating events of Avengers: Infinity War (2018), ' + 37 | 'the universe is in ruins.'; 38 | } 39 | 40 | updateControls(): void { 41 | this.updateClass(); 42 | this.name.setValue(this.movie.name); 43 | this.releaseDate.setValue(this.movie.releaseDate); 44 | this.franchise.setValue(this.movie.franchise); 45 | this.budget.setValue(this.movie.budget); 46 | this.worldwide.setValue(this.movie.worldwide); 47 | this.summary.setValue(this.movie.summary); 48 | } 49 | 50 | resetControls(): void { 51 | this.name.setValue(null); 52 | this.releaseDate.setValue(null); 53 | this.franchise.setValue(null); 54 | this.budget.setValue(null); 55 | this.worldwide.setValue(null); 56 | this.summary.setValue(null); 57 | } 58 | 59 | /* getClass(): void { 60 | this.movie.name = this.name.value!; 61 | this.movie.releaseDate = this.releaseDate.value!; 62 | this.movie.franchise = this.franchise.value!; 63 | this.movie.budget = this.budget.value!; 64 | this.movie.worldwide = this.worldwide.value!; 65 | this.movie.summary = this.summary.value!; 66 | } */ 67 | 68 | } 69 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/06-form-control-class/exercice.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { ExerciceRoutingModule } from './exercice-routing.module'; 6 | import { ExerciceComponent } from './exercice.component'; 7 | 8 | import { ReactiveFormsModule } from '@angular/forms'; 9 | import { PrettyJsonPipe } from './pretty-json.pipe'; 10 | 11 | @NgModule({ 12 | declarations: [ 13 | ExerciceComponent, 14 | PrettyJsonPipe 15 | ], 16 | providers: [ 17 | ], 18 | imports: [ 19 | CommonModule, 20 | ExerciceRoutingModule, 21 | FormsModule, 22 | ReactiveFormsModule, 23 | ], 24 | exports: [ 25 | ExerciceComponent 26 | ], 27 | }) 28 | export class ExerciceModule { } 29 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/06-form-control-class/movie.ts: -------------------------------------------------------------------------------- 1 | export class Movie { 2 | 3 | name: string; 4 | releaseDate: string; 5 | franchise: boolean; 6 | budget: number; 7 | worldwide: number; 8 | summary: string; 9 | 10 | constructor() { 11 | this.name = ''; 12 | this.releaseDate = '03/01/1892'; 13 | this.franchise = false; 14 | this.budget = 0; 15 | this.worldwide = 0 16 | this.summary = ''; 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/06-form-control-class/pretty-json.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'prettyjson' 5 | }) 6 | export class PrettyJsonPipe implements PipeTransform { 7 | // eslint-disable-next-line 8 | transform(value: any, ...args: any[]): any { 9 | return JSON.stringify(value, null, 2) 10 | .replace(/ /g, ' ') 11 | .replace(/\n/g, '
'); 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/07-form-group/exercice-routing.module.ts: -------------------------------------------------------------------------------- 1 | /*import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { ExerciceComponent } from './exercice.component'; 4 | 5 | const routes: Routes = [ 6 | { path: '', component: ExerciceComponent, children: [] } 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [RouterModule.forChild(routes)], 11 | exports: [RouterModule] 12 | }) 13 | export class ExerciceRoutingModule { }*/ 14 | import { NgModule } from '@angular/core'; 15 | import { Routes, RouterModule } from '@angular/router'; 16 | import { ExerciceComponent } from './exercice.component'; 17 | 18 | const routes: Routes = [ 19 | { path: '', component: ExerciceComponent, children: [] } 20 | ]; 21 | 22 | @NgModule({ 23 | imports: [RouterModule.forChild(routes)], 24 | exports: [RouterModule] 25 | }) 26 | export class ExerciceRoutingModule { } 27 | 28 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/07-form-group/exercice.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-forms/07-form-group/exercice.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/07-form-group/exercice.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
FormGroup
6 |
7 |
8 | 9 | 10 |
11 |
12 | 13 | 14 |
15 |
16 | 17 | 18 |
19 |
20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 |
29 | 30 | 33 |
34 |
35 |
36 | 37 |
38 |
39 | 40 |
41 |
42 |
43 |
44 |
FormGroup Result
45 | Value 46 |
47 |
48 |
49 |
50 |
51 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/07-form-group/exercice.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { ReactiveFormsModule } from '@angular/forms'; 4 | 5 | import { ExerciceComponent } from './exercice.component'; 6 | import { PrettyJsonPipe } from './pretty-json.pipe'; 7 | 8 | describe('ExampleFormsFormGroupComponent', () => { 9 | let component: ExerciceComponent; 10 | let fixture: ComponentFixture; 11 | 12 | beforeEach(async () => { 13 | TestBed.configureTestingModule({ 14 | imports: [ 15 | ReactiveFormsModule, 16 | FormsModule, 17 | ], 18 | declarations: [ 19 | ExerciceComponent, 20 | PrettyJsonPipe 21 | ] 22 | }) 23 | .compileComponents(); 24 | }); 25 | 26 | beforeEach(() => { 27 | fixture = TestBed.createComponent(ExerciceComponent); 28 | component = fixture.componentInstance; 29 | fixture.detectChanges(); 30 | }); 31 | 32 | it('should create', () => { 33 | expect(component).toBeTruthy(); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/07-form-group/exercice.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormGroup, FormControl } from '@angular/forms'; 3 | 4 | @Component({ 5 | selector: 'app-form-group', 6 | templateUrl: './exercice.component.html', 7 | styleUrls: ['./exercice.component.css'], 8 | }) 9 | export class ExerciceComponent implements OnInit { 10 | 11 | exampleForm = new FormGroup({ 12 | name: new FormControl(''), 13 | releaseDate: new FormControl(''), 14 | franchise: new FormControl(false), 15 | budget: new FormControl(0), 16 | worldwide: new FormControl(0), 17 | summary: new FormControl('') 18 | }); 19 | 20 | ngOnInit(): void { 21 | this.updateControls(); 22 | } 23 | 24 | updateControls(): void { 25 | this.exampleForm.patchValue({ 26 | name: 'Avengers: Endgame', 27 | releaseDate: '26/04/2019', 28 | franchise: true, 29 | budget: 356000000, 30 | worldwide: 2797800564, 31 | summary: 'After the devastating events of Avengers: Infinity War (2018), ' + 32 | 'the universe is in ruins.' 33 | }); 34 | } 35 | 36 | resetControls(): void { 37 | this.exampleForm.patchValue({ 38 | name: null, 39 | releaseDate: null, 40 | franchise: null, 41 | budget: null, 42 | worldwide: null, 43 | summary: null, 44 | }); 45 | } 46 | 47 | } 48 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/07-form-group/exercice.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { ExerciceRoutingModule } from './exercice-routing.module'; 6 | import { ExerciceComponent } from './exercice.component'; 7 | 8 | import { ReactiveFormsModule } from '@angular/forms'; 9 | import { PrettyJsonPipe } from './pretty-json.pipe'; 10 | 11 | @NgModule({ 12 | declarations: [ 13 | ExerciceComponent, 14 | PrettyJsonPipe 15 | ], 16 | providers: [ 17 | ], 18 | imports: [ 19 | CommonModule, 20 | ExerciceRoutingModule, 21 | FormsModule, 22 | ReactiveFormsModule, 23 | ], 24 | exports: [ 25 | ExerciceComponent 26 | ], 27 | }) 28 | export class ExerciceModule { } 29 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/07-form-group/pretty-json.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'prettyjson' 5 | }) 6 | export class PrettyJsonPipe implements PipeTransform { 7 | // eslint-disable-next-line 8 | transform(value: any, ...args: any[]): any { 9 | return JSON.stringify(value, null, 2) 10 | .replace(/ /g, ' ') 11 | .replace(/\n/g, '
'); 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/08-form-builder/exercice-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { ExerciceComponent } from './exercice.component'; 4 | 5 | const routes: Routes = [ 6 | { path: '', component: ExerciceComponent, children: [] } 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [RouterModule.forChild(routes)], 11 | exports: [RouterModule] 12 | }) 13 | export class ExerciceRoutingModule { } 14 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/08-form-builder/exercice.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-forms/08-form-builder/exercice.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/08-form-builder/exercice.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { ReactiveFormsModule } from '@angular/forms'; 4 | 5 | import { ExerciceComponent } from './exercice.component'; 6 | import { PrettyJsonPipe } from './pretty-json.pipe'; 7 | 8 | describe('ExampleFormsFormBuilderComponent', () => { 9 | let component: ExerciceComponent; 10 | let fixture: ComponentFixture; 11 | 12 | beforeEach(async () => { 13 | TestBed.configureTestingModule({ 14 | imports: [ 15 | ReactiveFormsModule, 16 | FormsModule, 17 | ], 18 | declarations: [ 19 | ExerciceComponent, 20 | PrettyJsonPipe 21 | ] 22 | }) 23 | .compileComponents(); 24 | }); 25 | 26 | beforeEach(() => { 27 | fixture = TestBed.createComponent(ExerciceComponent); 28 | component = fixture.componentInstance; 29 | fixture.detectChanges(); 30 | }); 31 | 32 | it('should create', () => { 33 | expect(component).toBeTruthy(); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/08-form-builder/exercice.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormBuilder } from '@angular/forms'; 3 | 4 | @Component({ 5 | selector: 'app-form-builder', 6 | templateUrl: './exercice.component.html', 7 | styleUrls: ['./exercice.component.css'], 8 | }) 9 | export class ExerciceComponent implements OnInit { 10 | exampleForm = this.fb.group({ 11 | name: [''], 12 | releaseDate: [''], 13 | franchise: [false], 14 | budget: [0], 15 | worldwide: [0], 16 | summary: [''], 17 | }); 18 | 19 | constructor(private fb: FormBuilder) { } 20 | 21 | ngOnInit(): void { 22 | this.updateControls(); 23 | } 24 | 25 | updateControls(): void { 26 | this.exampleForm.patchValue({ 27 | name: 'Avengers: Endgame', 28 | releaseDate: '26/04/2019', 29 | franchise: true, 30 | budget: 356000000, 31 | worldwide: 2797800564, 32 | summary: 'After the devastating events of Avengers: Infinity War (2018), ' + 33 | 'the universe is in ruins.' 34 | }); 35 | } 36 | 37 | resetControls(): void { 38 | this.exampleForm.patchValue({ 39 | name: null, 40 | releaseDate: null, 41 | franchise: true, 42 | budget: null, 43 | worldwide: null, 44 | summary: null, 45 | }); 46 | } 47 | 48 | resetFranchise(): void { 49 | const franchise = !(this.exampleForm.value['franchise']); 50 | this.exampleForm.patchValue({ franchise: franchise }); 51 | } 52 | 53 | } 54 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/08-form-builder/exercice.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { ExerciceRoutingModule } from './exercice-routing.module'; 6 | import { ExerciceComponent } from './exercice.component'; 7 | 8 | import { ReactiveFormsModule } from '@angular/forms'; 9 | import { PrettyJsonPipe } from './pretty-json.pipe'; 10 | 11 | @NgModule({ 12 | declarations: [ 13 | ExerciceComponent, 14 | PrettyJsonPipe 15 | ], 16 | providers: [ 17 | ], 18 | imports: [ 19 | CommonModule, 20 | ExerciceRoutingModule, 21 | FormsModule, 22 | ReactiveFormsModule, 23 | ], 24 | exports: [ 25 | ExerciceComponent 26 | ], 27 | }) 28 | export class ExerciceModule { } 29 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/08-form-builder/pretty-json.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'prettyjson' 5 | }) 6 | export class PrettyJsonPipe implements PipeTransform { 7 | // eslint-disable-next-line 8 | transform(value: any, ...args: any[]): any { 9 | return JSON.stringify(value, null, 2) 10 | .replace(/ /g, ' ') 11 | .replace(/\n/g, '
'); 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/09-form-builder-nested/exercice-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { ExerciceComponent } from './exercice.component'; 4 | 5 | const routes: Routes = [ 6 | { path: '', component: ExerciceComponent, children: [] } 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [RouterModule.forChild(routes)], 11 | exports: [RouterModule] 12 | }) 13 | export class ExerciceRoutingModule { } 14 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/09-form-builder-nested/exercice.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-forms/09-form-builder-nested/exercice.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/09-form-builder-nested/exercice.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { ReactiveFormsModule } from '@angular/forms'; 4 | 5 | import { ExerciceComponent } from './exercice.component'; 6 | import { PrettyJsonPipe } from './pretty-json.pipe'; 7 | 8 | describe('ExampleFormsFormBuilderNestedComponent', () => { 9 | let component: ExerciceComponent; 10 | let fixture: ComponentFixture; 11 | 12 | beforeEach(async () => { 13 | TestBed.configureTestingModule({ 14 | imports: [ 15 | ReactiveFormsModule, 16 | FormsModule, 17 | ], 18 | declarations: [ 19 | ExerciceComponent, 20 | PrettyJsonPipe 21 | ] 22 | }) 23 | .compileComponents(); 24 | }); 25 | 26 | beforeEach(() => { 27 | fixture = TestBed.createComponent(ExerciceComponent); 28 | component = fixture.componentInstance; 29 | fixture.detectChanges(); 30 | }); 31 | 32 | it('should create', () => { 33 | expect(component).toBeTruthy(); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/09-form-builder-nested/exercice.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormBuilder } from '@angular/forms'; 3 | 4 | @Component({ 5 | selector: 'app-form-builder-nested', 6 | templateUrl: './exercice.component.html', 7 | styleUrls: ['./exercice.component.css'], 8 | }) 9 | export class ExerciceComponent implements OnInit { 10 | 11 | exampleForm = this.fb.group({ 12 | name: [''], 13 | releaseDate: [''], 14 | franchise: [false], 15 | summary: [''], 16 | boxoffice: this.fb.group({ 17 | budget: [0], 18 | worldwide: [0], 19 | international: [0], 20 | domestic: [0], 21 | }), 22 | 23 | }); 24 | 25 | constructor(private fb: FormBuilder) { } 26 | 27 | ngOnInit(): void { 28 | this.updateControls(); 29 | } 30 | 31 | updateControls(): void { 32 | this.exampleForm.patchValue({ 33 | name: 'Avengers: Endgame', 34 | releaseDate: '26/04/2019', 35 | franchise: true, 36 | summary: 'After the devastating events of Avengers: Infinity War (2018), ' + 37 | 'the universe is in ruins.', 38 | boxoffice: { 39 | budget: 356000000, 40 | worldwide: 2797800564, 41 | domestic: 858373000, 42 | international: 1939427564 43 | } 44 | }); 45 | } 46 | 47 | resetControls(): void { 48 | this.exampleForm.patchValue({ 49 | name: null, 50 | releaseDate: null, 51 | franchise: false, 52 | summary: null, 53 | boxoffice: { 54 | budget: null, 55 | worldwide: null, 56 | domestic: null, 57 | international: null 58 | } 59 | }); 60 | } 61 | 62 | } 63 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/09-form-builder-nested/exercice.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { ExerciceRoutingModule } from './exercice-routing.module'; 6 | import { ExerciceComponent } from './exercice.component'; 7 | 8 | import { ReactiveFormsModule } from '@angular/forms'; 9 | import { PrettyJsonPipe } from './pretty-json.pipe'; 10 | 11 | @NgModule({ 12 | declarations: [ 13 | ExerciceComponent, 14 | PrettyJsonPipe 15 | ], 16 | providers: [ 17 | ], 18 | imports: [ 19 | CommonModule, 20 | ExerciceRoutingModule, 21 | FormsModule, 22 | ReactiveFormsModule, 23 | ], 24 | exports: [ 25 | ExerciceComponent 26 | ], 27 | }) 28 | export class ExerciceModule { } 29 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/09-form-builder-nested/movie.ts: -------------------------------------------------------------------------------- 1 | export class Movie { 2 | name: string; 3 | releaseDate: string; 4 | 5 | constructor() { 6 | this.name = ''; 7 | this.releaseDate = ''; 8 | } 9 | 10 | } -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/09-form-builder-nested/pretty-json.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'prettyjson' 5 | }) 6 | export class PrettyJsonPipe implements PipeTransform { 7 | // eslint-disable-next-line 8 | transform(value: any, ...args: any[]): any { 9 | return JSON.stringify(value, null, 2) 10 | .replace(/ /g, ' ') 11 | .replace(/\n/g, '
'); 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/10-form-array/exercice-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { ExerciceComponent } from './exercice.component'; 4 | 5 | const routes: Routes = [ 6 | { path: '', component: ExerciceComponent, children: [] } 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [RouterModule.forChild(routes)], 11 | exports: [RouterModule] 12 | }) 13 | export class ExerciceRoutingModule { } 14 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/10-form-array/exercice.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-forms/10-form-array/exercice.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/10-form-array/exercice.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
FormArray
6 |
7 |
8 |
9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 |
17 |
18 |
Arrays
19 |
20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
IdName
{{ i + 1 }}
37 |
38 |
39 |
40 | 41 | 42 |
43 |
44 |
45 |
FormArray Result
46 | Valid : {{ exampleForm.valid }}
47 | Form Value 48 |
49 | Array Value 50 |
51 |
52 |
53 |
54 |
-------------------------------------------------------------------------------- /src/app/pages/application/example-forms/10-form-array/exercice.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { ReactiveFormsModule } from '@angular/forms'; 4 | 5 | import { ExerciceComponent } from './exercice.component'; 6 | import { PrettyJsonPipe } from './pretty-json.pipe'; 7 | 8 | describe('ExampleFormsFormArrayComponent', () => { 9 | let component: ExerciceComponent; 10 | let fixture: ComponentFixture; 11 | 12 | beforeEach(async () => { 13 | TestBed.configureTestingModule({ 14 | imports: [ 15 | ReactiveFormsModule, 16 | FormsModule, 17 | ], 18 | declarations: [ 19 | ExerciceComponent, 20 | PrettyJsonPipe 21 | ] 22 | }) 23 | .compileComponents(); 24 | }); 25 | 26 | beforeEach(() => { 27 | fixture = TestBed.createComponent(ExerciceComponent); 28 | component = fixture.componentInstance; 29 | fixture.detectChanges(); 30 | }); 31 | 32 | it('should create', () => { 33 | expect(component).toBeTruthy(); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/10-form-array/exercice.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormBuilder } from '@angular/forms'; 3 | import { FormArray } from '@angular/forms'; 4 | 5 | @Component({ 6 | selector: 'app-form-array', 7 | templateUrl: './exercice.component.html', 8 | styleUrls: ['./exercice.component.css'], 9 | }) 10 | export class ExerciceComponent implements OnInit { 11 | 12 | exampleForm = this.fb.group({ 13 | name: [''], 14 | releaseDate: [''], 15 | characters: this.fb.array([ 16 | this.fb.control('Iron Man'), 17 | this.fb.control('Thanos'), 18 | this.fb.control('Hulk'), 19 | this.fb.control('Captain America'), 20 | ]) 21 | }); 22 | 23 | constructor(private fb: FormBuilder) { } 24 | 25 | ngOnInit(): void { 26 | this.exampleForm.patchValue({ 27 | name: 'Avengers: Endgame', 28 | releaseDate: '26/04/2019', 29 | }); 30 | } 31 | 32 | addCharacter(): void { 33 | this.characters.push(this.fb.control('New Character')); 34 | } 35 | 36 | get characters(): FormArray { 37 | return this.exampleForm.get('characters') as FormArray; 38 | } 39 | 40 | updateControls(): void { 41 | this.exampleForm.patchValue({ 42 | name: 'Avengers: Endgame patchValue', 43 | releaseDate: '26/04/2019 patchValue', 44 | }); 45 | } 46 | 47 | resetControls(): void { 48 | this.exampleForm.patchValue({ 49 | name: null, 50 | releaseDate: null, 51 | }); 52 | } 53 | 54 | } 55 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/10-form-array/exercice.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { ExerciceRoutingModule } from './exercice-routing.module'; 6 | import { ExerciceComponent } from './exercice.component'; 7 | 8 | import { ReactiveFormsModule } from '@angular/forms'; 9 | import { PrettyJsonPipe } from './pretty-json.pipe'; 10 | 11 | @NgModule({ 12 | declarations: [ 13 | ExerciceComponent, 14 | PrettyJsonPipe 15 | ], 16 | providers: [ 17 | ], 18 | imports: [ 19 | CommonModule, 20 | ExerciceRoutingModule, 21 | FormsModule, 22 | ReactiveFormsModule, 23 | ], 24 | exports: [ 25 | ExerciceComponent 26 | ], 27 | }) 28 | export class ExerciceModule { } 29 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/10-form-array/movie.ts: -------------------------------------------------------------------------------- 1 | export class Movie { 2 | name: string; 3 | releaseDate: string; 4 | 5 | constructor() { 6 | this.name = ''; 7 | this.releaseDate = ''; 8 | } 9 | 10 | } -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/10-form-array/pretty-json.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'prettyjson' 5 | }) 6 | export class PrettyJsonPipe implements PipeTransform { 7 | // eslint-disable-next-line 8 | transform(value: any, ...args: any[]): any { 9 | return JSON.stringify(value, null, 2) 10 | .replace(/ /g, ' ') 11 | .replace(/\n/g, '
'); 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/11-form-multi/exercice-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { ExerciceComponent } from './exercice.component'; 4 | 5 | const routes: Routes = [ 6 | { path: '', component: ExerciceComponent, children: [] } 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [RouterModule.forChild(routes)], 11 | exports: [RouterModule] 12 | }) 13 | export class ExerciceRoutingModule { } 14 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/11-form-multi/exercice.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-forms/11-form-multi/exercice.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/11-form-multi/exercice.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { ReactiveFormsModule } from '@angular/forms'; 4 | 5 | import { ExerciceComponent } from './exercice.component'; 6 | import { PrettyJsonPipe } from './pretty-json.pipe'; 7 | 8 | describe('ExampleFormsFormMultiComponent', () => { 9 | let component: ExerciceComponent; 10 | let fixture: ComponentFixture; 11 | 12 | beforeEach(async () => { 13 | TestBed.configureTestingModule({ 14 | imports: [ 15 | ReactiveFormsModule, 16 | FormsModule, 17 | ], 18 | declarations: [ 19 | ExerciceComponent, 20 | PrettyJsonPipe 21 | ] 22 | }) 23 | .compileComponents(); 24 | }); 25 | 26 | beforeEach(() => { 27 | fixture = TestBed.createComponent(ExerciceComponent); 28 | component = fixture.componentInstance; 29 | fixture.detectChanges(); 30 | }); 31 | 32 | it('should create', () => { 33 | expect(component).toBeTruthy(); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/11-form-multi/exercice.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { ExerciceRoutingModule } from './exercice-routing.module'; 6 | import { ExerciceComponent } from './exercice.component'; 7 | 8 | import { ReactiveFormsModule } from '@angular/forms'; 9 | import { PrettyJsonPipe } from './pretty-json.pipe'; 10 | 11 | @NgModule({ 12 | declarations: [ 13 | ExerciceComponent, 14 | PrettyJsonPipe 15 | ], 16 | providers: [ 17 | ], 18 | imports: [ 19 | CommonModule, 20 | ExerciceRoutingModule, 21 | FormsModule, 22 | ReactiveFormsModule, 23 | ], 24 | exports: [ 25 | ExerciceComponent 26 | ], 27 | }) 28 | export class ExerciceModule { } 29 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/11-form-multi/movie.ts: -------------------------------------------------------------------------------- 1 | export class Movie { 2 | name: string; 3 | releaseDate: string; 4 | 5 | constructor() { 6 | this.name = ''; 7 | this.releaseDate = ''; 8 | } 9 | 10 | } -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/11-form-multi/pretty-json.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'prettyjson' 5 | }) 6 | export class PrettyJsonPipe implements PipeTransform { 7 | // eslint-disable-next-line 8 | transform(value: any, ...args: any[]): any { 9 | return JSON.stringify(value, null, 2) 10 | .replace(/ /g, ' ') 11 | .replace(/\n/g, '
'); 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/tutorial-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { TutorialComponent } from './tutorial.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', component: TutorialComponent, children: [ 9 | { 10 | path: '', 11 | loadChildren: () => import('./00-main/exercice.module') 12 | .then(mod => mod.ExerciceModule) 13 | }, 14 | { 15 | path: 'single', 16 | loadChildren: () => import('./01-single/exercice.module') 17 | .then(mod => mod.ExerciceModule) 18 | }, 19 | { 20 | path: 'multi', 21 | loadChildren: () => import('./02-multi/exercice.module') 22 | .then(mod => mod.ExerciceModule) 23 | }, 24 | { 25 | path: 'init-class', 26 | loadChildren: () => import('./03-init-class/exercice.module') 27 | .then(mod => mod.ExerciceModule) 28 | }, 29 | { 30 | path: 'prototype', 31 | loadChildren: () => import('./04-prototype/exercice.module') 32 | .then(mod => mod.ExerciceModule) 33 | }, 34 | { 35 | path: 'form-control', 36 | loadChildren: () => import('./05-form-control/exercice.module') 37 | .then(mod => mod.ExerciceModule) 38 | }, 39 | { 40 | path: 'form-control-class', 41 | loadChildren: () => import('./06-form-control-class/exercice.module') 42 | .then(mod => mod.ExerciceModule) 43 | }, 44 | { 45 | path: 'form-group', 46 | loadChildren: () => import('./07-form-group/exercice.module') 47 | .then(mod => mod.ExerciceModule) 48 | }, 49 | { 50 | path: 'form-builder', 51 | loadChildren: () => import('./08-form-builder/exercice.module') 52 | .then(mod => mod.ExerciceModule) 53 | }, 54 | { 55 | path: 'form-builder-nested', 56 | loadChildren: () => import('./09-form-builder-nested/exercice.module') 57 | .then(mod => mod.ExerciceModule) 58 | }, 59 | { 60 | path: 'form-array', 61 | loadChildren: () => import('./10-form-array/exercice.module') 62 | .then(mod => mod.ExerciceModule) 63 | }, 64 | { 65 | path: 'form-multi', 66 | loadChildren: () => import('./11-form-multi/exercice.module') 67 | .then(mod => mod.ExerciceModule) 68 | }, 69 | ] 70 | }, 71 | ]; 72 | 73 | @NgModule({ 74 | imports: [RouterModule.forChild(routes)], 75 | exports: [RouterModule] 76 | }) 77 | export class TutorialRoutingModule { } 78 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/tutorial.component.css: -------------------------------------------------------------------------------- 1 | .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 | .btn-toggle:hover, .btn-toggle:focus { 12 | color: rgba(0, 0, 0, .85); 13 | background-color: #cfe2ff; 14 | } 15 | 16 | .btn-toggle::before { 17 | width: 1.25em; 18 | line-height: 0; 19 | 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"); 20 | transition: transform .35s ease; 21 | transform-origin: .5em 50%; 22 | } 23 | 24 | .btn-toggle[aria-expanded="true"] { 25 | color: #0d6efd; 26 | } 27 | 28 | .btn-toggle[aria-expanded="true"]::before { 29 | transform: rotate(90deg); 30 | } 31 | 32 | .btn-toggle-nav a { 33 | display: inline-flex; 34 | padding: .1875rem .5rem; 35 | margin-top: .125rem; 36 | margin-left: 1.25rem; 37 | text-decoration: none; 38 | } 39 | 40 | .btn-toggle-nav a:hover, .btn-toggle-nav a:focus { 41 | color: #0d6efd; 42 | background-color: #cfe2ff; 43 | font-weight: bold; 44 | } 45 | 46 | @media (min-width: 768px) { 47 | .bd-layout { 48 | display: grid; 49 | gap: 1.5rem; 50 | grid-template-areas: "sidebar main"; 51 | grid-template-columns: 1fr 3fr 52 | } 53 | } 54 | 55 | @media (min-width: 992px) { 56 | .bd-layout { 57 | grid-template-columns: 1fr 5fr 58 | } 59 | } 60 | 61 | .bd-sidebar { 62 | overflow: auto; 63 | font-weight: 600 64 | } 65 | 66 | @media (min-width: 768px) { 67 | .bd-sidebar { 68 | position: -webkit-sticky; 69 | position: sticky; 70 | top: 5rem; 71 | display: block !important; 72 | height: calc(100vh - 7rem); 73 | padding-left: .25rem; 74 | margin-left: -.25rem; 75 | overflow-y: auto 76 | } 77 | } -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/tutorial.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 36 |
37 | 38 |
39 |
40 | 41 |
42 |
43 | 44 |
-------------------------------------------------------------------------------- /src/app/pages/application/example-forms/tutorial.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | 4 | import { TutorialComponent } from './tutorial.component'; 5 | 6 | describe('ExampleFormsComponent', () => { 7 | let component: TutorialComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | TestBed.configureTestingModule({ 12 | imports: [ 13 | RouterTestingModule 14 | ], 15 | declarations: [TutorialComponent] 16 | }) 17 | .compileComponents(); 18 | }); 19 | 20 | beforeEach(() => { 21 | fixture = TestBed.createComponent(TutorialComponent); 22 | component = fixture.componentInstance; 23 | fixture.detectChanges(); 24 | }); 25 | 26 | it('should create', () => { 27 | expect(component).toBeTruthy(); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/tutorial.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-example-forms', 5 | templateUrl: './tutorial.component.html', 6 | styleUrls: ['./tutorial.component.css'] 7 | }) 8 | export class TutorialComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/application/example-forms/tutorial.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { TutorialRoutingModule } from './tutorial-routing.module'; 5 | import { TutorialComponent } from './tutorial.component'; 6 | import { HttpClientModule } from '@angular/common/http'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | TutorialComponent, 11 | ], 12 | imports: [ 13 | CommonModule, 14 | TutorialRoutingModule, 15 | HttpClientModule, 16 | ], 17 | exports: [ 18 | TutorialComponent, 19 | ], 20 | }) 21 | export class TutorialModule { } 22 | -------------------------------------------------------------------------------- /src/app/pages/application/example-services/safe.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; 3 | 4 | @Pipe({ name: 'safe' }) 5 | export class SafePipe implements PipeTransform { 6 | constructor(private sanitizer: DomSanitizer) { } 7 | // eslint-disable-next-line 8 | transform(url: any): SafeResourceUrl { 9 | return this.sanitizer.bypassSecurityTrustResourceUrl(url); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/pages/application/example-services/song/song.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { SongService } from './song.service'; 4 | 5 | describe('SongService', () => { 6 | let service: SongService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(SongService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /src/app/pages/application/example-services/song/song.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | import { Song } from './song'; 4 | import { SONGS } from './mock-songs'; 5 | 6 | @Injectable({ 7 | providedIn: 'root' 8 | }) 9 | export class SongService { 10 | 11 | song: Song[]; 12 | constructor() { 13 | this.song = []; 14 | } 15 | 16 | getSongs(year: number): Song[] { 17 | this.song = SONGS[year - 1].items; 18 | 19 | return this.song; 20 | } 21 | 22 | } 23 | -------------------------------------------------------------------------------- /src/app/pages/application/example-services/song/song.ts: -------------------------------------------------------------------------------- 1 | export class Song { 2 | 3 | link: string; 4 | top: string; 5 | artist: string; 6 | title: string; 7 | 8 | constructor() { 9 | this.link = ''; 10 | this.top = ''; 11 | this.artist = ''; 12 | this.title = ''; 13 | 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /src/app/pages/application/example-services/tutorial-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { TutorialComponent } from './tutorial.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: TutorialComponent, 10 | }, 11 | ]; 12 | 13 | 14 | @NgModule({ 15 | imports: [RouterModule.forChild(routes)], 16 | exports: [RouterModule] 17 | }) 18 | export class TutorialRoutingModule { } 19 | -------------------------------------------------------------------------------- /src/app/pages/application/example-services/tutorial.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/application/example-services/tutorial.component.css -------------------------------------------------------------------------------- /src/app/pages/application/example-services/tutorial.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TutorialComponent } from './tutorial.component'; 4 | import { SafePipe } from './safe.pipe'; 5 | 6 | describe('ExampleServicesComponent', () => { 7 | let component: TutorialComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | TestBed.configureTestingModule({ 12 | declarations: [ 13 | TutorialComponent, 14 | SafePipe, 15 | ] 16 | }) 17 | .compileComponents(); 18 | }); 19 | 20 | beforeEach(() => { 21 | fixture = TestBed.createComponent(TutorialComponent); 22 | component = fixture.componentInstance; 23 | fixture.detectChanges(); 24 | }); 25 | 26 | it('should create', () => { 27 | expect(component).toBeTruthy(); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /src/app/pages/application/example-services/tutorial.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | import { Song } from './song/song'; 4 | 5 | import { SongService } from './song/song.service'; 6 | 7 | @Component({ 8 | selector: 'app-example-services', 9 | templateUrl: './tutorial.component.html', 10 | styleUrls: ['./tutorial.component.css'] 11 | }) 12 | export class TutorialComponent implements OnInit { 13 | 14 | songs: Song[]; 15 | songSelected: Song; 16 | yearSelected: number; 17 | 18 | constructor(private songService: SongService) { 19 | this.songs = []; 20 | this.yearSelected = 3; 21 | this.songs = this.songService.getSongs(this.yearSelected); 22 | this.songSelected = new Song(); 23 | this.songSelected = this.songs[0]; 24 | } 25 | 26 | ngOnInit(): void { 27 | this.getSongs(this.yearSelected); 28 | } 29 | 30 | getSongs(year: number): void { 31 | this.songs = this.songService.getSongs(year); 32 | } 33 | 34 | select(song: Song): void { 35 | this.songSelected = song; 36 | } 37 | 38 | // eslint-disable-next-line 39 | onChangeYear($event: any): void { 40 | this.yearSelected = $event.target.value; 41 | this.songs = this.songService.getSongs(this.yearSelected); 42 | this.songSelected = new Song(); 43 | this.songSelected = this.songs[0]; 44 | } 45 | 46 | } 47 | -------------------------------------------------------------------------------- /src/app/pages/application/example-services/tutorial.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { TutorialRoutingModule } from './tutorial-routing.module'; 5 | import { TutorialComponent } from './tutorial.component'; 6 | 7 | import { SafePipe } from './safe.pipe'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | TutorialComponent, 12 | SafePipe, 13 | ], 14 | imports: [ 15 | CommonModule, 16 | TutorialRoutingModule 17 | ], 18 | exports: [ 19 | TutorialComponent, 20 | ], 21 | }) 22 | export class TutorialModule { } 23 | -------------------------------------------------------------------------------- /src/app/pages/general/about/about.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/general/about/about.component.css -------------------------------------------------------------------------------- /src/app/pages/general/about/about.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

about works!

4 | 8 |
9 |
10 | 11 |
12 |
-------------------------------------------------------------------------------- /src/app/pages/general/about/about.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AboutComponent } from './about.component'; 4 | import { RouterTestingModule } from '@angular/router/testing'; 5 | 6 | describe('AboutComponent', () => { 7 | let component: AboutComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [AboutComponent,RouterTestingModule] 13 | }) 14 | .compileComponents(); 15 | 16 | fixture = TestBed.createComponent(AboutComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); -------------------------------------------------------------------------------- /src/app/pages/general/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 | standalone: true, 8 | imports: [CommonModule, RouterLink, RouterOutlet], 9 | templateUrl: './about.component.html', 10 | styleUrl: './about.component.css' 11 | }) 12 | export class AboutComponent { 13 | 14 | } -------------------------------------------------------------------------------- /src/app/pages/general/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 | }; -------------------------------------------------------------------------------- /src/app/pages/general/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 | ]; -------------------------------------------------------------------------------- /src/app/pages/general/about/experience/experience.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/general/about/experience/experience.component.css -------------------------------------------------------------------------------- /src/app/pages/general/about/experience/experience.component.html: -------------------------------------------------------------------------------- 1 |

experience works!

2 | -------------------------------------------------------------------------------- /src/app/pages/general/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 | -------------------------------------------------------------------------------- /src/app/pages/general/about/experience/experience.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-experience', 5 | standalone: true, 6 | imports: [], 7 | templateUrl: './experience.component.html', 8 | styleUrl: './experience.component.css' 9 | }) 10 | export class ExperienceComponent { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/general/about/skill/skill.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/general/about/skill/skill.component.css -------------------------------------------------------------------------------- /src/app/pages/general/about/skill/skill.component.html: -------------------------------------------------------------------------------- 1 |

skill works!

2 | -------------------------------------------------------------------------------- /src/app/pages/general/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 | -------------------------------------------------------------------------------- /src/app/pages/general/about/skill/skill.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-skill', 5 | standalone: true, 6 | imports: [], 7 | templateUrl: './skill.component.html', 8 | styleUrl: './skill.component.css' 9 | }) 10 | export class SkillComponent { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/general/contact/contact-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { ContactComponent } from './contact.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', component: ContactComponent, children: [ 9 | { 10 | path: '', 11 | loadChildren: () => import(`./mailing/mailing.module`) 12 | .then(mod => mod.MailingModule) 13 | }, 14 | 15 | { 16 | path: 'mailing', 17 | loadChildren: () => import(`./mailing/mailing.module`) 18 | .then(mod => mod.MailingModule) 19 | }, 20 | { 21 | path: 'mapping', 22 | loadChildren: () => import(`./mapping/mapping.module`) 23 | .then(mod => mod.MappingModule) 24 | }, 25 | { 26 | path: 'website', 27 | loadChildren: () => import(`./website/website.module`) 28 | .then(mod => mod.WebsiteModule) 29 | }, 30 | 31 | { 32 | path: '**', 33 | loadChildren: () => import(`./mailing/mailing.module`) 34 | .then(mod => mod.MailingModule) 35 | }, 36 | 37 | ] 38 | }, 39 | ]; 40 | 41 | @NgModule({ 42 | imports: [RouterModule.forChild(routes)], 43 | exports: [RouterModule] 44 | }) 45 | export class ContactRoutingModule { } -------------------------------------------------------------------------------- /src/app/pages/general/contact/contact.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/general/contact/contact.component.css -------------------------------------------------------------------------------- /src/app/pages/general/contact/contact.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

contact works!

4 | 9 |
10 |
11 | 12 |
13 |
-------------------------------------------------------------------------------- /src/app/pages/general/contact/contact.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | 4 | import { ContactComponent } from './contact.component'; 5 | 6 | describe('ContactComponent', () => { 7 | let component: ContactComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(() => { 11 | TestBed.configureTestingModule({ 12 | imports: [ 13 | RouterTestingModule 14 | ], 15 | declarations: [ContactComponent] 16 | }); 17 | fixture = TestBed.createComponent(ContactComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); -------------------------------------------------------------------------------- /src/app/pages/general/contact/contact.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-contact', 5 | templateUrl: './contact.component.html', 6 | styleUrl: './contact.component.css' 7 | }) 8 | export class ContactComponent { 9 | 10 | } -------------------------------------------------------------------------------- /src/app/pages/general/contact/contact.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { ContactComponent } from './contact.component'; 5 | import { ContactRoutingModule } from './contact-routing.module'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | ContactRoutingModule 11 | ], 12 | exports: [ 13 | ContactComponent 14 | ], 15 | declarations: [ 16 | ContactComponent 17 | ], 18 | providers: [ 19 | ], 20 | }) 21 | export class ContactModule { } -------------------------------------------------------------------------------- /src/app/pages/general/contact/mailing/mailing-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { MailingComponent } from './mailing.component'; 4 | 5 | const routes: Routes = [ 6 | { path: '', component: MailingComponent, children: [] } 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [RouterModule.forChild(routes)], 11 | exports: [RouterModule] 12 | }) 13 | export class MailingRoutingModule { } 14 | -------------------------------------------------------------------------------- /src/app/pages/general/contact/mailing/mailing.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/general/contact/mailing/mailing.component.css -------------------------------------------------------------------------------- /src/app/pages/general/contact/mailing/mailing.component.html: -------------------------------------------------------------------------------- 1 |

mailing works!

2 | -------------------------------------------------------------------------------- /src/app/pages/general/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 | -------------------------------------------------------------------------------- /src/app/pages/general/contact/mailing/mailing.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-mailing', 5 | standalone: true, 6 | imports: [], 7 | templateUrl: './mailing.component.html', 8 | styleUrl: './mailing.component.css' 9 | }) 10 | export class MailingComponent { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/general/contact/mailing/mailing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { MailingRoutingModule } from './mailing-routing.module'; 5 | 6 | 7 | @NgModule({ 8 | declarations: [], 9 | imports: [ 10 | CommonModule, 11 | MailingRoutingModule 12 | ] 13 | }) 14 | export class MailingModule { } 15 | -------------------------------------------------------------------------------- /src/app/pages/general/contact/mapping/mapping-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { MappingComponent } from './mapping.component'; 4 | 5 | const routes: Routes = [ 6 | { path: '', component: MappingComponent, children: [] } 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [RouterModule.forChild(routes)], 11 | exports: [RouterModule] 12 | }) 13 | export class MappingRoutingModule { } -------------------------------------------------------------------------------- /src/app/pages/general/contact/mapping/mapping.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/general/contact/mapping/mapping.component.css -------------------------------------------------------------------------------- /src/app/pages/general/contact/mapping/mapping.component.html: -------------------------------------------------------------------------------- 1 |

mapping works!

2 | -------------------------------------------------------------------------------- /src/app/pages/general/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 | -------------------------------------------------------------------------------- /src/app/pages/general/contact/mapping/mapping.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-mapping', 5 | standalone: true, 6 | imports: [], 7 | templateUrl: './mapping.component.html', 8 | styleUrl: './mapping.component.css' 9 | }) 10 | export class MappingComponent { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/general/contact/mapping/mapping.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { MappingRoutingModule } from './mapping-routing.module'; 5 | 6 | 7 | @NgModule({ 8 | declarations: [], 9 | imports: [ 10 | CommonModule, 11 | MappingRoutingModule 12 | ] 13 | }) 14 | export class MappingModule { } 15 | -------------------------------------------------------------------------------- /src/app/pages/general/contact/website/website-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { WebsiteComponent } from './website.component'; 4 | 5 | const routes: Routes = [ 6 | { path: '', component: WebsiteComponent, children: [] } 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [RouterModule.forChild(routes)], 11 | exports: [RouterModule] 12 | }) 13 | export class WebsiteRoutingModule { } -------------------------------------------------------------------------------- /src/app/pages/general/contact/website/website.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/general/contact/website/website.component.css -------------------------------------------------------------------------------- /src/app/pages/general/contact/website/website.component.html: -------------------------------------------------------------------------------- 1 |

website works!

2 | -------------------------------------------------------------------------------- /src/app/pages/general/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 | -------------------------------------------------------------------------------- /src/app/pages/general/contact/website/website.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-website', 5 | standalone: true, 6 | imports: [], 7 | templateUrl: './website.component.html', 8 | styleUrl: './website.component.css' 9 | }) 10 | export class WebsiteComponent { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/general/contact/website/website.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { WebsiteRoutingModule } from './website-routing.module'; 5 | 6 | 7 | @NgModule({ 8 | declarations: [], 9 | imports: [ 10 | CommonModule, 11 | WebsiteRoutingModule 12 | ] 13 | }) 14 | export class WebsiteModule { } 15 | -------------------------------------------------------------------------------- /src/app/pages/general/home/feature.ts: -------------------------------------------------------------------------------- 1 | export class Feature { 2 | 3 | name: string; 4 | description: string; 5 | icon: string; 6 | link: string; 7 | 8 | constructor() { 9 | this.name = ''; 10 | this.description = ''; 11 | this.icon = ''; 12 | this.link = ''; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/app/pages/general/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 | -------------------------------------------------------------------------------- /src/app/pages/general/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

5 | 6 | {{ name }} 7 | 8 |

9 |
10 |
11 |

12 | {{ version }} 13 |

14 |
15 |
16 |

17 | {{ bootstrap }} 18 |

19 |
20 |
21 |

22 | {{ fontawesome }} 23 |

24 |
25 |
26 |
27 |
28 |
29 |

Features

30 |
31 |
32 | 53 |
54 | -------------------------------------------------------------------------------- /src/app/pages/general/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | import { RouterTestingModule } from '@angular/router/testing'; 5 | 6 | describe('HomeComponent', () => { 7 | let component: HomeComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [HomeComponent, RouterTestingModule] 13 | }) 14 | .compileComponents(); 15 | 16 | fixture = TestBed.createComponent(HomeComponent); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | }); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /src/app/pages/general/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterLink, RouterOutlet } from '@angular/router'; 4 | 5 | import { environment } from '../../../../environments/environment'; 6 | 7 | import { Feature } from './feature'; 8 | 9 | @Component({ 10 | selector: 'app-home', 11 | standalone: true, 12 | imports: [CommonModule, RouterLink, RouterOutlet], 13 | templateUrl: './home.component.html', 14 | styleUrl: './home.component.css' 15 | }) 16 | export class HomeComponent { 17 | name = environment.application.name; 18 | version = environment.application.version; 19 | bootstrap = environment.application.bootstrap; 20 | fontawesome = environment.application.fontawesome; 21 | 22 | features: Array; 23 | 24 | constructor() { 25 | this.features = 26 | [ 27 | { 28 | name: 'Bootstrap', 29 | description: 'How to use Buttons, Alerts, Pagination, Tables, Collapses', 30 | icon: 'fab fa-bootstrap', 31 | link: 'bootstrap' 32 | }, 33 | { 34 | name: 'Components', 35 | description: 'Channel component with Input, Output and Event Emitter', 36 | icon: 'far fa-clone', 37 | link: 'components' 38 | }, 39 | { 40 | name: 'Services', 41 | description: 'Use services to view a playlist and a youtube player', 42 | icon: 'fas fa-handshake', 43 | link: 'services' 44 | }, 45 | { 46 | name: 'Reactive Forms', 47 | description: 'A model-driven approach to handling form inputs', 48 | icon: 'far fa-file-alt', 49 | link: 'forms' 50 | }, 51 | { 52 | name: 'Template Driven', 53 | description: 'Forms are the mainstay of business applications', 54 | icon: 'far fa-file-alt', 55 | link: 'forms' 56 | }, 57 | ]; 58 | } 59 | 60 | 61 | } 62 | -------------------------------------------------------------------------------- /src/app/pages/general/login/login-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { LoginComponent } from './login.component'; 5 | 6 | const routes: Routes = [ 7 | { path: '', component: LoginComponent }, 8 | ]; 9 | 10 | @NgModule({ 11 | imports: [RouterModule.forChild(routes)], 12 | exports: [RouterModule] 13 | }) 14 | export class LoginRoutingModule { } -------------------------------------------------------------------------------- /src/app/pages/general/login/login.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/general/login/login.component.css -------------------------------------------------------------------------------- /src/app/pages/general/login/login.component.html: -------------------------------------------------------------------------------- 1 |

login works!

2 | -------------------------------------------------------------------------------- /src/app/pages/general/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(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [LoginComponent] 12 | }); 13 | fixture = TestBed.createComponent(LoginComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); -------------------------------------------------------------------------------- /src/app/pages/general/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 | } -------------------------------------------------------------------------------- /src/app/pages/general/login/login.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { LoginComponent } from './login.component'; 5 | import { LoginRoutingModule } from './login-routing.module'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | LoginRoutingModule 11 | ], 12 | exports: [ 13 | LoginComponent 14 | ], 15 | declarations: [ 16 | LoginComponent 17 | ], 18 | providers: [ 19 | ], 20 | }) 21 | export class LoginModule { } -------------------------------------------------------------------------------- /src/app/pages/general/not-found/not-found.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/general/not-found/not-found.component.css -------------------------------------------------------------------------------- /src/app/pages/general/not-found/not-found.component.html: -------------------------------------------------------------------------------- 1 |

not-found works!

-------------------------------------------------------------------------------- /src/app/pages/general/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 | -------------------------------------------------------------------------------- /src/app/pages/general/not-found/not-found.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-not-found', 5 | standalone: true, 6 | imports: [], 7 | templateUrl: './not-found.component.html', 8 | styleUrl: './not-found.component.css' 9 | }) 10 | export class NotFoundComponent { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/general/signup/signup-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { SignupComponent } from './signup.component'; 5 | 6 | const routes: Routes = [ 7 | { path: '', component: SignupComponent }, 8 | ]; 9 | 10 | @NgModule({ 11 | imports: [RouterModule.forChild(routes)], 12 | exports: [RouterModule] 13 | }) 14 | export class SignupRoutingModule { } -------------------------------------------------------------------------------- /src/app/pages/general/signup/signup.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/app/pages/general/signup/signup.component.css -------------------------------------------------------------------------------- /src/app/pages/general/signup/signup.component.html: -------------------------------------------------------------------------------- 1 |

signup works!

-------------------------------------------------------------------------------- /src/app/pages/general/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(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [SignupComponent] 12 | }); 13 | fixture = TestBed.createComponent(SignupComponent); 14 | component = fixture.componentInstance; 15 | fixture.detectChanges(); 16 | }); 17 | 18 | it('should create', () => { 19 | expect(component).toBeTruthy(); 20 | }); 21 | }); -------------------------------------------------------------------------------- /src/app/pages/general/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 | } -------------------------------------------------------------------------------- /src/app/pages/general/signup/signup.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { SignupComponent } from './signup.component'; 5 | import { SignupRoutingModule } from './signup-routing.module'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | SignupRoutingModule 11 | ], 12 | exports: [ 13 | SignupComponent 14 | ], 15 | declarations: [ 16 | SignupComponent 17 | ], 18 | providers: [ 19 | ], 20 | }) 21 | export class SignupModule { } -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/params/images/channels/cinemax.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/channels/cinemax.jpg -------------------------------------------------------------------------------- /src/assets/params/images/channels/cw.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/channels/cw.jpg -------------------------------------------------------------------------------- /src/assets/params/images/channels/discovery-channel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/channels/discovery-channel.jpg -------------------------------------------------------------------------------- /src/assets/params/images/channels/disney-channel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/channels/disney-channel.jpg -------------------------------------------------------------------------------- /src/assets/params/images/channels/fox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/channels/fox.jpg -------------------------------------------------------------------------------- /src/assets/params/images/channels/hbo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/channels/hbo.jpg -------------------------------------------------------------------------------- /src/assets/params/images/channels/history.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/channels/history.jpg -------------------------------------------------------------------------------- /src/assets/params/images/channels/hulu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/channels/hulu.jpg -------------------------------------------------------------------------------- /src/assets/params/images/channels/mtv.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/channels/mtv.jpg -------------------------------------------------------------------------------- /src/assets/params/images/channels/nbc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/channels/nbc.jpg -------------------------------------------------------------------------------- /src/assets/params/images/channels/netflix.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/channels/netflix.jpg -------------------------------------------------------------------------------- /src/assets/params/images/channels/showtime.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/channels/showtime.jpg -------------------------------------------------------------------------------- /src/assets/params/images/channels/usa-network.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/channels/usa-network.jpg -------------------------------------------------------------------------------- /src/assets/params/images/example-bootstrap/movie-screen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/example-bootstrap/movie-screen.jpg -------------------------------------------------------------------------------- /src/assets/params/images/logo/ganatan-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/logo/ganatan-logo.png -------------------------------------------------------------------------------- /src/assets/params/images/logo/ganatan-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/logo/ganatan-logo@2x.png -------------------------------------------------------------------------------- /src/assets/params/images/studio/2560px-Valve_old_logo.svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/studio/2560px-Valve_old_logo.svg.png -------------------------------------------------------------------------------- /src/assets/params/images/studio/Bioware-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/studio/Bioware-logo.png -------------------------------------------------------------------------------- /src/assets/params/images/studio/Electronic_Arts-Logo.wine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/studio/Electronic_Arts-Logo.wine.png -------------------------------------------------------------------------------- /src/assets/params/images/studio/Logo-Nintendo-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/studio/Logo-Nintendo-1.jpg -------------------------------------------------------------------------------- /src/assets/params/images/studio/Naughty-dog-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/studio/Naughty-dog-logo.png -------------------------------------------------------------------------------- /src/assets/params/images/studio/Rockstar_Games_Logo.svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/assets/params/images/studio/Rockstar_Games_Logo.svg.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/assets/params/js/toasts.js: -------------------------------------------------------------------------------- 1 | var myToastEl = document.getElementById('myToast') 2 | myToastEl.classList.add("show"); 3 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/environments/environment.development.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | application: 3 | { 4 | name: 'angular-bootstrap', 5 | version: 'Angular 17.2.3', 6 | bootstrap: 'Bootstrap 5.3.3', 7 | fontawesome: 'Font Awesome 6.5.1', 8 | } 9 | }; -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | application: 3 | { 4 | name: 'angular-bootstrap', 5 | version: 'Angular 17.2.3', 6 | bootstrap: 'Bootstrap 5.3.3', 7 | fontawesome: 'Font Awesome 6.5.1', 8 | } 9 | }; -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/src/favicon.ico -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/main.server.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { AppComponent } from './app/app.component'; 3 | import { config } from './app/app.config.server'; 4 | 5 | const bootstrap = () => bootstrapApplication(AppComponent, config); 6 | 7 | export default bootstrap; 8 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 3.5rem; 3 | font-family: "Roboto", sans-serif; 4 | } -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [ 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/main.ts", 12 | "src/main.server.ts", 13 | "server.ts" 14 | ], 15 | "include": [ 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "outDir": "./dist/out-tsc", 6 | "forceConsistentCasingInFileNames": true, 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "esModuleInterop": true, 14 | "sourceMap": true, 15 | "declaration": false, 16 | "experimentalDecorators": true, 17 | "moduleResolution": "node", 18 | "importHelpers": true, 19 | "target": "ES2022", 20 | "module": "ES2022", 21 | "useDefineForClassFields": false, 22 | "lib": [ 23 | "ES2022", 24 | "dom" 25 | ] 26 | }, 27 | "angularCompilerOptions": { 28 | "enableI18nLegacyMessageIdFormat": false, 29 | "strictInjectionParameters": true, 30 | "strictInputAccessModifiers": true, 31 | "strictTemplates": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "include": [ 11 | "src/**/*.spec.ts", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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} -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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} -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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} -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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")} -------------------------------------------------------------------------------- /ui/assets/fontawesome/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/ui/assets/fontawesome/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /ui/assets/fontawesome/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/ui/assets/fontawesome/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /ui/assets/fontawesome/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/ui/assets/fontawesome/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /ui/assets/fontawesome/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/ui/assets/fontawesome/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /ui/assets/fontawesome/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/ui/assets/fontawesome/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /ui/assets/fontawesome/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/ui/assets/fontawesome/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /ui/assets/fontawesome/webfonts/fa-v4compatibility.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/ui/assets/fontawesome/webfonts/fa-v4compatibility.ttf -------------------------------------------------------------------------------- /ui/assets/fontawesome/webfonts/fa-v4compatibility.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/ui/assets/fontawesome/webfonts/fa-v4compatibility.woff2 -------------------------------------------------------------------------------- /ui/assets/params/css/body.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 3.5rem; 3 | font-family: "Roboto", sans-serif; 4 | } 5 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /ui/assets/params/images/logo/ganatan-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/ui/assets/params/images/logo/ganatan-logo.png -------------------------------------------------------------------------------- /ui/assets/params/images/logo/ganatan-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Zeus-Aphrodite/angular/0a2670d43d5b979b3ff5e76b39503dee93897d5a/ui/assets/params/images/logo/ganatan-logo@2x.png -------------------------------------------------------------------------------- /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 | }) -------------------------------------------------------------------------------- /ui/assets/params/js/toasts.js: -------------------------------------------------------------------------------- 1 | var myToastEl = document.getElementById('myToast') 2 | myToastEl.classList.add("show"); 3 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------