{"id":18806001,"url":"https://github.com/m-thompson-code/dynamic-component-loader","last_synced_at":"2026-01-08T02:30:15.955Z","repository":{"id":102503905,"uuid":"333588608","full_name":"m-thompson-code/dynamic-component-loader","owner":"m-thompson-code","description":null,"archived":false,"fork":false,"pushed_at":"2021-11-12T17:38:13.000Z","size":1134,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-14T18:41:23.062Z","etag":null,"topics":[],"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/m-thompson-code.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":"2021-01-27T23:29:05.000Z","updated_at":"2021-11-09T06:43:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"510bc2aa-4cf7-498e-8951-bfb00710c138","html_url":"https://github.com/m-thompson-code/dynamic-component-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fdynamic-component-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fdynamic-component-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fdynamic-component-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fdynamic-component-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/m-thompson-code","download_url":"https://codeload.github.com/m-thompson-code/dynamic-component-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239742363,"owners_count":19689308,"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":[],"created_at":"2024-11-07T22:45:53.967Z","updated_at":"2026-01-08T02:30:15.888Z","avatar_url":"https://github.com/m-thompson-code.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dynamic-component-loader\n\nShowcases how to dynamicly generate components using a custom directive [demo](https://m-thompson-code.github.io/dynamic-component-loader/)\n\n[Angular walkthrough on dyamic components](https://angular.io/guide/dynamic-component-loader)\n\n[download to their walkthrough source code](https://angular.io/generated/zips/dynamic-component-loader/dynamic-component-loader.zip)\n\n### Showcase\n\nThis simple applicaton showcases dynamically adding / removing custom cells on the fly. You can also update the data for each cell or change the cell to a different component on the fly. There are 3 custom cell components.\n\n1. PercentCellComponent\n2. CurrencyCellComponent\n3. InputCellComponent\n\n### General\n\n#### Base Cell Component\n\nThere are 3 custom cell components. Each implement the base class `BaseCellComponent`\n\n#### Input binding\n\nAll 3 custom cell components showcase input binding.\n\nThe custom cells allow for one input binding `@Input() data?: unknown`.\n\nThe directive will assume type `unknown`, but you can type the custom cell components' data property.\n\n#### Change Detection OnPush\n\nEach of the custom cell components in this showcase use OnPush. The cell directive manages change detection and marks components for change as needed, but you don't need to use OnPush if you don't want to.\n\n#### Output binding\n\nThe InputCellComponent showcases binding output events. The directive subscribes to the custom cell component and emits the same value `@Output() dataEmitted: EventEmitter\u003cCellEvent\u003e`.\n\n### scripts\n\n`npm install` - install\n\n`npm start` - local development server\n\n`npm run build` - aot/prod build\n\n`npm run serve` - local prod server (you need to build first)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm-thompson-code%2Fdynamic-component-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fm-thompson-code%2Fdynamic-component-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm-thompson-code%2Fdynamic-component-loader/lists"}