{"id":18051429,"url":"https://github.com/insidewhy/observable-input","last_synced_at":"2025-04-10T17:40:35.128Z","repository":{"id":57155555,"uuid":"103067853","full_name":"insidewhy/observable-input","owner":"insidewhy","description":"angular input properties as observable streams","archived":false,"fork":false,"pushed_at":"2020-07-01T09:08:01.000Z","size":13,"stargazers_count":48,"open_issues_count":1,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-05-07T19:21:37.475Z","etag":null,"topics":["angular","rxjs"],"latest_commit_sha":null,"homepage":null,"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/insidewhy.png","metadata":{"files":{"readme":"readme.markdown","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":"2017-09-10T22:59:09.000Z","updated_at":"2023-06-10T16:08:09.000Z","dependencies_parsed_at":"2022-09-20T23:10:49.285Z","dependency_job_id":null,"html_url":"https://github.com/insidewhy/observable-input","commit_stats":null,"previous_names":["ohjames/observable-input"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insidewhy%2Fobservable-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insidewhy%2Fobservable-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insidewhy%2Fobservable-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insidewhy%2Fobservable-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/insidewhy","download_url":"https://codeload.github.com/insidewhy/observable-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248262162,"owners_count":21074256,"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","rxjs"],"created_at":"2024-10-30T22:48:07.458Z","updated_at":"2025-04-10T17:40:35.105Z","avatar_url":"https://github.com/insidewhy.png","language":"TypeScript","readme":"# Installation\n\n```bash\nnpm install -S observable-input\n```\nor\n```bash\nyarn add observable-input\n```\n\n# Usage\n\n```typescript\nimport { Component, Input } from '@angular/core'\nimport { Observable } from 'rxjs'\nimport { ObservableInput } from 'observable-input'\n\n@Component({\n  templateUrl: './some-component.html',\n  selector: 'app-some-component',\n})\nclass SomeComponent {\n  @Input() @ObservableInput()\n  private index: Observable\u003cnumber\u003e\n}\n```\n\nIt can be used like this with a non-observable input for `index`:\n```html\n\u003capp-some-component index=\"nonObservableValue\"\u003e\u003c/app-some-component\u003e\n```\n\n# Details\n\nThis decorator works by replacing the input with a property, the getter returns a value with type `Observable\u003cT\u003e` while the setter expects a variable of type `T`. This introduces a few drawbacks:\n * While you should generally only be reading your input values and not setting them, the mismatch of types for the setter and getter here is still potentially a source of confusion.\n * For now the angular code (whether AOT compiled or not) only writes to a component's inputs (in this case via the setter) and never reads from them, if it did it would receive a value with type `Observable\u003cT\u003e` when it expects a value of type `T`.\n * The angular compiler does not type check the values passed to a component match the types of the `@Input`, if it did it would raise an error indicating that the input should be of type `Observable\u003cT\u003e` instead of `T`.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsidewhy%2Fobservable-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finsidewhy%2Fobservable-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsidewhy%2Fobservable-input/lists"}