{"id":17366795,"url":"https://github.com/facundo-moran/calculadora-basica","last_synced_at":"2026-04-29T15:06:53.007Z","repository":{"id":257301508,"uuid":"853938176","full_name":"facundo-moran/calculadora-basica","owner":"facundo-moran","description":"Cálculadora básica","archived":false,"fork":false,"pushed_at":"2024-09-16T02:01:47.000Z","size":211,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-13T22:08:15.032Z","etag":null,"topics":["angular","web","zoneless"],"latest_commit_sha":null,"homepage":"https://mrn-calculadora-basica.netlify.app","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/facundo-moran.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-08T00:34:24.000Z","updated_at":"2024-09-16T02:01:50.000Z","dependencies_parsed_at":"2024-09-15T20:57:14.041Z","dependency_job_id":"141217fe-7808-4a00-8549-76f975bd0eb0","html_url":"https://github.com/facundo-moran/calculadora-basica","commit_stats":{"total_commits":4,"total_committers":1,"mean_commits":4.0,"dds":0.0,"last_synced_commit":"26fc780c3c6a4fe2b14519c02183d2ddc6363c12"},"previous_names":["facundo-moran/calculadora-basica"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/facundo-moran/calculadora-basica","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facundo-moran%2Fcalculadora-basica","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facundo-moran%2Fcalculadora-basica/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facundo-moran%2Fcalculadora-basica/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facundo-moran%2Fcalculadora-basica/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/facundo-moran","download_url":"https://codeload.github.com/facundo-moran/calculadora-basica/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facundo-moran%2Fcalculadora-basica/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32430834,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T13:34:34.882Z","status":"ssl_error","status_checked_at":"2026-04-29T13:34:29.830Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","web","zoneless"],"created_at":"2024-10-15T22:04:59.858Z","updated_at":"2026-04-29T15:06:52.988Z","avatar_url":"https://github.com/facundo-moran.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv style=\"text-align: center\"\u003e\n  \u003cimg src=\"./public/images/svg/angular.svg\" style=\"max-width: 200px;\" /\u003e\n  \u003ch1\u003eCalculadora Básica\u003c/h1\u003e\n\u003c/div\u003e\n\n## Durante el desarrollo de esta aplicación utilice los siguientes conceptos\n\n### Signal\n---\n\tComo se explica en la documentación oficial una señal es una envoltura para un valor primitivo o complejo que notificará, a los interesados en el valor, cuando el mismo cambie y pueden ser de solo lectura como modificables.\n\n### Output() - outputs de componentes basado en función\n---\n\tLa funcion output() que nos permite emitir valores hacia componentes padres. \n\tLos contenedores padres pueden obtener los valores emitidos usando la sintaxis \"event binding\".\n\n```\nimport {Component, output} from '@angular/core';\n\n@Component({...})\nexport class MyComp {\n  clicked = output\u003cstring\u003e()    // OutputEmitterRef\u003cstring\u003e\n  setNewName(newName: string) {\n    this.clicked.emit(newName);\n  }\n}\n```\n\n```\n# Ejemplo de \"event binding\"\n\n\u003cbutton\n  (click)=\"onClicked()\"\n\u003e\n  click me\n\u003c/button\u003e\n```\n\n### ViewChild - View Queries as signals\n---\n\tComo su nombre indica, nos permiten realizar consultas o búsquedas dentro de las vistas (templates html) en busca de un único elemento, cuyo valor será envuelto en una señal o en caso de no encontrarlo undefined.\n\n```\n@Component({\n  template:\n\t\u003cdiv #el\u003e\u003c/div\u003e\n    \u003cmy-component /\u003e\n})\nexport class TestComponent {\n  // query for a single result by a string predicate  \n  divEl = viewChild\u003cElementRef\u003e('el')  // Signal\u003cElementRef|undefined\u003e\n  // query for a single result by a type predicate\n  cmp = viewChild(MyComponent);        // Signal\u003cMyComponent|undefined\u003e\n}\n```\n\n```\n# Ejemplo de viewChild\n\n@Component({\n  template: `\n    \u003cdiv #el\u003e\u003c/div\u003e\n    \u003cmy-component /\u003e\n  `\n})\nexport class TestComponent {\n  // query for a single result by a string predicate  \n  divEl = viewChild\u003cElementRef\u003e('el')  // Signal\u003cElementRef|undefined\u003e\n  // query for a single result by a type predicate\n  cmp = viewChild(MyComponent);        // Signal\u003cMyComponent|undefined\u003e\n}\n```\n\n### ViewChildren - View Queries as signals\n---\n\tComo su nombre indica, nos permiten realizar consultas o búsquedas dentro de las vistas (templates html) en busca de todos los elementos, cuyo valor será envuelto en una señal de solo lectura o en caso de no encontrarlo undefined.\n### Ng-content - Content Projection \n---\n\tEs el elemento \u003cng-content\u003e de Angular que nos permite indicar dentro de un componente, el lugar en donde se va a proyectar o renderizar el contenido que especifiquemos.\n\n```\n// Component source\n@Component({\n  selector: 'custom-card',\n  template: `\n    \u003cdiv class=\"card-shadow\"\u003e\n      \u003cng-content /\u003e\n    \u003c/div\u003e\n  `,\n})\nexport class CustomCard {/* ... */}\n```\n\n```\n# Ejemplo de Content Projection\n\n// Component source\n@Component({\n  selector: 'custom-card',\n  template: `\n    \u003cdiv class=\"card-shadow\"\u003e\n      \u003cng-content /\u003e\n    \u003c/div\u003e\n  `,\n})\nexport class CustomCard {/* ... */}\n```\n\n### Host - Binding to the host element\n---\n\tEl elemento host de un componente es el elemento del DOM que hace match con su selector. El contenido del template html del componente siempre se renderiza dentro dentro de su elemento host.\n\n\tUn componente tiene el poder de enlazar propiedades, atributos y eventos a su elemento host haciendo uso de la propiedad host dentro del decorador @Component.\n\n```\n@Component({\n  ...,\n  host: {\n    'role': 'slider',\n    '[attr.aria-valuenow]': 'value',\n    '[tabIndex]': 'disabled ? -1 : 0',\n    '(keydown)': 'updateValue($event)',\n  },\n})\nexport class CustomSlider {\n  value: number = 0;\n  disabled: boolean = false;\n  updateValue(event: KeyboardEvent) { /* ... */ }\n  /* ... */\n}\n```\n\n---\n### Referencias\n- [Función output](https://angular.dev/guide/components/output-fn)\n- [Consulta de elementos como señal](https://angular.dev/guide/signals/queries#viewchild)\n- [Proyección de contenido](https://angular.dev/guide/components/content-projection)\n- [Propiedad host](https://angular.dev/guide/components/host-elements#the-hostbinding-and-hostlistener-decorators)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffacundo-moran%2Fcalculadora-basica","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffacundo-moran%2Fcalculadora-basica","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffacundo-moran%2Fcalculadora-basica/lists"}