{"id":23061041,"url":"https://github.com/syncfusionexamples/ej2-ng-dropdownlist-dynamic-itemtemplate","last_synced_at":"2025-08-22T17:15:45.228Z","repository":{"id":98095092,"uuid":"116808248","full_name":"SyncfusionExamples/ej2-ng-dropdownlist-dynamic-itemTemplate","owner":"SyncfusionExamples","description":"DropDownList with dynamic itemTemplate for Angular","archived":false,"fork":false,"pushed_at":"2024-10-21T04:55:04.000Z","size":24,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-08T20:47:54.085Z","etag":null,"topics":["dropdownlist","ej2","ej2-dropdown","itemtemplate","programmatically","template"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SyncfusionExamples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2018-01-09T11:36:28.000Z","updated_at":"2024-10-21T04:55:09.000Z","dependencies_parsed_at":"2025-02-08T20:44:22.518Z","dependency_job_id":"9590bc0a-acba-45d6-8df1-2ce426052632","html_url":"https://github.com/SyncfusionExamples/ej2-ng-dropdownlist-dynamic-itemTemplate","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/SyncfusionExamples%2Fej2-ng-dropdownlist-dynamic-itemTemplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fej2-ng-dropdownlist-dynamic-itemTemplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fej2-ng-dropdownlist-dynamic-itemTemplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fej2-ng-dropdownlist-dynamic-itemTemplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SyncfusionExamples","download_url":"https://codeload.github.com/SyncfusionExamples/ej2-ng-dropdownlist-dynamic-itemTemplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246952274,"owners_count":20859813,"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":["dropdownlist","ej2","ej2-dropdown","itemtemplate","programmatically","template"],"created_at":"2024-12-16T03:16:01.296Z","updated_at":"2025-04-03T07:17:34.462Z","avatar_url":"https://github.com/SyncfusionExamples.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DropDownList with dynamic itemTemplate for Angular\r\n\r\n## To set the itemTemplate programmatically for dropdownlist component \r\n\r\nTo load an itemTemplate in the dropdownlist component dynamically, we need to use createComponent to load the template as new component and assign its itemTemplate instance to dropdownlist's itemTemplate property. Please refer the below code snippet,\r\n\r\n```\r\n    ngAfterViewInit() {        \r\n        let componentFactory = this.componentResolver.resolveComponentFactory(Newcomponent);\r\n        const ref = this.viewContainerRef.createComponent(componentFactory);\r\n        this.ddl.itemTemplate = ref.instance.itemTemplate;\r\n    }\r\n```\r\n\r\n## Installing and Running Application\r\n\r\n### Installing\r\n\r\nTo install all dependent packages, use the below command\r\n\r\n```\r\nnpm install\r\n```\r\n\r\n### Run the application\r\n\r\nTo compile and run the source files, use the below command\r\n\r\n```\r\nnpm start\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fej2-ng-dropdownlist-dynamic-itemtemplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyncfusionexamples%2Fej2-ng-dropdownlist-dynamic-itemtemplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fej2-ng-dropdownlist-dynamic-itemtemplate/lists"}