{"id":22935296,"url":"https://github.com/blackpachamame/reto-28-dias-angular","last_synced_at":"2026-05-02T03:32:41.151Z","repository":{"id":58492594,"uuid":"525635294","full_name":"Blackpachamame/reto-28-dias-angular","owner":"Blackpachamame","description":"28 Días aprendiendo Angular con Dominicode.","archived":false,"fork":false,"pushed_at":"2022-10-30T15:17:34.000Z","size":657,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-01T18:54:46.905Z","etag":null,"topics":["angular"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Blackpachamame.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-17T04:12:08.000Z","updated_at":"2023-12-11T03:11:12.000Z","dependencies_parsed_at":"2023-01-20T23:47:49.439Z","dependency_job_id":null,"html_url":"https://github.com/Blackpachamame/reto-28-dias-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Blackpachamame/reto-28-dias-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blackpachamame%2Freto-28-dias-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blackpachamame%2Freto-28-dias-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blackpachamame%2Freto-28-dias-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blackpachamame%2Freto-28-dias-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Blackpachamame","download_url":"https://codeload.github.com/Blackpachamame/reto-28-dias-angular/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blackpachamame%2Freto-28-dias-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32522245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T01:12:54.858Z","status":"online","status_checked_at":"2026-05-02T02:00:05.923Z","response_time":132,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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"],"created_at":"2024-12-14T11:47:05.231Z","updated_at":"2026-05-02T03:32:41.133Z","avatar_url":"https://github.com/Blackpachamame.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReto de los 28 días con Angular - Dominicode\u003c/h1\u003e\n\nDurante los próximos 28 días, cada día te voy a enseñar algo nuevo con Angular.\nPueden encontrar la lista con los videos de cada día en el siguiente [enlace](https://www.youtube.com/watch?v=8Fwwhjt3jjE\u0026list=PL_9MDdjVuFjFBed4Eor5qj1T0LLahl4z0).\n\n## Entregas y Resumen\n\n1. **¿Qué es Angular? e Instalación Angular CLI**\n   - Angular es un framework para aplicaciones web desarrollado en Typescript.\n   - Instalar Angular CLI: `npm install -g @angular/cli` (requiere tener instalado node.js).\n   - Crear un nuevo proyecto: `ng new nombreProyecto`.\n   - Acceder a la carpeta del nuevo proyecto: `cd nombreProyecto`.\n   - Levantar el servidor de Angular: `ng serve`.\n2. **Exploramos Angular APP**\n3. **¿Componentes en Angular?**\n   - Un componente es un elemento que está compuesto por:\n     - Vista: Un Template, que contendrá el HTML para la vista.\n     - Lógica: Un Controlador donde se encuentra la lógica, ese archivo debe incluir una clase y esta es la que va a contener las propiedades que se van a usar en la vista (HTML) y los métodos que serán las acciones que se ejecutarán en la vista. En este archivo de lógica también se incluye una metadata.\n     - Estilos: Un archivo para el CSS, donde incluiremos los estilos.\n     - Testing.\n   - Crear un nuevo componente: `ng generate compontent unComponente` o `ng g c unComponente`.\n   - También se puede crear dentro de un fichero: `ng g c fichero/unComponente`.\n4. **Interpolación {{ angular }} / On way data binding**\n   - Enlazar una propiedad que este en nuestro `component.ts` para leerla en el `component.html`, pero no se puede modificar.\n5. **Enlace de datos bidireccional / On way data binding**\n   - Comunicar componentes _(lo veremos en el reto del día 10)_. Enlazar una propiedad que este en nuestro `component.ts` para tenerla en el `component.html` y modificar su valor simultáneamente.\n6. **¿Qué es una directiva? ngIf, ngFor**\n   - Las directivas son una serie de elementos que aplicaremos a nuestro HTML como si fuera un atributo, con el fin de añadir nuevos comportamientos o estilos al DOM.\n   - Las directivas estructurales nos permiten cambiar el comportamiento del DOM.\n7. **¿Qué son las directivas de atributos? ngClass, ngStyle**\n   - Las directivas de atributos nos permiten cambiar los estilos del DOM.\n8. **Ciclo de vida de un componente**\n9. **Event binding ó (enlace de eventos)**\n   - Nos permite responder a las acciones del usuario.\n10. **Decorador @Input, ¿Qué es un decorador en Angular?**\n    - Los decoradores permiten indicar al framework cómo interpretar un elemento.\n    - Con @Input podemos modificar el componente padre y ese cambio se lo comunica al componente hijo.\n11. **Decorador @Output**\n    - El decorador @Output() en un componente (o directiva) hijo permite que los datos fluyan del hijo al padre.\n    - Cuando usamos el decorador @Input se utiliza `[ ]` para indicarle al componente hijo el valor que se está pasando, en cambio el decorador @Output utiliza `( )` para capturar el valor emitido y pasárselo al método que tiene el componente padre.\n12. **Mecanismo de detección de cambio Angular (Change Detection)**\n    - El change detection es el mecanismo o estrategia de detección de cambios que utiliza Angular para saber cuándo debe actualizar un componente o toda la vista en caso de que la data haya cambiado.\n    - Los cambios pueden producirse por:\n      - Eventos del mouse\n      - Llamadas Ajax\n      - SetInterval\n      - SetTimeOut\n    - Estrategias:\n      - Default: establece la estrategia en CheckAlways\n      - OnPush: establece la estrategia en CheckOnce (bajo demanda)\n    - En este día aprendimos a cómo establecer una estrategia en cada componente con un @Input o @Output para que Angular solo renderice ese componente cuando se actualiza, en lugar de renderizar toda la página.\n13. **¿Cómo crear un Pipe personalizado en Angular?**\n    - Los pipes son una herramienta de Angular que nos permite transformar visualmente la información, por ejemplo, cambiar un texto a mayúsculas o minúsculas, o darle formato de fecha y hora. El valor de la información transformada no cambia, sólo lo hace su aspecto.\n    - Crear un nuevo pipe: `ng generate pipe nombrePipe` o `ng g p nombrePipe`.\n    - También se puede crear dentro de un fichero: `ng g p fichero/nombrePipe`.\n14. **Formularios En Angular**\n    - Angular nos brinda dos enfoques distintos a la hora de trabajar con formularios:\n      - Template-driven forms: Ideales para crear formularios sencillos.\n      - Reactives forms: Los formularios reactivos son más robustos y escalables.\n15. **Configuración de rutas**\n    - Se encargan de la navegación de un componente a otro.\n    - Pasan parámetros\n    - Redireccionan\n    - Protegen rutas (guards)\n    - Crear un nuevo componente si existe más de un módulo: `ng generate component nombreComponente --module app.module` o `ng g c fichero/nombreComponente --m app`.\n16. **Rutas hijas, párametros y QueryParams**\n17. **Guardianes en Angular (Guards)**\n    - Nos ayudan a proteger una determinada ruta. Se ejecutan antes de cargar una ruta y determinan si se puede cargar dicha ruta o no.\n    - Crear un nuevo guard: `ng generate guard nombreGuard` o `ng g g fichero/nombreGuard`.\n    - Existen 4 tipos de guards:\n      - CanActivate: Antes de cargar los componentes de la ruta.\n      - CanLoad: Antes de cargar los recursos (assets) de la ruta.\n      - CanDeactivate: Antes de intentar salir de la ruta actual (usualmente utilizado para evitar salir de una ruta, si no se han guardado los datos).\n      - CanActivateChild: Antes de cargar las rutas hijas de la ruta actual.\n18. **¿Para sirve un Resolver en Angular?**\n    - Interface que las clases pueden implementar para ser un proveedor de datos.\n    - Se debe usar con el router para resolver datos durante la navegación.\n    - Se debe implementar un método resolve() que se invoca cuando comienza la navegación.\n    - El router espera a que se resuelvan los datos antes de que finalmente se active la ruta.\n19. **Lazy loading**\n    - Retrasa la carga de un módulo hasta que nuestra aplicación lo necesita.\n20. **forRoot \u0026 forChild**\n    - forRoot: Se utiliza para poner todas las rutas en el módulo principal (raiz).\n    - forChild: Se utiliza bajo demanda (lazy loading).\n21. **¿Cómo hacer una peticion HTTP en Angular? CRUD**\n    - HttpClient es un cliente con los verbos REST, y está basado en Observables.\n    - Crear un nuevo servicio: `ng generate service unServicio` o `ng g s unServicio`.\n22. **HTTP Interceptor**\n    - Interceptar peticiones HTTP para modificarlas.\n    - Crear un nuevo interceptor: `ng generate interceptor nombreInterceptor` o `ng g interceptor unFichero/nombreInterceptor` (El aliad \"i\" es para interface).\n23. **¿Qué es un Observable? Diferencias entre Promesa y Observable**\n    - Los Observables son colecciones o secuencias de eventos continuos ordenados en el tiempo.\n    - Programación Reactiva: La es programación orientada al manejo de streams de datos asíncronos y la propagación de los cambios.\n    - Promesa:\n      - Se ejecuta inmediatamente\n      - Emite un solo valor\n      - Envía los errores a la promesa hija\n      - Usa la cláusula `.then()`\n    - Observable:\n      - No comienza hasta la suscripción\n      - Múltiples valores a lo largo del tiempo\n      - Proporciona operadores\n24. **Content Project en Angular (proyección de contenido en Angular)**\n    - La proyección de contenido es un patrón en el que inserta o proyecta el contenido que desea usar dentro de otro componente.\n    - Por ejemplo, podría tener un componente Tarjeta que acepte contenido proporcionado por otro componente.\n25. **Elementos ng-container \u0026 ng-template**\n    - NG-TEMPLATE:\n      - El elemento ng-template de Angular define una plantilla que no se representa de forma predeterminada.\n      - Puede definir el contenido de la plantilla que Angular solo representa cuando usted, directa o indirectamente, le indica específicamente que lo haga, lo que le permite tener un control total sobre cómo y cuándo se muestra el contenido.\n    - NG-CONTAINER:\n      - Un elemento especial que puede contener directivas estructurales sin agregar nuevos elementos al DOM.\n      - Nos permite usar directivas estructurales sin ningún elemento adicional, asegurándonos de que los únicos cambios de DOM que se aplican son los dictados por las propias directivas.\n26. **ViewChild**\n    - Es un decorador de propiedades que configura una consulta de vista.\n    - El detector busca el primer elemento o directiva que coincida con el selector en la vista (DOM).\n    - Si el DOM cambia y un elemento secundario nuevo coincide con el selector, la propiedad se actualiza.\n27. **Comunicación entre componentes con Observables**\n    - Subject: es un tipo de observable especial, que nos permite realizar diversas tareas.\n    - BehaviorSubject:\n      - Requiere un valor por defecto.\n      - Devuelve el último valor, inmediatamente hay una suscripción.\n      - Podemos recuperar el último valor emitido con el getValue().\n28. **Configurar eslint y prettier en Angular**\n\n## Otros Datos\n\n- **API CrudCrud:** El enlace a esta API debe actualizarse diariamente ya que es la versión gratuita. Para esto, vamos a la página [CrudCrud](https://crudcrud.com) y copiamos el nuevo enlace. Luego reemplazamos en enlace anterior en nuestro archivo `environment.ts`.\n\n- **No se muestra ninguna ciudad si solo cargamos una sola, pero si aparece al agregar una segunda: Razón desconocida**\n\n- **Advertencia Molesta:**\n\n`warning NG8107: The left side of this optional chain operation does not include 'null' or 'undefined' in its type, therefore the '?.' operator can be replaced with the '.' operator.`\n\n- **Solución:**\n\n```\n\"angularCompilerOptions\": {\n    \"extendedDiagnostics\": {\n      \"checks\": {\n        \"optionalChainNotNullable\": \"suppress\"\n      }\n    }\n  }\n```\n\n- [Documentación](https://angular.io/extended-diagnostics#configuration)\n- [Solución encontrada en github](https://github.com/angular/angular/issues/46918)\n\n## Redes Dominicode\n\n- [Youtube 📺](https://www.youtube.com/c/DominiCode)\n- [Website 🌎](https://dominicode.com)\n- [Github 📂](https://github.com/domini-code)\n- [Twitch 🎥](https://www.twitch.tv/dominicode_live)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackpachamame%2Freto-28-dias-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblackpachamame%2Freto-28-dias-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackpachamame%2Freto-28-dias-angular/lists"}