{"id":18821367,"url":"https://github.com/coatue-oss/ngcomponent","last_synced_at":"2025-04-14T00:32:36.830Z","repository":{"id":60775104,"uuid":"62928730","full_name":"coatue-oss/ngcomponent","owner":"coatue-oss","description":"A clean React-like abstraction for rendering non-Angular components within an Angular app.","archived":false,"fork":false,"pushed_at":"2018-12-25T17:24:59.000Z","size":173,"stargazers_count":16,"open_issues_count":6,"forks_count":16,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-10-12T03:27:28.244Z","etag":null,"topics":["angular","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coatue-oss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-09T02:45:41.000Z","updated_at":"2022-05-10T08:46:21.000Z","dependencies_parsed_at":"2022-10-04T16:35:15.105Z","dependency_job_id":null,"html_url":"https://github.com/coatue-oss/ngcomponent","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coatue-oss%2Fngcomponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coatue-oss%2Fngcomponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coatue-oss%2Fngcomponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coatue-oss%2Fngcomponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coatue-oss","download_url":"https://codeload.github.com/coatue-oss/ngcomponent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223612915,"owners_count":17173632,"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","react"],"created_at":"2024-11-08T00:39:42.845Z","updated_at":"2024-11-08T00:39:43.700Z","avatar_url":"https://github.com/coatue-oss.png","language":"TypeScript","readme":"# NgComponent [![Build Status][build]](https://circleci.com/gh/coatue-oss/ngcomponent) [![npm]](https://www.npmjs.com/package/ngcomponent) [![mit]](https://opensource.org/licenses/MIT)\n\n[build]: https://img.shields.io/circleci/project/coatue-oss/ngcomponent.svg?branch=master\u0026style=flat-square\n[npm]: https://img.shields.io/npm/v/ngcomponent.svg?style=flat-square\n[mit]: https://img.shields.io/npm/l/ngcomponent.svg?style=flat-square\n\n\u003e A clean React-like abstraction for rendering non-Angular components within an Angular app.\n\n## Installation\n\n```sh\n# Using Yarn:\nyarn add ngcomponent angular angular-resource\n\n# Or, using NPM:\nnpm install ngcomponent angular angular-resource --save\n```\n\n## Usage\n\n*Note: This example is in TypeScript, but it works just as well in vanilla JavaScript*\n\n```ts\nimport NgComponent from 'ngcomponent'\n\ninterface Props {\n  foo: number\n  bar: string[]\n}\n\ninterface State {}\n\nconst myComponent = {\n  bindings: {\n    foo: '\u003c',\n    bar: '\u003c'\n  },\n  template: `\n    \u003cdiv\u003e\u003c/div\u003e\n  `,\n  controller: class extends NgComponent\u003cProps, State\u003e {\n    ...\n  }\n}\n```\n\n## Full Example\n\n```ts\nimport NgComponent from 'ngcomponent'\n\ninterface Props {\n  data: number[]\n  type: \"bar\"|\"line\"\n}\n\ninterface State {\n  chart: Chart\n}\n\nconst chartJSWrapper = {\n  bindings: {\n    data: '\u003c',\n    type: '\u003c'\n  },\n  template: `\u003ccanvas\u003e\u003c/canvas\u003e`,\n  constructor(private $element: JQuery){}\n  controller: class extends NgComponent\u003cProps, State\u003e {\n\n    componentDidMount() {\n      this.state.chart = new Chart($element.find('canvas'), {\n        data: props.data,\n        type: props.type\n      })\n    }\n\n    render() {\n      this.state.chart.data = this.props.data\n      this.state.chart.type = this.props.type\n      this.state.chart.update()\n    }\n\n    componentWillUnmount() {\n      this.state.chart.destroy()\n    }\n  }\n}\n```\n\n## Lifecycle Hooks\n\nNgComponent has a React-like component lifecycle API:\n\n- `render()` (use this to react to changes to `this.props`)\n- `componentWillMount()`\n- `componentDidMount()`\n- `componentWillReceiveProps(props)`\n- `shouldComponentUpdate(props, state)`\n- `componentWillUpdate(props, state)`\n- `componentDidUpdate(props, state)`\n- `componentWillUnmount()`\n\n## Running the Tests\n\n```sh\nnpm test\n```\n\n## Hacking On It\n\n```sh\n# Just watch TypeScript:\nnpm run watch\n\n# Or, watch TypeScript and run tests on change:\nnpm run tdd\n```\n\n## License\n\nApache 2.0\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoatue-oss%2Fngcomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoatue-oss%2Fngcomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoatue-oss%2Fngcomponent/lists"}