{"id":22433227,"url":"https://github.com/andresweitzel/appelectrothings_angular_springboot_mongodb","last_synced_at":"2025-08-01T12:34:01.421Z","repository":{"id":40381611,"uuid":"420472025","full_name":"andresWeitzel/AppElectroThings_Angular_SpringBoot_MongoDB","owner":"andresWeitzel","description":"Aplicación Web ElectroThings con Angular, Highcharts, Bootstrap, Spring Boot, Spring MVC, , Spring Security, JWT,  SpringMongoDB, Lombok, Log4J, Git, MongoDB. y Otras Tecnologías ","archived":false,"fork":false,"pushed_at":"2024-01-25T22:57:21.000Z","size":42371,"stargazers_count":2,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-01-25T23:53:56.458Z","etag":null,"topics":["angular","bootstrap","bootstrap4","css3","git","highcharts","html5","java","javascript","log4j","lombok","maven","mongodb","spring","springboot","springdatamongodb","springmvc","typescript","vsc","vscode"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andresWeitzel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-10-23T16:59:18.000Z","updated_at":"2023-08-21T19:20:25.000Z","dependencies_parsed_at":"2024-01-26T00:03:08.029Z","dependency_job_id":null,"html_url":"https://github.com/andresWeitzel/AppElectroThings_Angular_SpringBoot_MongoDB","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andresWeitzel%2FAppElectroThings_Angular_SpringBoot_MongoDB","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andresWeitzel%2FAppElectroThings_Angular_SpringBoot_MongoDB/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andresWeitzel%2FAppElectroThings_Angular_SpringBoot_MongoDB/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andresWeitzel%2FAppElectroThings_Angular_SpringBoot_MongoDB/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andresWeitzel","download_url":"https://codeload.github.com/andresWeitzel/AppElectroThings_Angular_SpringBoot_MongoDB/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228377561,"owners_count":17910449,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","bootstrap","bootstrap4","css3","git","highcharts","html5","java","javascript","log4j","lombok","maven","mongodb","spring","springboot","springdatamongodb","springmvc","typescript","vsc","vscode"],"created_at":"2024-12-05T22:14:19.597Z","updated_at":"2024-12-05T22:14:20.535Z","avatar_url":"https://github.com/andresWeitzel.png","language":"HTML","readme":"\u003cimg src=\"./doc/listado/listado01.png\" style=\"width: 100%; height: 80%\"/\u003e\n\n# AppElectroThings_Angular_SpringBoot_MongoDB.\nAplicación ElectroThings para la Gestión de Productos Electrónicos implementada con HTML5, CSS3, SCSS, Angular, Bootstrap, Highchart, Spring-Boot, Spring Security, Spring MVC, Microservicios, SpringFox, Swagger UI, Git, DBeaver, PgAdmin, PostgreSQL y Otras Tecnologías.\n* [Repositorio ApiRest_ElectroThingsV1](https://github.com/andresWeitzel/ApiRest_ElectroThingsV1_SpringBoot_MongoDB)\n* [Repositorio db_ElectroThings_MongoDB](https://github.com/andresWeitzel/db_ElectroThings_MongoDB)\n* [PlayList del Proyecto](https://www.youtube.com/playlist?list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy)\n \n\n\u003cbr\u003e\n\n## Índice 📜\n\n\u003cdetails\u003e\n \u003csummary\u003e Ver \u003c/summary\u003e\n \n \u003cbr\u003e\n \n### Sección 1) Descripción, Tecnologías y Dependencias \n\n - [1.0) Descripción del Proyecto.](#10-descripción-)\n - [1.1) Ejecución del Proyecto.](#11-ejecución-del-proyecto-)\n - [1.2) Tecnologías.](#12-tecnologías-)\n\n  \n### Sección 2) Endpoints y Recursos \n \n - [2.0) EndPoints.](#endpoints-)\n - [2.1) Recursos y Servicios.](#recursos-y-servicios-)\n  \n  \n### Sección 3) Prueba de Funcionalidad y Referencias\n \n - [3.0) Prueba de Funcionalidad.](#30-prueba-de-funcionalidad-)\n - [3.1) Referencias.](#31-referencias-)\n\t  \n  \n  \n\u003cbr\u003e\n\n\u003c/details\u003e\n\n\n\n\n\u003cbr\u003e\n\n## Sección 1) Descripción, Tecnologías y Dependencias \n\n\n### 1.0) Descripción [🔝](#índice-) \n\n\u003cdetails\u003e\n  \u003csummary\u003eVer\u003c/summary\u003e\n \n \u003cbr\u003e\n \n* Esta aplicación ha sido desarrollada para la gestión de productos de electrónica general ( televisores, notebooks, accesorios, etc). También se ha pensado originalmente desarrollar una sección para la gestión de usuarios, pero esta funcionalidad se aplica desde el backend (Api), utilizando postman o swagger ui, al implementar un modelo de negocios únicamente para un MicroFrontEnd se deberá desarrollar otra app para la gestión de dichos usuarios.\n* Como sistema de seguridad para manejo de recursos de la app se usa Spring Security y JWT. Las Operaciones Transaccionales fueron modificadas para que solamente los administradores del sistema tengan acceso, los usuarios convencionales solamente podrán visualizar los productos y filtrar búsquedas acerca de estos según el requerimiento deseado.\n* Todos los formularios aplican validaciones de carácteres, longitudes, tamaños, valores numéricos, valores mal formados, email, contraseña, url de imágenes, etc.\n* Se implementa Paginación Completa.\n* Se aplican dos filtros de búsqueda, uno para productos de forma genérica y otro según el campo deseado, permitiendo coincidencias de carácteres y palabras.\n* Para la experiencia de usuario se utiliza Popupts, Loaders, Angular Material, Etc.\n* Es posible descargar el Listado de Productos Paginado en formato xlsx(excel), csv y pdf.\n* Todas las Páginas de la Aplicación poseen modals de Ayuda.\n* Entre Otros Recursos Disponibles.\n* Aclaración : Este Microfrontend no es responsive. El enfoque es la funcionalidad de la aplicación, la maquetación es totalmente aplicable en relación al tiempo de disponibilidad que se emplee.\n* [Repositorio ApiRest_ElectroThingsV1](https://github.com/andresWeitzel/ApiRest_ElectroThingsV1_SpringBoot_MongoDB)\n* [Repositorio db_ElectroThings_MongoDB](https://github.com/andresWeitzel/db_ElectroThings_MongoDB)\n* [PlayList del Proyecto](https://www.youtube.com/playlist?list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy)\n  \n\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n\n\n### 1.1) Ejecución del Proyecto [🔝](#índice-)\n\n\u003cdetails\u003e\n  \u003csummary\u003eVer\u003c/summary\u003e\n  \n \u003cbr\u003e  \n  \n* Crear un entorno de trabajo a través de algún IDE\n* Clonar el Proyecto (`git clone https://github.com/andresWeitzel/AppElectroThings_Angular_SpringBoot_MongoDB`)\n* Posicionarnos sobre el proyecto\n  * `cd proyecto`\n* Dentro del directorio instalar todos los plugins implementados\n  * `npm i`\n* Ejecutar la base de datos\n* Ejecutar la api rest\n* Ejecutar el proyecto\n  * `ng serve`\n\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n\n\n### 1.2) Tecnologías [🔝](#índice-)\n\n\u003cdetails\u003e\n  \u003csummary\u003eVer\u003c/summary\u003e\n \n \u003cbr\u003e\n\n| Tecnologías FRONTEND | Versión | Finalidad\n| ------------- | ------------- | ------------- |\n| [HTML](https://www.w3schools.com/html/) |  5.0 | Lenguaje de Hipertexto | \n| [Css](https://www.w3schools.com/css/) |  3.0 | Lenguaje de hojas de estilo para presentación de documentos.  |\n| [Scss](https://sass-lang.com/) | 1.57 | Preprocesador de css.  |\n| [Angular](https://angular.io/) |  13.3.0 | FrameWork Web Desarrollo de Apps con TypeScript | \n| [Angular CLI](https://docs.angular.lat/cli) | 13.3.0 | Herramienta de Angular para depurar, crear, publicar, etc Apps |\n| [Angular Material](https://material.angular.io/) | 13.3.9 | UI librería de componentes | \n| [ng-angular-popup](https://www.npmjs.com/package/ng-angular-popup) | 0.1.2 |  Mensajes emergentes personalizados |\n| [ngx-ui-loader](https://www.npmjs.com/package/ngx-ui-loader) | 13.0.0 | Animaciones de carga | \n| [Highchart](https://www.highcharts.com/) | 13.3.9 | Librería para la generación de gráficos |  \n| [Bootstrap](https://getbootstrap.com/) | 5.1  | FrameWork Web Diseño y Desarrollo de Apps |\n| [Visual Studio Code](https://code.visualstudio.com/download) | 1.51.1  | Entorno de Desarrollo |\n\n\n| Tecnologías BACKEND | Versión | Finalidad\n| ------------- | ------------- | ------------- |\n| [Java]( https://www.oracle.com/java/technologies/javase/jdk12-archive-downloads.html) |   12.0.2 | JDK |\n| [Spring Tool Suite 4](https://spring.io/blog/2021/06/21/spring-tools-4-11-0-released) | 4.9.0  | IDE |\n| [Spring Boot](https://spring.io/) |   2.6.4  | Framework |\n| [Spring Boot Data JPA](https://spring.io/projects/spring-data-jpa)  | 2.6.3 | Mapeo de objetos y persistencia en la db |\n| [Spring Security](https://spring.io/projects/spring-security) | 2.6.7 | Servicios de Seguridad |\n| [JSON Web Token](https://jwt.io/) | 0.9.1 | Creación de tokens de acceso | \n| [Maven](https://maven.apache.org/) |  4.0.0 | Gestor de Proyectos |\n| [Postman](https://www.postman.com/) | 9.4.1 | Test de Apis |\n| [Lombok](https://projectlombok.org/) | 1.18.22 | Automatización de Código | \n| [Open-Api](https://www.openapis.org/) | 1.6.4 | Documentación de la Api | \n| [UI Swagger](https://swagger.io/tools/swagger-ui/) | 1.6.4 | Visualización y Gestión de la Api | \n| [GNU bash / Terminal](https://www.gnu.org/software/bash/) | 4.4.23  | Bash / Terminal para el manejo e implementación de Git integrado al Spring Tool Suite |\n| [Git](https://git-scm.com/) | 2.29.1  | Control de Versiones |\n\n\n| Tecnologías DATABASE | Versión | Finalidad\n| ------------- | ------------- | ------------- |\n| [MongoDB](https://www.mongodb.com/) | 5.0 | Base de Datos |\n| [MongoDB Compass](https://www.mongodb.com/products/compass)\t| 1.31.2 |\tGestor para MongoDB |\n\n\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n\n\u003cbr\u003e\n\n\n## Sección 2) EndPoints y Recursos\n\n### 2.0) EndPoints [🔝](#índice-)\n\n\u003cdetails\u003e\n \u003csummary\u003eVer\u003c/summary\u003e\n   \n#### Autenticación\n* http://localhost:8098/api/v1/auth/login (Autenticación)\n* http://localhost:8098/api/v1/auth/signin (Registro)\n  \n#### Gestión de Productos\n* http://localhost:8098/api/v1/productos/ (Agregar)\n* http://localhost:8098/api/v1/productos/{id} (Editar)\n* http://localhost:8098/api/v1/productos/{id} (Eliminar)\n* http://localhost:8098/api/v1/productos/listado (Listado Paginado)\n* http://localhost:8098/api/v1/productos/last-producto (Último Producto)\n* http://localhost:8098/api/v1/productos/listado-filter/{filtro} (Listado paginado con filtro)\n* http://localhost:8098/api/v1/productos/codigo/{codigo} (Listado paginado según su código)\n* http://localhost:8098/api/v1/productos/nombre/{nombre} (Listado paginado según su nombre)\n* http://localhost:8098/api/v1/productos/descripcion/{descripcion} (Listado paginado según su descripción)\n* http://localhost:8098/api/v1/productos/categoria/{categoria} (Listado paginado según su categoria)\n* Revisar Swagger para visualizar el resto de los endpoints \n\n#### Administración de Usuarios  \n* http://localhost:8098/api/v1/admin/usuarios/ (Agregar)\n* http://localhost:8098/api/v1/admin/usuarios/{id} (Editar)\n* http://localhost:8098/api/v1/admin/usuarios/{id} (Eliminar)\n* http://localhost:8098/api/v1/admin/usuarios/listado (Listado)\n\n\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n\n\n### 2.1) Recursos y Servicios [🔝](#índice-)\n\n\u003cdetails\u003e\n \u003csummary\u003eVer\u003c/summary\u003e\n  \n### Login \n\n![Index app](./doc/auth/login.png)\n\n### Signin\n\n![Index app](./doc/auth/signin.png)\n\n\n### Inicio \n\n![Index app](./doc/inicio/vista.png)\n\n\n\n### Listado de Productos Electrónicos Tabla\n\n![Index app](./doc/listado/listado01.png)\n\n![Index app](./doc/listado/listado02.png)\n\n### Listado de Productos Electrónicos Cards\n\n![Index app](./doc/listado/listadoCards.png)\n\n\n### Gráficos de Barra para Stock de Productos por Categoría.\n\n![Index app](./doc/graficas/productosCateg.png)\n\n\n### Novedades de Productos\n\n![Index app](./doc/novedades/novedades.png)\n\n\n### Acerca de Productos\n\n![Index app](./doc/acercaProductos/acercaDe.png)\n\n\n\u003c/br\u003e\n\n#### Documentación Gráfica Acotada por razones de simplificación de documentación. Visualizar los videos desde la PlayList acerca de las Pruebas de Funcionalidad de la aplicación.\n\n\n\u003cbr\u003e\n\n\u003c/details\u003e\n\n\n\u003cbr\u003e\n\n\n## Sección 3) Prueba de Funcionalidad y Referencias\n\n\n### 3.0) Prueba de Funcionalidad [🔝](#índice-)\n\n\u003cdetails\u003e\n \u003csummary\u003eVer\u003c/summary\u003e\n\n### Comprobación login de usuarios [(Ver)](https://www.youtube.com/watch?v=dqFHov36c0M\u0026list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy\u0026index=1)\n[![Alt text](./doc/youtube/login.png)](https://www.youtube.com/watch?v=dqFHov36c0M\u0026list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy\u0026index=1) \n\n### Comprobación signin de usuarios [(Ver)](https://www.youtube.com/watch?v=FpU96PbdFC0\u0026list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy\u0026index=2)\n[![Alt text](./doc/youtube/signin.png)](https://www.youtube.com/watch?v=FpU96PbdFC0\u0026list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy\u0026index=2) \n\n### Comprobación token y refresh token [(Ver)](https://www.youtube.com/watch?v=CZdsom5hdfg\u0026list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy\u0026index=3)\n[![Alt text](./doc/youtube/token.png)](https://www.youtube.com/watch?v=CZdsom5hdfg\u0026list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy\u0026index=3) \n    \n### Comprobación listado de productos [(Ver)](https://www.youtube.com/watch?v=fScBOXLMPzg\u0026list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy\u0026index=4)\n[![Alt text](./doc/youtube/listado.png)](https://www.youtube.com/watch?v=fScBOXLMPzg\u0026list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy\u0026index=4) \n    \n### Comprobación búsqueda de productos con filtro [(Ver)](https://www.youtube.com/watch?v=P26hk1GgsqU\u0026list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy\u0026index=5)\n[![Alt text](./doc/youtube/filtro.png)](https://www.youtube.com/watch?v=P26hk1GgsqU\u0026list=PLCl11UFjHurAg4I2Sv8Q7rpkNUTk5fQQy\u0026index=5) \n\n\u003cbr\u003e  \n  \n### `Se resume documentación gráfica. Visualizar Playlist del proyecto para más funcionalidades`  \n\n \u003cbr\u003e\n\n\u003c/details\u003e\n\n\n### 3.1) Referencias [🔝](#índice-)\n\n\u003cdetails\u003e\n \u003csummary\u003eVer\u003c/summary\u003e\n\n\n### Documentación No Oficial Recomendada\n\n* Api Rest Spring Boot Mongodb : https://www.youtube.com/watch?v=OtBukxJy4kg\n* Api Rest Guía Spring Boot Mongodb Codigo :https://github.com/heroe-geek/rest-api-springboot-mvc/blob/master/src/main/java/com/hg/crud/controllers/ProductController.java\n* Tutorial MongoDB con Spring Boot : https://www.mongodb.com/compatibility/spring-boot\n* Tutorial Spring Data MongoDB (01) : https://stackabuse.com/spring-data-mongodb-guide-to-the-aggregation-annotation/\n* Tutorial Spring Data MongoDB(02) :  https://blog.marcnuri.com/spring-data-mongodb-implementacion-de-un-repositorio-a-medida\n* Tutorial Uso de Queys en MongoDB : https://www.baeldung.com/queries-in-spring-data-mongodb\n* Código Ejemplo genérico : https://github.com/heroe-geek/rest-api-springboot-mvc/blob/master/src/main/java/com/hg/crud/models/ProductDTO.java\n* Config Mongo y Spring Boot : https://hevodata.com/learn/spring-boot-mongodb-config/\n\n\n\u003c/br\u003e\n\n### Documentación Oficial/No Oficial Librerías Frontend\n\n* Angular Popup : https://www.npmjs.com/package/ng-angular-popup\n\n* Angular Material : https://material.angular.io/guide/getting-started\n\n* Angular Bootstrap Validation \n    * Instalación : https://mdbootstrap.com/docs/b5/angular/getting-started/installation/\n    * Implementación/ejemplos : https://mdbootstrap.com/docs/b5/angular/getting-started/installation/\n    * Validation Forms(tanto bootstrap 4 como 5) : https://mdbootstrap.com/docs/angular/forms/validation/\n\n* ngx ui loader \n    * Instalación :  https://www.npmjs.com/package/ngx-ui-loader\n    * Implementación : https://tdev.app/ngx-ui-loader\n\n* Scrollspy \n    * Implementación : https://mdbootstrap.com/docs/angular/navigation/scrollspy/#example-4    \n\n\n* Hide Navbar\n    * Implementación : https://www.w3schools.com/HOWTO/howto_js_navbar_hide_scroll.asp\n\n* Excel Sheets\n    * Instalación y Doc : https://www.npmjs.com/package/xlsx\n    * Ejemplo Base : https://www.delftstack.com/howto/angular/angular-export-to-excel/\n    \n* JSPDF\n    * Ejemplo Base : https://www.positronx.io/angular-pdf-tutorial-export-pdf-in-angular-with-jspdf/\n    * Otro ej. : https://howtojs.io/how-to-generate-pdf-file-in-angular-13-application-in-multiple-ways/\n\n\n* Gráficos con Highchart\n    * Npm, config, detalles, etc : https://hackthestuff.com/article/how-to-use-highcharts-in-angular-12\n    * Doc Oficial : https://api.highcharts.com/highcharts/\n    * Doc Oficial Instalación : https://www.highcharts.com/docs/getting-started/install-from-npm\n    \n* Tipos de Gráficos Highchart\n    * Nuevo sitio Tipos de Graf : https://www.highcharts.com/blog/chartchooser/\n    * Ejemplo Base 2d : https://stackblitz.com/edit/highcharts-angular-basic-line-ucnkbj?file=src%2Fapp%2Fapp.component.ts\n    * Modificación Gráfico 2d a 3d : https://www.eduforbetterment.com/3d-pie-and-donut-chart-in-angular-using-highchart/\n\n\n\n* Cifrado Token (CriptoJs) y Secure Local Storage\n    * Guía de Uso : https://rupesh94.medium.com/how-to-encrypt-localstorage-data-in-angular-270ebcbc1435\n    * Instalación Secure Local Storage : https://www.npmjs.com/package/secure-web-storage?activeTab=readme\n    * Instalacion CryptoJs : https://www.npmjs.com/package/crypto-js\n\n \u003cbr\u003e\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n\n\n\n\n\n\n\n\n\n\n\u003cbr\u003e\n\n\u003cbr\u003e\n\n### `Siguiente sección en proceso de actualización` \n\n\u003cdetails\u003e\n \u003csummary\u003eVer\u003c/summary\u003e\n  \n\n\u003c/br\u003e\n\n\u003chr\u003e\n\n## ``Documentación y Guía del Proyecto ``\n#### (Esta Documentación que Desarrollé es para la Creación, Configuración, Posibles Errores, Despliegue, etc de la Aplicación con Angular, Firebase y Bootstrap. Recomiendo Leerla y Realizar todo paso a paso como se indica en la misma).\n\n\u003c/br\u003e\n\n\n## Indice\n\n #### Sección 1) Configurar el Ambiente y el Espacio de Trabajo Local\n  \n  - [Paso 1) Instalación de Angular](#paso-1-instalación-de-angular)\n\n  - [Paso 2) Instalación de la CLI de Angular](#paso-2-instalación-de-la-cli-de-angular)\n\n  - [Paso 3) Creación de una Aplicación Web con Angular.](#paso-3-creación-de-una-aplicación-web-con-angular)\n\n  - [Paso 4) Deployar la Aplicación con Angular.](#paso-4-deployar_la-aplicación-con-angular)\n\n\n\n  #### Sección 2) Manejo e Implementación de Bootstrap\n  \n   - [Paso 5) Implementar Bootstrap con Angular](#paso-5-implmentar-bootstrap-con-angular)\n\n\n  #### Sección 3) Módulos y Componentes de Angular\n   \n   - [Paso 6) Generación y Configuración de Componentes y Módulos con Angular](#paso-6-generación-y-configuración-de-componentes-y-módulos-con-angular)\n\n  - [Paso 7) Imágenes de la Aplicación](#paso-7-imágenes-de-la-aplicación)\n  \n  - [Paso 8) Maquetado del Componente con css](#paso-8-maquetado-del-componente-con-css)\n\n  \n  #### Sección 4) Creación y Configuración de Páginas Web y Servicios\n  \n  - [Paso 9) Generación de Módulos y Componentes para otras páginas](#paso-9-generación-de-módulos-y-componentes-para-otras-páginas)\n  \n  - [Paso 10) Ruteo de las Páginas Web](#paso-10-ruteo-de-las-páginas-web)\n\n  - [Paso 11) Creación de Servicios](#paso-11-creación-de-servicios)\n  \n\n\n  #### Sección 5) Desarrollo de las Páginas Web\n  \n  - [Paso 12) Página Listado de Componentes de Electrónica](#paso-12-página-listado-de-componentes-de-electrónica)\n\n  - [Paso 13) Página Detalles de Componentes de Electrónica](#paso-13-página-detalles-de-componentes-de-electrónica)\n  \n  - [Paso 14) Página Editar Componentes de Electrónica](#paso-14-página-editar-componentes-de-electrónica)\n\n   - [Paso 15) Página Agregar Componentes de Electrónica](#paso-15-página-agregar-componentes-de-electrónica)\n\n   - [Paso 16) Página de Inicio](#paso-16-página-de-inicio)\n\n\n \n\n\n\n\n\n\u003c/br\u003e\n\n## Sección 1) Configurar el Ambiente y el Espacio de Trabajo Local\n\n\u003c/br\u003e\n\n### Paso 1) Instalación de Angular\n#### (Primeramente deberás tener instalado VS Code, configurado a gusto y saber/manejar de Forma Básica una CLI(Terminal-Interfaz de Línea de Comandos o como se le quiera decir. Te recomiendo que consideres la CLI Bash/Shell de Linux)).\n\n\u003c/br\u003e\n\n* Para usar angular se necesita instalar Node.js.\n   * --\u003e Descarga de Node.js (https://nodejs.org/en/)\n* Abrír el Archivo Descargado e Instalar(Siguiente y Siguiente...).\n* Angular Depende del 'npm package manager' de Node.js, cuando se descarga este, viene todo incluido.\n* Comprobamos la Instalación de Angular desde una CLI.\n   * --\u003e Abrir el cmd en Windows, bash-shell en Linux, o terminal en VS Code\n   * --\u003e escribir `npm -v`.\n   * --\u003e Si no surgió ningún error te debería aparecer la Versión de Node.js, ya está instalado Node.js\n\n\u003c/br\u003e\n\n### Paso 2) Instalación de la CLI de Angular\n#### (La CLI de Angular nos ayudará a Crear Proyectos, generar Código, depurar, etc).\n\n\u003c/br\u003e\n\n* Teniendo Instalado el Sistema de Gestión de Angular en Nuestra Computadora, trabajaremos todo desde la CLI\n* Abrir el cmd en Windows, bash-shell en Linux, o terminal en VS Code y escribir `npm install -g @angular/cli`.\n* Si se instalo correctamente la cli de Angular, escribiendo `ng help` se debería poder visualizar la lista de comandos y la versión.(Paciencia porque las ejecuciones de angular son lerdas).\n\n\n\u003c/br\u003e\n\n### Paso 3) Creación de una Aplicación Web con Angular.\n#### (Este es uno de los pasos más tediosos ya que para la creación de una App en Angular viene intrínsico el proceso de construcción de Paquetes, creación de Módulos, Deploy de la App en el Servidor de Angular, etc).\n\n\u003c/br\u003e\n\n* Primeramente deberás ubicarte en la carpeta que deseas construir la app con Angular.\n   * --\u003e En mi caso crearé la app en mi ruta ANGULAR/Proyectos2021\n   * --\u003e Abrimos una Nueva Terminal en VS Code y \n   * --\u003e Escribimos `ng new 'nombreDelProyectoSinComillasTodoSeguido' ` en mi caso `ng new 'crudAngularFirebaseBootstrap' `\n   * --\u003e Seguidamente nos pregunta si queremos agregar una routing, escribimos yes o y\n   * --\u003e Ahora cual Lenguaje de Maquetación queremos, elegimos CSS.\n   * --\u003e Esperamos a que se cree el Proyecto(este paso lleva tiempo).\n\n\u003c/br\u003e\n\n### Paso 4)  Deployar la Aplicación con Angular\n#### (La CLI de Angular incluye un Servidor Local )\n\n\u003c/br\u003e\n\n* Nos posicionamos sobre la carpeta creada `cd crudAngularFirebaseBootstrap`\n   * --\u003e Escribimos por consola  `ng serve --open`\n   * --\u003e Si nos preguntan algo escribimos yes o y\n   * --\u003e El último paso suele tardar un poco\n   * --\u003e Si se abre el navegador con la página de inicio de Angular está todo Correcto.\n\n\u003c/br\u003e\n\n\n\n\n\u003c/br\u003e\n\n## Sección 2) Manejo e Implementación de Bootstrap\n\n\u003c/br\u003e\n\n\n\n\n### Paso 5) Implementar Bootstrap con Angular\n#### ( Bootstrap es un Framework Web que nos permite realizar aplicaciones de forma más rápidas y con estructuras modernas. Para este caso no vamos a instalar los paquetes de bootstrap, sino incluir CDN's, osea linkear servidores de boostrap para trabajar con sus librerías )\n\n\u003c/br\u003e\n\n#### 5.1) Incluir el CSS desde el CDN de Bootstrap en el index.html\n* Nos dirijimos al `index.html`\n* Incluimos la hoja de estilo dentro del head \n* Código en la Página oficial https://getbootstrap.com/docs/5.1/getting-started/introduction/ o acá..\n\n```html\n\u003c!--CSS BOOTSTRAP--\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\" crossorigin=\"anonymous\"\u003e\n\n```\n\n* Guardamos cambios (Ctrl+s)\n\n\n#### 5.2) Incluir JS desde el CDN de Bootstrap en el index.html\n* Notar que para Javascript se utiliza junto con la librería Popper\n* Bootstrap nos proporciona un CDN con todo incluido\n* Incluimos el CDN dentro del body\n* Código en la Página Oficial https://getbootstrap.com/docs/5.1/getting-started/introduction/ o acá..\n\n\n```html\n\n\u003c!--JS Bootstrap--\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\n```\n* Guardamos cambios (Ctrl+s)\n* Si visualizas nuevamente la aplicación se podrá notar la diferencia de tamaños y colores, tenemos implementado Bootstrap\n\n\n\u003c/br\u003e\n\n  ## Sección 3) Módulos y Componentes de Angular\n\n\u003c/br\u003e\n\n\n### Paso 6) Generación y Configuración de Componentes y Módulos con Angular\n#### (Todos los componentes y Módulos de Angular están dentro de sus respectivos directorios o carpetas(en este caso el directorio es app, que a su vez es el módulo padre), vamos a realizar lo mismo con Boostrap , crearemos los componentes y módulos y trabajaremos de forma modularizada, respetando el Patrón de Angular)\n\n#### 6.1) Creación del componente y módulo Navbar\n* Abrimos una nueva terminal\n  * --\u003e View -\u003e Terminal\n* Nos posicionamos sobre el proyecto\n  * --\u003e Escribimos `cd crud AngularFirebaseBootstrap`\n* Creamos el Nuevo Componente modularizado\n  * --\u003e Escribimos `ng generate component components/navbar --module app` o `ng g c components/navbar --module app`\n* Si desplegas componentes, se debería haber generado el componente, junto con sus archivos\n* Ahora creamos el módulo interno de configuración del navbar\n  * --\u003e Escribimos `ng generate module components/navbar --module app` o `ng g m components/navbar --module app`\n\n#### 6.2) Configuración del componente html Navbar\n* Vamos a incluir el código html de ejemplo de la página de bootstrap en el `navbar.component.html`(app/navbar/navbar.component.html)\n* Voy a implementar un Navbar de tipo Offcanvas que se despliegua al costado de la pantalla. \n* Código https://getbootstrap.com/docs/5.1/components/navbar/\n\n\n```html\n\n\u003cnav class=\"navbar navbar-light bg-light fixed-top\"\u003e\n  \u003cdiv class=\"container-fluid\"\u003e\n    \u003ca class=\"navbar-brand\" href=\"#\"\u003eOffcanvas navbar\u003c/a\u003e\n    \u003cbutton class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasNavbar\" aria-controls=\"offcanvasNavbar\"\u003e\n      \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cdiv class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasNavbar\" aria-labelledby=\"offcanvasNavbarLabel\"\u003e\n      \u003cdiv class=\"offcanvas-header\"\u003e\n        \u003ch5 class=\"offcanvas-title\" id=\"offcanvasNavbarLabel\"\u003eOffcanvas\u003c/h5\u003e\n        \u003cbutton type=\"button\" class=\"btn-close text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"\u003e\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"offcanvas-body\"\u003e\n        \u003cul class=\"navbar-nav justify-content-end flex-grow-1 pe-3\"\u003e\n          \u003cli class=\"nav-item\"\u003e\n            \u003ca class=\"nav-link active\" aria-current=\"page\" href=\"#\"\u003eHome\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli class=\"nav-item\"\u003e\n            \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli class=\"nav-item dropdown\"\u003e\n            \u003ca class=\"nav-link dropdown-toggle\" href=\"#\" id=\"offcanvasNavbarDropdown\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"\u003e\n              Dropdown\n            \u003c/a\u003e\n            \u003cul class=\"dropdown-menu\" aria-labelledby=\"offcanvasNavbarDropdown\"\u003e\n              \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n              \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n              \u003cli\u003e\n                \u003chr class=\"dropdown-divider\"\u003e\n              \u003c/li\u003e\n              \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n            \u003c/ul\u003e\n          \u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cform class=\"d-flex\"\u003e\n          \u003cinput class=\"form-control me-2\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\"\u003e\n          \u003cbutton class=\"btn btn-outline-success\" type=\"submit\"\u003eSearch\u003c/button\u003e\n        \u003c/form\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/nav\u003e\n```\n\n* Seguidamente vamos a comprobar si el componente creado se ha importado dentro de `app.module.ts`\n* Nos dirigimos al archivo (app/app.module.ts)\n* Deberías tener el siguiente código indicando que tenemos el componente importado correctamente\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { NavbarComponent } from './components/navbar/navbar.component';\nimport { NavbarModule } from './components/navbar/navbar.module';\n\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    NavbarComponent,\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    NavbarModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n\n```\n\n* Seguidamente vamos a incluir el código html del componente navbar dentro del componente app, especificamente dentro de `app.component.html`\n* Nos dirijimos a app.component.html(app/app.component.html) y escribimos\n\n```html\n\n\u003cdiv\u003e\n\n    \u003capp-navbar\u003e\u003c/app-navbar\u003e\n\n\u003c/div\u003e\n\n\n```\n\n* Guardamos (Ctrl + s )\n* Levantamos el Servidor `ng server` desde terminal\n* Visualizamos el contenido.\n\n\n\u003c/br\u003e\n\n#### 6.3) Creación del componente y módulo Carousel\n* Abrimos una nueva terminal\n* Nos posicionamos sobre el proyecto\n* Creamos el Nuevo Componente modularizado\n  * --\u003e Escribimos `ng generate component components/carousel --module app` o `ng g c components/carousel --module app`\n* Si desplegas componentes, se debería haber generado el componente, junto con sus archivos\n* Ahora creamos el módulo interno de configuración del carousel\n  * --\u003e Escribimos `ng generate module components/carousel --module app` o `ng g m components/carousel --module app`\n\n#### 6.4) Configuración del componente html Carousel\n* Vamos a incluir el código html de ejemplo de la página de bootstrap en el `carousel.component.html`(app/carousel/carousel.component.html)\n* Voy a implementar un Carousel de tipo Dark variant\n* Voy a incluir algunas rutas a imagenes de internet y cambiar algunos colores para que se visualize correctamente el carousel\n* Código https://getbootstrap.com/docs/5.1/components/carousel/\n\n\n```html\n\u003csection\u003e\n\n    \u003cdiv id=\"carouselExampleDark\" class=\"carousel carousel-ligth slide\" data-bs-ride=\"carousel\"\u003e\n        \u003cdiv class=\"carousel-indicators\"\u003e\n            \u003cbutton type=\"button\" data-bs-target=\"#carouselExampleDark\" data-bs-slide-to=\"0\" class=\"active\" aria-current=\"true\" aria-label=\"Slide 1\"\u003e\u003c/button\u003e\n            \u003cbutton type=\"button\" data-bs-target=\"#carouselExampleDark\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\"\u003e\u003c/button\u003e\n            \u003cbutton type=\"button\" data-bs-target=\"#carouselExampleDark\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\"\u003e\u003c/button\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"carousel-inner text-white\"\u003e\n            \u003cdiv class=\"carousel-item active\" data-bs-interval=\"10000\"\u003e\n                \u003cimg src=\"https://www.aawishkar.tech/images/banner.jpg\" class=\"d-block w-100\" alt=\"...\"\u003e\n                \u003cdiv class=\"carousel-caption d-none d-md-block\"\u003e\n                    \u003ch5\u003eFirst slide label\u003c/h5\u003e\n                    \u003cp\u003eSome representative placeholder content for the first slide.\u003c/p\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"carousel-item\" data-bs-interval=\"2000\"\u003e\n                \u003cimg src=\"https://images7.alphacoders.com/447/447880.jpg\" class=\"d-block w-100\" alt=\"...\"\u003e\n                \u003cdiv class=\"carousel-caption d-none d-md-block\"\u003e\n                    \u003ch5\u003eSecond slide label\u003c/h5\u003e\n                    \u003cp\u003eSome representative placeholder content for the second slide.\u003c/p\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"carousel-item\"\u003e\n                \u003cimg src=\"https://www.wallpapertip.com/wmimgs/16-165025_electronics-electronics-wallpaper-hd.jpg\" class=\"d-block w-100\" alt=\"...\"\u003e\n                \u003cdiv class=\"carousel-caption d-none d-md-block\"\u003e\n                    \u003ch5\u003eThird slide label\u003c/h5\u003e\n                    \u003cp\u003eSome representative placeholder content for the third slide.\u003c/p\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cbutton class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#carouselExampleDark\" data-bs-slide=\"prev\"\u003e\n    \u003cspan class=\"carousel-control-prev-icon\" aria-hidden=\"true\"\u003e\u003c/span\u003e\n    \u003cspan class=\"visually-hidden\"\u003ePrevious\u003c/span\u003e\n  \u003c/button\u003e\n        \u003cbutton class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#carouselExampleDark\" data-bs-slide=\"next\"\u003e\n    \u003cspan class=\"carousel-control-next-icon\" aria-hidden=\"true\"\u003e\u003c/span\u003e\n    \u003cspan class=\"visually-hidden\"\u003eNext\u003c/span\u003e\n  \u003c/button\u003e\n    \u003c/div\u003e\n\u003c/section\u003e\n\n\n\n```\n\n* Seguidamente vamos a comprobar si el componente creado se ha importado dentro de `app.module.ts`\n* Nos dirigimos al archivo (app/app.module.ts)\n* Deberías tener el siguiente código indicando que tenemos el componente importado correctamente\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { NavbarComponent } from './components/navbar/navbar.component';\nimport { NavbarModule } from './components/navbar/navbar.module';\nimport { CarouselComponent } from './components/carousel/carousel.component';\nimport { CarouselModule } from './components/carousel/carousel.module';\n\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    NavbarComponent,\n    CarouselComponent,\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    NavbarModule,\n    CarouselModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n\n```\n\n* Seguidamente vamos a incluir el código html del componente carousel dentro del componente app, especificamente dentro de `app.component.html`\n* Nos dirijimos a app.component.html(app/app.component.html) y escribimos\n\n```html\n\n\u003cdiv\u003e\n\n     \u003capp-carousel\u003e\u003c/app-carousel\u003e\n\n\u003c/div\u003e\n\n\n```\n\n* Guardamos (Ctrl + s )\n* Levantamos el Servidor `ng server` desde terminal\n* Visualizamos el contenido.\n\n\n\n\n\n\n\n\n\n\u003c/br\u003e\n\n### Paso 7) Imágenes de la Aplicación\n#### (Por convención las imágenes locales, iconos web, etc, las guardamos dentro de la carpeta assets).\n\n\u003c/br\u003e\n\n#### 7.1) Descarga de Imágenes e Íconos\n* Descargar imágenes e iconos a gusto, en mi caso de electrónica\n* Ted recomiendo la página https://www.flaticon.es/iconos-gratis/electronica\n* Creamos un directorio raiz dentro de `assets` llamado images(src/assets/images)\n* Copiamos todas las imágenes descargadas al directorio images\n* Incluimos el icono deseado como representación de la tienda y nombre dentro de `navbar.component.html`\n* Porción de Código\n\n```html\n\n\u003cheader\u003e\n\n     \u003cdiv\u003e\n                \u003cimg src=\"assets/images/elect02.png\" alt=\"\" width=\"40\" height=\"40\" class=\"d-inline-block align-text-top \"\u003e ElectroThings\n            \u003c/div\u003e\n\n\u003c/header\u003e\n\n```\n\n### 7.2) Cambio de Título e Ícono de la app\n* Nos dirigimos al index.html y en title cambiamos el titulo de la app\n* Para cambiar el icono de la app, linkear la imagen descargada desde el `\u003clink rel=\"icon\"\u003e`\n* Porción de Código\n\n```html\n\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eElectroThings\u003c/title\u003e\n    \u003cbase href=\"/\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n    \u003clink rel=\"icon\" type=\"image/x-icon\" href=\"assets/images/elect02.png\"\u003e\n\n\n\u003c/head\u003e\n```\n\n\n\n\n\n\u003c/br\u003e\n\n### Paso 8) Maquetado del Componente Navbar con css\n#### (Mas allá que implementemos un esplendido framework como bootstrap, no podemos dejar de lado css, ya que nos ayuda a ahorrar lineas spaghettis en el html).\n\n* Dentro del navbar.component.css vamos a implementar el maquetado para este componente.\n* Por ahora establecemos el color de texto en blanco y cambiamos el light por el dark dentro del navbar \n* Código\n\n```html\n\nheader {\n    color: white;\n}\n\nimg {\n    padding-right: 2px;\n}\n\ndiv.collapse {\n    margin-left: 15px;\n    padding: 5px;\n}\n\n```\n\n\n\n\u003c/br\u003e\n\n\n  ## Sección 4) Creación-Configuración de Páginas Web y Servicios\n\n\n\u003c/br\u003e\n\n### Paso 9) Generación de Módulos y Componentes para otras páginas\n#### (Nuestra Aplicación tendrá diversas páginas en las cuáles crearemos para el listado de los componentes electrónicos, agregar, modificar, etc).\n\n\u003c/br\u003e\n\n#### 9.1) Página `listado-componentes`\n* Vamos a generar un módulo con sus componentes indicando también la ruta del mismo que utilizaremos para la página web deseada. El mismo lo vamos a crear dentro de una nueva ruta (pages/electronica/listado-componentes).\n* El comando completo sería `ng g m pages/electronica/listado-componentes --module app --route listado-componentes`\n* Abris una nueva terminal y escribir el comando anterior (en mi caso)\n\n\u003c/br\u003e\n\n#### 9.2) Página `detalles-componentes`\n* Vamos a generar un módulo con sus componentes indicando también la ruta del mismo que utilizaremos para la página web deseada. El mismo lo vamos a crear dentro de una nueva ruta (pages/electronica/detalles-componentes).\n* El comando completo sería `ng g m pages/electronica/detalles-componentes --module app --route detalles-componentes`\n* Abris una nueva terminal y escribir el comando anterior (en mi caso)\n\n\u003c/br\u003e\n\n\n#### 9.3) Página `agregar-componentes`\n* Vamos a generar un módulo con sus componentes indicando también la ruta del mismo que utilizaremos para la página web deseada. El mismo lo vamos a crear dentro de una nueva ruta (pages/electronica/agregar-componentes).\n* El comando completo sería `ng g m pages/electronica/agregar-componentes --module app --route agregar-componentes`\n* Abris una nueva terminal y escribir el comando anterior (en mi caso)\n\n\n\u003c/br\u003e\n\n\n#### 9.4) Página `editar-componentes`\n* Vamos a generar un módulo con sus componentes indicando también la ruta del mismo que utilizaremos para la página web deseada. El mismo lo vamos a crear dentro de una nueva ruta (pages/electronica/editar-componentes).\n* El comando completo sería `ng g m pages/electronica/editar-componentes --module app --route editar-componentes`\n* Abris una nueva terminal y escribir el comando anterior (en mi caso)\n\n\n\u003c/br\u003e\n\n\n#### 9.5) Página para `Ayuda`\n* Vamos a generar un módulo con sus componentes indicando también la ruta del mismo que utilizaremos para la página web deseada. El mismo lo vamos a crear dentro de una nueva ruta (pages/utilidades/ayuda).\n* El comando completo sería `ng g m pages/utilidades/ayuda --module app --route ayuda`\n* Abris una nueva terminal y escribir el comando anterior (en mi caso)\n\n\n\u003c/br\u003e\n\n\n### Paso 10) Ruteo de las Páginas Web\n#### (Declarar las rutas con directivas en angular se consideran buenas prácticas, ya que podremos controlar los errores que pudiesen surgir).\n\n* Primeramente hay que incluir la Directiva `\u003crouter-outlet\u003e\u003c/router-outlet\u003e` dentro de `app.component.html`, por qué sino no se establece el ruteo de forma dinámica, osea no se van a mostrar las páginas creadas.\n\n\n```html\n\n\u003cdiv\u003e\n\n    \u003capp-navbar\u003e\u003c/app-navbar\u003e\n\n    \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n\n\u003c/div\u003e\n\n```\n\n\n* Ahora nos dirigimos al `navbar.component.html` y allí modificamos los nav-item agregando las directivas de enlaces `[routerLink] = \"['/nombrePagina']\"` indicando las páginas de redireccionamiento\n* Vamos a modificar nuestro Offcanvas navbar a gusto, cambiamos los fondos, agregamos iconos, cambiamos los nombres, etc\n* Código\n\n```html\n\n\u003cheader\u003e\n\n    \u003cnav class=\"navbar navbar-expand-lg navbar-dark bg-dark fixed-top\"\u003e\n        \u003cdiv class=\"container-fluid\"\u003e\n            \u003c!--Icono--\u003e\n            \u003cdiv\u003e\n                \u003cimg src=\"assets/images/elect02.png\" alt=\"\" width=\"40\" height=\"40\" class=\"d-inline-block align-text-top \"\u003e ElectroThings\n            \u003c/div\u003e\n            \u003c!--Fin Icono--\u003e\n            \u003cbutton class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasNavbar\" aria-controls=\"offcanvasNavbar\"\u003e\n        \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n      \u003c/button\u003e\n            \u003cdiv class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasNavbar\" aria-labelledby=\"offcanvasNavbarLabel\"\u003e\n                \u003c!--Boton Close--\u003e\n                \u003cdiv class=\"offcanvas-header bg-dark\"\u003e\n                    \u003ch5 class=\"offcanvas-title\" id=\"offcanvasNavbarLabel\"\u003e\u003cimg src=\"assets/images/elect02.png\" alt=\"\" width=\"40\" height=\"40\" class=\"d-inline-block align-text-top \"\u003e ElectroThings\u003c/h5\u003e\n\n                    \u003cbutton type=\"button\" class=\"btn-close bg-white text-reset\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"\u003e\u003c/button\u003e\n                \u003c/div\u003e\n                \u003c!--Fin Boton Close--\u003e\n                \u003cdiv class=\"offcanvas-body bg-dark\"\u003e\n                    \u003cul class=\"navbar-nav\"\u003e\n                        \u003cli class=\"nav-item\" routerLinkActive=\"active\"\u003e\n                            \u003ca class=\"nav-link\" [routerLink]=\"['/']\"\u003eInicio\u003c/a\u003e\n                        \u003c/li\u003e\n                        \u003cli class=\"nav-item\" routerLinkActive=\"active\"\u003e\n                            \u003ca class=\"nav-link\" [routerLink]=\"['/listado-componentes']\"\u003eListado de Componentes\u003c/a\u003e\n                        \u003c/li\u003e\n                        \u003cli class=\"nav-item\" routerLinkActive=\"active\"\u003e\n                            \u003ca class=\"nav-link\" [routerLink]=\"['/agregar-componentes']\"\u003eAgregar Componentes\u003c/a\u003e\n                        \u003c/li\u003e\n                        \u003cli class=\"nav-item\" routerLinkActive=\"active\"\u003e\n                            \u003ca class=\"nav-link\" [routerLink]=\"['/editar-componentes']\"\u003eEditar Componentes\u003c/a\u003e\n                        \u003c/li\u003e\n                        \u003cli class=\"nav-item\" routerLinkActive=\"active\"\u003e\n                            \u003ca class=\"nav-link\" [routerLink]=\"['/ayuda']\"\u003eAyuda\u003c/a\u003e\n                        \u003c/li\u003e\n                    \u003c/ul\u003e\n\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/nav\u003e\n\n\n\u003c/header\u003e\n\n```\n\n\n\u003c/br\u003e\n\n### Paso 11) Creación de Servicios\n#### (Un servicio Angular es un objeto sin estado y proporciona algunas funciones muy útiles. Estas funciones se pueden invocar desde cualquier componente de Angular, como Controladores, Directivas, etc. Esto ayuda a dividir la aplicación web en unidades lógicas pequeñas y diferentes que se pueden reutilizar.).\n\n\u003c/br\u003e\n\n\n* Vamos a generar el servicio dentro de la carpeta de electronica y el mismo se llamara electronica.service (pages/electronica/electronica.service).\n* El comando completo sería `ng g s pages/electronica/electronica`\n* Abris una nueva terminal y escribir el comando anterior (en mi caso)\n* Se tendria que haber generado el archivo `electronica.service.ts`\n\n\n\n\n\n\u003c/br\u003e\n\n  ## Sección 5) Desarrollo de las Páginas Web\n\n\u003c/br\u003e\n\n\n\n\n  ### Paso 12) Página Listado de Componentes de Electrónica\n  #### (Como se explico anteriormente esta página contendra la lista de componentes de eletrónica)\n  \n  \u003c/br\u003e\n  \n  #### 12.1) Creación de una Tabla\n  * Copiamos la estructura base de la tabla de bootstrap https://getbootstrap.com/docs/5.1/content/tables/ y la pegamos en el `listado-componentes.component.html` dentro del modulo `listado-componentes`.\n  * Voy a cambiar la variante de la tabla a tipo hover, también los nombres, columnas, agregar botones, colores, etc.\n  * También voy a agregar iconos de bootstrap `(https://icons.getbootstrap.com/)` para la visualizacion, la edición y la eliminación de los productos del listado\n  \n  \u003c/br\u003e\n  \n  #### 12.2) Uso de la Directiva `*ngFor`\n  * Vamos a replicar el listado de productos 4 veces, usando la directiva de angular `*ngFor`, esta directiva nos permite generar muchos elementos HTML repetidos a partir de un recorrido de un arreglo de datos.\n\n```TypeScript\n\u003c!--Replicamos 4 veces los productos e iconos--\u003e\n            \u003ctr *ngFor=\" let producto of [0,1,2,3,4]\"\u003e\n                \u003cth scope=\"row\"\u003e1\u003c/th\u003e\n                \u003ctd\u003eMódulo WIFI MCU-ESP32\u003c/td\u003e\n                \u003ctd\u003eMCU-65788\u003c/td\u003e\n                \u003ctd\u003e1600\u003c/td\u003e\n```\n\n\u003c/br\u003e\n\n  #### 12.3) Creación de Funciones CRUD (editar, eliminar y ver )\n  * Necesitamos funciones que nos permitan eliminar, mostrar y modificar los PRODUCTOS que se muestran en el listado, estas funciones las vamos a usar con eventos posteriormente.\n  * Nos dirigimos a `listado-componentes.component.ts`\n  * Vamos a pasarle la clase Route en el constructor, esta clase es la encargada de gestionar las rutas de nuestras paginas web creadas. Importar dichos módulos\n  * Vamos a utilizar la propiedad llamada `state` dentro y fuera de los métodos que desarrollemos, esta propiedad nos permite trabajar con el objeto completo, dicha propiedad deberá ser implementada en cada una de las siguientes funciones.\n  * Para usar dicha propiedad debemos declarar un objeto de tipo NavigationExtras importando la interfaz correspondiente y pasandole un estado\n  * Código de la Propiedad..\n  ```TypeScript\n    navigationExtras : NavigationExtras = {\n\n      state : {\n        value:null\n      };\n  ```\n  * `ATENTI`, si se tiene una configuración estricta de TypeScript surgirá un error en este paso, ya que se está declarando la propiedad como nula, hay que dirigirnos al archivo `tsconfig.json` y dentro del `compilerOptions` cambiar el paramnetro `\"strict\":true` a `\"strict\":false`\n  * Por Último vamos a crear las funciones. Las mismas se llamaran `editarProducto`, `eliminarProducto` y `mostrarProducto`.\n\n\u003c/br\u003e\n\n#### 12.3.1) Función `eliminarProducto`\n* Este Método va a recibir un producto en su argumento \n* Luego, por el momento , en el cuerpo del método vamos a indicar con un alert que simplemente nos diga que el producto ha sido borrado..\n* Código Snippet..\n  \n```TypeScript\n  // Eliminar Productos\n  eliminarProducto(producto : any): void{\n    alert('El Producto ha sido Eliminado');\n  }\n```\n\n#### 12.3.2) Función `editarProducto`\n* Este Método va a recibir un producto en su argumento \n* En el cuerpo del método vamos a pasarle la ruta definida cuando creamos los componentes de las paginas creadas anteriormente que va a mostrar en detalle dicho producto. Además vamos a usar la propiedad  creada `navigationExtras` haciendo referencia al valor del `state` para trabajar con el objeto en sí. En el segundo parametro del `router.navigate` vamos a pasarle además el estado de la propiedad creada\n* Código Snippet..\n  \n```TypeScript\n  // Editar Productos\n  editarProducto(producto : any): void{\n    this.navigationExtras.state.value = producto;\n    this.router.navigate(['editar-componentes'] , this.navigationExtras);\n  }\n```\n\n#### 12.3.3) Función `detallesProducto`\n* Este Método va a recibir un producto en su argumento \n* En el cuerpo del método vamos a pasarle la ruta definida cuando creamos los componentes de las paginas creadas anteriormente que va a mostrar en detalle dicho producto. Además vamos a usar la propiedad  creada `navigationExtras` haciendo referencia al valor del `state` para trabajar con el objeto en sí. En el segundo parametro del `router.navigate` vamos a pasarle además el estado de la propiedad creada\n* Código Snippet..\n  \n```TypeScript\n  // Mostrar Productos\n  detallesProducto(producto : any): void{\n    this.navigationExtras.state.value = producto;\n    this.router.navigate(['detalles-componentes'] , this.navigationExtras);\n  }\n```\n\n  \u003c/br\u003e\n  \n * Código Completo para `listado-componentes.component.ts`..\n\n```TypeScript\nimport { Component, OnInit } from '@angular/core';\nimport { NavigationExtras, Router } from '@angular/router';\n\n@Component({\n  selector: 'app-listado-componentes',\n  templateUrl: './listado-componentes.component.html',\n  styleUrls: ['./listado-componentes.component.css']\n})\nexport class ListadoComponentesComponent implements OnInit {\n\n  navigationExtras : NavigationExtras = {\n\n      state : {\n        value :null\n      }\n  };\n\n  constructor(private router: Router) { }\n\n  ngOnInit(): void {\n\n  }\n\n  // Métodos CRUD para los Componentes Electrónicos\n\n  // Mostrar Productos\n  detallesProducto(producto : any): void{\n    this.navigationExtras.state.value = producto;\n    this.router.navigate(['detalles-componentes'] , this.navigationExtras);\n  }\n\n  // Editar Productos\n  editarProducto(producto : any): void{\n    this.navigationExtras.state.value = producto;\n    this.router.navigate(['editar-componentes'] , this.navigationExtras);\n  }\n\n  // Eliminar Productos\n  eliminarProducto(producto : any): void{\n    alert('El Producto ha sido Eliminado');\n  }\n}\n\n\n```\n\n\u003c/br\u003e\n  \n  #### 12.4) Uso de Enlaces a Eventos `(click)`\n  * El enlace de Eventos escucha los eventos de click en el botón y llama al método indicado cada vez que se produce un click\n  * Para poder implementar este evento se deben haber creado previamente las funciones correspondientes para que realizen las acciones de tipo CRUD básicas (editar, eliminar, agregar elementos), como se indica paso a paso en los items anteriores.\n  * Estas funciones se van a agregar dentro de cada boton correspondiente para que realice la acción deseada.\n\n  *  Código..\n  \n```html\n\u003cdiv class=\"table-responsive\"\u003e\n\n    \u003ctable class=\"table table-hover\"\u003e\n        \u003cthead\u003e\n            \u003ctr\u003e\n                \u003cth scope=\"col\"\u003eID\u003c/th\u003e\n                \u003cth scope=\"col\"\u003eNombre\u003c/th\u003e\n                \u003cth scope=\"col\"\u003eCódigo\u003c/th\u003e\n                \u003cth scope=\"col\"\u003ePrecio\u003c/th\u003e\n                \u003cth class=\"d-none d-sm-block\" scope=\"col\"\u003eOpciones\u003c/th\u003e\n            \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n            \u003c!--Replicamos 4 veces los productos e iconos--\u003e\n            \u003ctr *ngFor=\" let producto of [0,1,2,3,4]\"\u003e\n                \u003cth scope=\"row\"\u003e1\u003c/th\u003e\n                \u003ctd\u003eMódulo WIFI MCU-ESP32\u003c/td\u003e\n                \u003ctd\u003eMCU-65788\u003c/td\u003e\n                \u003ctd\u003e1600\u003c/td\u003e\n                \u003c!--En caso de moviles ocultamos --\u003e\n                \u003ctd class=\"btn-group d-none d-sm-block\" role=\"group\"\u003e\n\n                    \u003cbutton class=\"btn btn-primary border-light alert-link m-1\" (click)=\"detallesProducto(producto)\"\u003e\n                    \u003c!--Icono Visualizar Producto--\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-arrows-fullscreen\" viewBox=\"0 0 16 16\"\u003e\n                      \u003cpath fill-rule=\"evenodd\" d=\"M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707zm4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707zm0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707zm-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707z\"/\u003e\n                    \u003c/svg\u003e\n                      \u003c!--Fin Icono Visualizar Producto--\u003e\n                        \u003c/button\u003e\n\n                    \u003cbutton class=\"btn btn-warning border-light alert-link m-1 \" (click)=\"editarProducto(producto)\"\u003e\n                          \u003c!--Icono Editar Producto--\u003e\n                          \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-pencil\" viewBox=\"0 0 16 16\"\u003e\n                            \u003cpath d=\"M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z\"/\u003e\n                          \u003c/svg\u003e\n                            \u003c!--Fin Icono Editar Producto--\u003e\n              \u003c/button\u003e\n\n                    \u003cbutton class=\"btn btn-danger border-light alert-link m-1 \" (click)=\"eliminarProducto(producto)\"\u003e\n                                \u003c!--Icono Eliminar Producto--\u003e\n                                \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-trash\" viewBox=\"0 0 16 16\"\u003e\n                                  \u003cpath d=\"M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z\"/\u003e\n                                  \u003cpath fill-rule=\"evenodd\" d=\"M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z\"/\u003e\n                                \u003c/svg\u003e\n                                  \u003c!--Fin Icono Eliminar Producto--\u003e\n                                    \u003c/button\u003e\n                \u003c/td\u003e\n            \u003c/tr\u003e\n\n        \u003c/tbody\u003e\n\n    \u003c/table\u003e\n    \u003cdiv class=\"container\"\u003e\n        \u003cdiv class=\"row justify-content-center\"\u003e\n            \u003cdiv class=\"col-2\"\u003e\n                \u003cbutton class=\"btn btn-outline-dark  border-dark alert-link m-2 \"\u003eRegresar\n                \u003c!--Icono Regresar Inicio--\u003e\n                \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"currentColor\" class=\"bi bi-reply-fill\" viewBox=\"0 0 16 16\"\u003e\n                  \u003cpath d=\"M5.921 11.9 1.353 8.62a.719.719 0 0 1 0-1.238L5.921 4.1A.716.716 0 0 1 7 4.719V6c1.5 0 6 0 7 8-2.5-4.5-7-4-7-4v1.281c0 .56-.606.898-1.079.62z\"/\u003e\n                \u003c/svg\u003e\n                  \u003c!--Fin Icono Regresar Inicio--\u003e\n                    \u003c/button\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"col-2\"\u003e\n                \u003cbutton class=\"btn btn-outline-dark  border-dark alert-link m-2 \"\u003eActualizar\n                \u003c!--Icono Actualizar Listado--\u003e\n                \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"currentColor\" class=\"bi bi-arrow-repeat\" viewBox=\"0 0 16 16\"\u003e\n                  \u003cpath d=\"M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z\"/\u003e\n                  \u003cpath fill-rule=\"evenodd\" d=\"M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z\"/\u003e\n                \u003c/svg\u003e\n                  \u003c!--Fin Icono Actualizar Listado--\u003e\n                    \u003c/button\u003e\n\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n\u003c/div\u003e\n\n```\n\n\n\u003c/br\u003e\n  \n  #### 12.5) Capturando el objeto Producto en la Página `editar-componente`\n  \n  \u003c/br\u003e\n  \n  * Una vez definidos los métodos CRUD vamos a capturar los objetos que se pasen al `state` cuando se haga click en el icono de editar.\n  * Vamos a trabajar las Navegaciones y estados en `editar-componentes.component.ts`\n  * Nos dirigimos a `editar-componentes.component.ts`\n  * Dentro de la clase EditarComponentesComponent, fuera del constructor declaramos una variable llmada `valorProducto` del objeto como nulo. Dentro del constructor indicamos que la variable-propiedad `valorProducto` tendrá la propiedad de tomar el estado actual del objeto. Osea que nos muestre el valor de ese objeto .\n  * Una vez allí, dentro del constructor, inyectamos el `router` definiendolo en su argumento, dentro de este creamos una variable-propiedad (`const navigacionActual`) que nos traiga ese objeto con el método  `getCurrentNavidation()` a través de la ruta pasada.\n\n  *  Los signos de interrogación se indican ya que no es necesario pasarle sus valores.\n  * Código Completo..\n  \n  ```TypeScript\n  \n  import { Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\n\n@Component({\n  selector: 'app-editar-componentes',\n  templateUrl: './editar-componentes.component.html',\n  styleUrls: ['./editar-componentes.component.css']\n})\nexport class EditarComponentesComponent implements OnInit {\n\n  valorProducto = null\n\n  constructor(private router : Router) {\n   \n    const navigacionActual = this.router.getCurrentNavigation();\n\n    this.valorProducto = navigacionActual?.extras?.state;\n  }\n\n\n\n  ngOnInit(): void {\n  }\n\n}\n\n  \n  ```\n  * Por Último testeamos el valor del objeto que se obtiene al hacer click sobre el boton de editar.\n  * Nos dirigimos a `editar-componentes.component.html` e indicamos con interpolación el valor del producto, trabajamos con json.\n  * Código Snippet..\n```html\n\n\u003cp\u003eeditar-componentes works!\u003c/p\u003e\n\n{{ valorProducto | json }}\n\n\n```\n\n\n\n\n\n\u003c/br\u003e\n  \n  #### 12.6) Capturando el objeto Producto en la Página `detalles-componente`\n  \n  \u003c/br\u003e\n  \n  \n  * Una vez definidos los métodos CRUD vamos a capturar los objetos que se pasen al `state` cuando se haga click en el icono de detalles.\n  * Vamos a trabajar las Navegaciones y estados en `detalles-componentes.component.ts`\n  * Nos dirigimos a `detalles-componentes.component.ts`\n  * Dentro de la clase DetallesComponentesComponent, fuera del constructor declaramos una variable llamada `valorProducto` del objeto como nulo. Dentro del constructor indicamos que la variable-propiedad `valorProducto` tendrá la propiedad de tomar el estado actual del objeto. Osea que nos muestre el valor de ese objeto .\n  * Una vez allí, dentro del constructor, inyectamos el `router` definiendolo en el argumento del constructor, dentro de este creamos una variable-propiedad (`const navigacionActual`) que nos traiga ese objeto con el método  `getCurrentNavidation()` a través de la ruta pasada.\n  *  Los signos de interrogación se indican ya que no es necesario pasarle sus valores.\n  *  Vamos a crear una funcion para que nos regrese al listado de componentes cuando estemos en el detalle de un solo componente, la funcion se va a llamar `regresarListadoComponentes()`\n  * Vamos a reutilizar las funciones  `editarProducto()` y `eliminarProducto()` que declaramos en el `listado-componentes.component.ts`, para las operaciones de este producto. La diferencia acá es que no necesitamos pasarle el producto clickeado en el argumento de la funcion ya que lo recuperamos con el `getCurrentNavigation` , por ende en los estados de la funcion le pasamos la variable declarada `valorProducto`\n  * Importante declarar el navigationExtras e importar su módulo\n  * Código Completo..\n  \n  ```TypeScript\n  import { Component, OnInit } from '@angular/core';\nimport { NavigationExtras, Router } from '@angular/router';\n\n@Component({\n  selector: 'app-detalles-componentes',\n  templateUrl: './detalles-componentes.component.html',\n  styleUrls: ['./detalles-componentes.component.css']\n})\nexport class DetallesComponentesComponent implements OnInit {\n\n  navigationExtras : NavigationExtras = {\n\n    state : {\n      value :null\n    }\n};\n\n\n\n\n  valorProducto = null;\n\n  constructor(private router: Router) {\n\n    const navegacionActual = this.router.getCurrentNavigation();\n\n    this.valorProducto = navegacionActual?.extras?.state;\n\n\n  }\n\n  ngOnInit(): void {\n  }\n\n    //Regresar Listado Productos\n  regresarListadoProductos():void{\n    this.router.navigate(['listado-componentes']);\n  }\n  \n\n  // Editar Productos\n  editarProducto(): void{\n    this.navigationExtras.state.value = this.valorProducto;\n    this.router.navigate(['editar-componentes'] , this.navigationExtras);\n  }\n\n  // Eliminar Productos\n  eliminarProducto(): void{\n    alert('El Producto ha sido Eliminado');\n  }\n\n\n\n\n}\n\n\n  \n  ```\n \n  * Por Último testeamos el valor del objeto que se obtiene al hacer click sobre el boton de detalles.\n  * Nos dirigimos a `detalles-componentes.component.html` e indicamos con interpolación el valor del producto, trabajamos con json.\n  * Código Snippet..\n```html\n\n\u003cp\u003edetalles-componentes works!\u003c/p\u003e\n\n{{ valorProducto | json }}\n\n\n```\n\n\n\n\n\n\n\n\u003c/br\u003e\n\n  ### Paso 13) Página Detalles Componentes de Electrónica\n  #### (Esta Página contendrá los Detalles Específicos de cada Producto o Componente de Electrónica)\n  \n  \u003c/br\u003e\n  \n  #### 13.1) Maquetación Página Detalles de Componentes\n  * En esta página se alojará el detalle de cada componente una vez que el usuario haga click sobre el icono de detalles.\n  * La Maquetación de la Página es `detalles-componentes.component.html`\n  * Voy a crear un Card para el Producto con su foto, detalle, etc y otro Card para el detalle del producto con sus botones y descripcion. La idea es que ambas cards sean responsives.\n   * Una vez que hemos declarado las funciones en el `detalles-componentes.component.ts`, vamos a pasarles los eventos a los botones y cuando se haga click se dispare las funciones realizadas anteriormente.\n    * En el boton de regresar declaramos la funcion click para que se dispare dicho evento y nos muestre el alert..\n  \n  ```html\n   \u003cbutton class=\"btn btn-danger border-dark alert-link m-1 \" (click)=\"regresarListadoProductos()\"\u003e\n  ```\n  \n  * En el boton de eliminar declaramos la funcion click para que se dispare dicho evento y nos muestre el alert..\n  \n  ```html\n   \u003cbutton class=\"btn btn-danger border-dark alert-link m-1 \" (click)=\"eliminarProducto()\"\u003e\n  ```\n   * En el boton de editar declaramos la funcion click para que se dispare dicho evento \n   \n  ```html\n   \u003cbutton class=\"btn btn-danger border-dark alert-link m-1 \" (click)=\"editarProducto()\"\u003e\n  ```\n  \n  * Código completo de `detalles-componentes.component.html`..\n\n```html\n\u003cdiv class=\"container m-2\"\u003e\n    \u003cdiv class=\"row justify-content-start\"\u003e\n\n\n\n        \u003c!--CARD PRODUCTO--\u003e\n        \u003cdiv class=\"col-md-5 col-sm-12\"\u003e\n\n            \u003cdiv class=\"card bg-opacity-10 bg-secondary\" style=\"max-width: 540px;\"\u003e\n                \u003cdiv class=\"row g-0  \"\u003e\n                    \u003cdiv class=\"col-md-4\"\u003e\n                        \u003cimg src=\"assets/images/esp32.jpg\" class=\"card-img-top \" alt=\"...\"\u003e\n                    \u003c/div\u003e\n                    \u003cdiv class=\"col-md-8 \"\u003e\n                        \u003cdiv class=\"card-body \"\u003e\n                            \u003ch5 class=\"card-title bg-gradient bg-opacity-10 bg-dark text-center\"\u003eMódulo Wifi Mcu Esp32\u003c/h5\u003e\n                            \u003cp class=\"card-text\"\u003eIncluyen puerto de conexión microUSB para alimentación y conector JST para alimentación de la placa. Y se pueden programar desde el IDE de Arduino..\u003c/p\u003e\n                        \u003c/div\u003e\n                        \u003cdiv class=\"card-body  \"\u003e\n                            \u003ca href=\"https://www.espressif.com/sites/default/files/documentation/esp32_datasheet_en.pdf\" class=\"card-link text-dark\"\u003eDatasheet\u003c/a\u003e\n                            \u003ca href=\"https://www.espressif.com/sitproyectos%20esp32es/default/files/documentation/esp32_datasheet_en.pdf\" class=\"card-link text-dark\"\u003eProyectos\u003c/a\u003e\n                            \u003ca href=\"https://www.espressif.com/sitproyectos%20esp32es/default/files/documentation/esp32_datasheet_en.pdf\" class=\"card-link text-dark\"\u003eMás Info\u003c/a\u003e\n                        \u003c/div\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n\n        \u003c!--FIN CARD PRODUCTO--\u003e\n\n        \u003c!--CARD DETALLES PRODUCTO--\u003e\n\n        \u003cdiv class=\"col-md-7 col-sm-12\"\u003e\n\n            \u003cdiv class=\"bg-opacity-10 bg-dark \"\u003e\n                \u003chr\u003e\n                \u003cdiv class=\"card-body text-center\"\u003e\n                    \u003cdiv class=\"text-center \"\u003e\n                        \u003ch5 class=\"text-underline\"\u003eDETALLES PRODUCTO\u003c/h5\u003e\n                    \u003c/div\u003e\n                    \u003chr\u003e\n                    \u003cul class=\" m-2 p-2 text-center list-group list-group-flush list-group-horizontal-lg list-group-horizontal-md input-group \"\u003e\n\n                        \u003cli class=\"list-group-item \"\u003e\u003cstrong\u003eID\u003c/strong\u003e\n                            \u003cp\u003e1\u003c/p\u003e\n                        \u003c/li\u003e\n                        \u003cli class=\"list-group-item \"\u003e\u003cstrong\u003eNombre\u003c/strong\u003e\n                            \u003cp\u003eMódulo Wifi Mcu Esp32\n                            \u003c/p\u003e\n                        \u003c/li\u003e\n                        \u003cli class=\"list-group-item\"\u003e\u003cstrong\u003eCódigo\u003c/strong\u003e\n                            \u003cp\u003eMCU-65788\u003c/p\u003e\n                        \u003c/li\u003e\n                        \u003cli class=\"list-group-item\"\u003e\u003cstrong\u003ePrecio\u003c/strong\u003e\n                            \u003cp\u003e1600\u003c/p\u003e\n                        \u003c/li\u003e\n\n                    \u003c/ul\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n\n\n            \u003c!--BOTONES--\u003e\n            \u003cdiv class=\"container col-sm-12 bg-opacity-75 bg-dark p-1\"\u003e\n                \u003cdiv class=\"row justify-content-center\"\u003e\n\n                    \u003cdiv class=\"col-md-2 col-sm-2\"\u003e\n                        \u003cbutton class=\"btn btn-primary border-dark alert-link m-1 \" (click)=\"regresarListadoProductos()\"\u003e\n                      \u003c!--Icono Regresar--\u003e\n                      \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"currentColor\" class=\"bi bi-arrow-return-left\" viewBox=\"0 0 16 16\"\u003e\n                        \u003cpath fill-rule=\"evenodd\" d=\"M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z\"/\u003e\n                      \u003c/svg\u003e\n                        \u003c!--FIN Icono Regresar--\u003e\n                    \u003c/button\u003e\n                    \u003c/div\u003e\n\n                    \u003cdiv class=\"col-md-2 col-sm-2\"\u003e\n                        \u003cbutton class=\"btn btn-warning border-dark alert-link m-1 \" (click)=\"editarProducto()\"\u003e\n                          \u003c!--Icono Editar Producto--\u003e\n                          \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"currentColor\" class=\"bi bi-pencil\" viewBox=\"0 0 16 16\"\u003e\n                            \u003cpath d=\"M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z\"/\u003e\n                          \u003c/svg\u003e\n                            \u003c!--Fin Icono Editar Producto--\u003e\n                        \u003c/button\u003e\n                    \u003c/div\u003e\n                    \u003cdiv class=\"col-md-2 col-sm-2\"\u003e\n                        \u003cbutton class=\"btn btn-danger border-dark alert-link m-1 \" (click)=\"eliminarProducto()\"\u003e\n                \u003c!--Icono Eliminar Producto--\u003e\n                \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"currentColor\" class=\"bi bi-trash\" viewBox=\"0 0 16 16\"\u003e\n                  \u003cpath d=\"M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z\"/\u003e\n                  \u003cpath fill-rule=\"evenodd\" d=\"M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z\"/\u003e\n                \u003c/svg\u003e\n                \u003c!--Fin Icono Eliminar Producto--\u003e\n                  \u003c/button\u003e\n                    \u003c/div\u003e\n\n                    \u003cdiv class=\"col-md-2 col-sm-2\"\u003e\n\n                        \u003cbutton onClick=\"window.location.reload()\" class=\"btn btn-secondary border-dark alert-link m-1  \"\u003e\n                \u003c!--Icono Actualizar Listado--\u003e\n                \u003csvg xmlns=\"http://www.w3.org/2000/svg \" width=\"20 \" height=\"20 \" fill=\"currentColor \" class=\"bi bi-arrow-repeat \" viewBox=\"0 0 16 16 \"\u003e\n                  \u003cpath d=\"M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z \"/\u003e\n                  \u003cpath fill-rule=\"evenodd \" d=\"M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z \"/\u003e\n                \u003c/svg\u003e\n                  \u003c!--Fin Icono Actualizar Listado--\u003e\n                  \u003c/button\u003e\n\n                    \u003c/div\u003e\n\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003c!--FIN BOTONES--\u003e\n\n            {{valorProducto | json}}\n\n        \u003c/div\u003e\n\n        \u003c!-- CARD FIN DETALLES PRODUCTO--\u003e\n\n\n\n\n\n\n    \u003c/div\u003e\n\n\n```\n\n\n\n\u003c/br\u003e\n\n  ### Paso 14) Página Editar Componentes de Electrónica\n  #### (Esta Página contendrá el formulario para editar el componente seleccionado de la lista de componentes de Electrónica)\n  \n  \u003c/br\u003e\n  \n  #### 14.1) Maquetación Página Editar Componentes de Electrónica\n\n\n\u003c/br\u003e\n\n  ### Paso 15) Página Agregar Componentes de Electrónica\n  #### (Esta Página contendrá el formulario para agregar componentes de Electrónica)\n  \n  \u003c/br\u003e\n  \n  #### 15.1) Maquetación Página Editar Componentes de Electrónica\n\n\n\u003c/br\u003e\n\n  ### Paso 16) Página de Inicio\n  #### (Esta Página será la página de Inicio de la Aplicación)\n  \n  \u003c/br\u003e\n  \n  #### 16.1) Maquetación Página de Inicio\n\n\n\n\n\n\n\n\u003c/br\u003e\n\u003c/br\u003e\n\u003c/br\u003e\n\u003c/br\u003e\n\u003c/br\u003e\n\n\n\n\n\n\n\n## Subir el proyecto al repositorio con git desde el bash de visual studio Code \n\n#### 1)Creamos un nuevo repositorio en GitHub\n\n#### 2)Inicializamos nuestro repositorio local .git\n* git init\n\n#### 3)Agregamos lo desarrollado a nuestro repo local\n* git add *\n\n#### 4)Agregamos lo que tenemos en nuestro repo local al área de Trabajo.\n* git commit -m \"agrega un comentario entre comillas\"\n\n### 5)Le indicamos a git donde se va a almacenar nuestro proyecto(fijate en tu repositorio de github cual es el enlace de tu proyecto(esta en code)).\n* git remote add origin https://github.com/andresWeitzel/AppTiendaElectronica_Angular_Firebase_Bootstrap\n\n### 6)Subimos nuestro proyecto.\n* git push -u origin master\n\n\u003c/br\u003e\n\n## Actualización del repositorio del proyecto con git desde el bash de visual studio code\n\n### 1)Visualizamos las modificaciones realizadas en local\n* git status\n\n### 2)Agregamos lo modificado al area de trabajo\n* git add *\n\n### 3)Confirmamos las modificaciones realizadas\n* git commit -m \"Tu commit entre comillas\"\n\n### 4)Sincronizamos y traemos todos los cambios del repositorio remoto a la rama en la que estemos trabajando actualmente.\n##### Desconozco porqué tengo que ejecutar este comando, supongo que será porque no estoy trabajando con branchs en mi proyecto, el main por defecto de gitHub ahora es mi master(Yo realicé esa modificación para mejor visualización)).\n* git pull https://github.com/andresWeitzel/AppTiendaElectronica_Angular_Firebase_Bootstrap\n\n### 5)Enviamos todos los cambios al repo en github\n* git push https://github.com/andresWeitzel/AppTiendaElectronica_Angular_Firebase_Bootstrap\n\n\u003c/br\u003e\n\n## Deploy de la app desde el bash de visual studio code\n\n### 1) Instalar el cli global\n * npm i netlify-cli\n * netlify login\n * netlify status\n * netlify --version\n\n### 2) Build \n * ng build --prod \n\n### 3) Deploy\n* netlify deploy --prod\n#### IMPORTANTE: Luego de ingresar este comando, asegurarse de colocar correctamente el `Publish directory` , sino no se va a deployar correctamente, en general es  `dist/'nombre de tu proyecto sin comillas' ` \n\n\n\n\n\u003cbr\u003e\n\n\u003c/details\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandresweitzel%2Fappelectrothings_angular_springboot_mongodb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandresweitzel%2Fappelectrothings_angular_springboot_mongodb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandresweitzel%2Fappelectrothings_angular_springboot_mongodb/lists"}