{"id":13535525,"url":"https://github.com/pleerock/ngx-select-controls","last_synced_at":"2025-04-02T01:31:02.659Z","repository":{"id":143321608,"uuid":"53393859","full_name":"pleerock/ngx-select-controls","owner":"pleerock","description":"Checkbox group and radio group control for your angular2 applications using bootstrap3.","archived":true,"fork":false,"pushed_at":"2017-05-19T13:12:15.000Z","size":211,"stargazers_count":46,"open_issues_count":6,"forks_count":17,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T13:03:55.429Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":false,"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/pleerock.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}},"created_at":"2016-03-08T08:01:56.000Z","updated_at":"2025-01-31T21:02:29.000Z","dependencies_parsed_at":"2024-01-16T15:49:46.987Z","dependency_job_id":null,"html_url":"https://github.com/pleerock/ngx-select-controls","commit_stats":null,"previous_names":["pleerock/ng2-radio-group","pleerock/ng2-select-controls"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pleerock%2Fngx-select-controls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pleerock%2Fngx-select-controls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pleerock%2Fngx-select-controls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pleerock%2Fngx-select-controls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pleerock","download_url":"https://codeload.github.com/pleerock/ngx-select-controls/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246738513,"owners_count":20825791,"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-08-01T08:00:57.774Z","updated_at":"2025-04-02T01:31:02.366Z","avatar_url":"https://github.com/pleerock.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"\u003e This repository is for demonstration purposes of how it can be implemented in Angular and is not maintaned. Please fork and maintain your own version of this repository.\r\n\r\n# ng2-radio-group\r\n\r\nUltimate set of select components that you ever need. All with angular2, no jquery.\r\nCheckbox group and radio group control for your angular2 applications. Does not depend of jquery.\r\nPlease star a project if you liked it, or create an issue if you have problems with it.\r\n\r\n![angular 2 radio groups and checkbox groups](https://raw.githubusercontent.com/pleerock/ng2-radio-group/master/resources/radio-group-example.png)\r\n\r\n## Installation\r\n\r\n1. Install npm module:\r\n\r\n    `npm install ng2-radio-group --save`\r\n\r\n2. If you are using system.js you may want to add this into `map` and `package` config:\r\n\r\n    ```json\r\n    {\r\n        \"map\": {\r\n            \"ng2-radio-group\": \"node_modules/ng2-radio-group\"\r\n        },\r\n        \"packages\": {\r\n            \"ng2-radio-group\": { \"main\": \"index.js\", \"defaultExtension\": \"js\" }\r\n        }\r\n    }\r\n    ```\r\n\r\n## Simple checkboxes and radio boxes\r\n\r\nIf you need a simple checkbox for your variable:\r\n\r\n```html\r\n\u003cinput type=\"checkbox\" [(ngModel)]=\"rememberMe\" [value]=\"true\" [uncheckedValue]=\"false\"\u003e remember me?\u003cbr/\u003e\r\n```\r\n\r\n* `ngModel` is a model you are trying to change (rememberMe is a boolean variable in your component)\r\n* `value` is a value that should be written to the model when checkbox is checked. Default is **true**.\r\n* `uncheckedValue` is a value that should be written to the model when checkbox is unchecked. Default is **false**.\r\n* `required` you can set it to required, and you can use it with forms\r\n\r\nIf your model is an array and you want to push multiple items into it, you can use it with this component:\r\n\r\n```html\r\n\u003cinput type=\"checkbox\" [(ngModel)]=\"orderBy\" value=\"rating\"\u003e Rating\u003cbr/\u003e\r\n\u003cinput type=\"checkbox\" [(ngModel)]=\"orderBy\" value=\"date\"\u003e Date\u003cbr/\u003e\r\n\u003cinput type=\"checkbox\" [(ngModel)]=\"orderBy\" value=\"watches\"\u003e Watch count\u003cbr/\u003e\r\n\u003cinput type=\"checkbox\" [(ngModel)]=\"orderBy\" value=\"comments\"\u003e Comment count\u003cbr/\u003e\r\n```\r\n\r\nDon't forget to initialize your `orderBy` array.\r\n\r\n\r\nIf you need to select only one item from the multiple options, you need a radio boxes:\r\n\r\n```html\r\n\u003cinput type=\"radio\" [(ngModel)]=\"sortBy\" value=\"rating\"\u003e Rating\u003cbr/\u003e\r\n\u003cinput type=\"radio\" [(ngModel)]=\"sortBy\" value=\"date\"\u003e Date\u003cbr/\u003e\r\n\u003cinput type=\"radio\" [(ngModel)]=\"sortBy\" value=\"watches\"\u003e Watch count\u003cbr/\u003e\r\n\u003cinput type=\"radio\" [(ngModel)]=\"sortBy\" value=\"comments\"\u003e Comment count\u003cbr/\u003e\r\n```\r\n\r\n## Checkbox and Radio groups\r\n\r\nTo simplify this selection you can use checkbox and radio groups:\r\n\r\n```html\r\n\u003cradio-group [(ngModel)]=\"sortBy\" [required]=\"true\"\u003e\r\n    \u003cinput type=\"radio\" value=\"rating\"\u003e Rating\u003cbr/\u003e\r\n    \u003cinput type=\"radio\" value=\"date\"\u003e Date\u003cbr/\u003e\r\n    \u003cinput type=\"radio\" value=\"watches\"\u003e Watch count\u003cbr/\u003e\r\n    \u003cinput type=\"radio\" value=\"comments\"\u003e Comment count\u003cbr/\u003e\r\n\u003c/radio-group\u003e\r\n\r\n\u003ccheckbox-group [(ngModel)]=\"orderBy\"\u003e\r\n    \u003cinput type=\"checkbox\" value=\"rating\"\u003e Rating\u003cbr/\u003e\r\n    \u003cinput type=\"checkbox\" value=\"date\"\u003e Date\u003cbr/\u003e\r\n    \u003cinput type=\"checkbox\" value=\"watches\"\u003e Watch count\u003cbr/\u003e\r\n    \u003cinput type=\"checkbox\" value=\"comments\"\u003e Comment count\u003cbr/\u003e\r\n\u003c/checkbox-group\u003e\r\n```\r\n\r\nIf you want to go deeper and make better (but less customizable) radio groups, then use radio-groups in composition\r\nwith radio-items:\r\n\r\n```html\r\n\u003cradio-group [(ngModel)]=\"sortBy\" [disabled]=\"false\"\u003e\r\n    \u003cradio-item value=\"rating\"\u003eRating\u003c/radio-item\u003e\r\n    \u003cradio-item value=\"date\"\u003eDate\u003c/radio-item\u003e\r\n    \u003cradio-item value=\"watches\"\u003eWatch count\u003c/radio-item\u003e\r\n    \u003cradio-item value=\"comments\"\u003eComment count\u003c/radio-item\u003e\r\n\u003c/radio-group\u003e\r\n\r\n\u003ccheckbox-group [(ngModel)]=\"orderBy\" [required]=\"true\"\u003e\r\n    \u003ccheckbox-item value=\"rating\"\u003eRating\u003c/checkbox-item\u003e\r\n    \u003ccheckbox-item value=\"date\"\u003eDate\u003c/checkbox-item\u003e\r\n    \u003ccheckbox-item value=\"watches\"\u003eWatch count\u003c/checkbox-item\u003e\r\n    \u003ccheckbox-item value=\"comments\"\u003eComment count\u003c/checkbox-item\u003e\r\n\u003c/checkbox-group\u003e\r\n```\r\n\r\nLast method allows you to click on labels and you click will treat like you clicked on a checkbox itself.\r\n\r\n## Select items component\r\n\r\ntbd\r\n\r\n## Select dropdown component\r\n\r\ntbd\r\n\r\n## Autocomplete component\r\n\r\ntbd\r\n\r\n## Select tags component\r\n\r\ntbd\r\n\r\n## Sample\r\n\r\nComplete example of usage:\r\n\r\n```typescript\r\nimport {Component} from \"@angular/core\";\r\nimport {RADIO_GROUP_DIRECTIVES} from \"ng2-radio-group\";\r\n\r\n@Component({\r\n    selector: \"app\",\r\n    template: `\r\n\r\n    \u003ch4\u003eIs something enabled: (non-multiple checkbox)\u003c/h4\u003e\r\n    \u003cinput type=\"checkbox\" [(ngModel)]=\"isSomethingEnabled\"/\u003e\r\n    \u003ci (click)=\"click()\"\u003eisSomethingEnabled value:\u003c/i\u003e \u003cb\u003e{{ isSomethingEnabled }}\u003c/b\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\r\n    \u003ch4\u003eOrder by: (multiple check boxes)\u003c/h4\u003e\r\n    \u003cinput type=\"checkbox\" [(ngModel)]=\"orderBy\" value=\"rating\"\u003e Rating\u003cbr/\u003e\r\n    \u003cinput type=\"checkbox\" [(ngModel)]=\"orderBy\" value=\"date\"\u003e Date\u003cbr/\u003e\r\n    \u003cinput type=\"checkbox\" [(ngModel)]=\"orderBy\" value=\"watches\"\u003e Watch count\u003cbr/\u003e\r\n    \u003cinput type=\"checkbox\" [(ngModel)]=\"orderBy\" value=\"comments\"\u003e Comment count\u003cbr/\u003e\r\n\r\n    \u003ci\u003eselected items:\u003c/i\u003e \u003cb\u003e\u003cspan *ngFor=\"let order of orderBy\"\u003e{{ order }} \u003c/span\u003e\u003c/b\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\r\n\r\n    \u003ch4\u003eSort by: (simple radio boxes)\u003c/h4\u003e\r\n    \u003cinput type=\"radio\" [(ngModel)]=\"sortWithoutGroup\" value=\"rating\"\u003e Rating\u003cbr/\u003e\r\n    \u003cinput type=\"radio\" [(ngModel)]=\"sortWithoutGroup\" value=\"date\"\u003e Date\u003cbr/\u003e\r\n    \u003cinput type=\"radio\" [(ngModel)]=\"sortWithoutGroup\" value=\"watches\"\u003e Watch count\u003cbr/\u003e\r\n    \u003cinput type=\"radio\" [(ngModel)]=\"sortWithoutGroup\" value=\"comments\"\u003e Comment count\u003cbr/\u003e\r\n\r\n    \u003ci\u003eselected item:\u003c/i\u003e \u003cb\u003e{{ sortWithoutGroup }}\u003c/b\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\r\n\r\n    \u003ch4\u003eSort by: (radio boxes wrapped in the group)\u003c/h4\u003e\r\n    \u003cradio-group [(ngModel)]=\"sortBy\"\u003e\r\n        \u003cinput type=\"radio\" value=\"rating\"\u003e Rating\u003cbr/\u003e\r\n        \u003cinput type=\"radio\" value=\"date\"\u003e Date\u003cbr/\u003e\r\n        \u003cinput type=\"radio\" value=\"watches\"\u003e Watch count\u003cbr/\u003e\r\n        \u003cinput type=\"radio\" value=\"comments\"\u003e Comment count\u003cbr/\u003e\r\n    \u003c/radio-group\u003e\r\n\r\n    \u003ci\u003eselected item:\u003c/i\u003e \u003cb\u003e{{ sortBy }}\u003c/b\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\r\n\r\n    \u003ch4\u003eOrder by: (check boxes wrapped in the group)\u003c/h4\u003e\r\n    \u003ccheckbox-group [(ngModel)]=\"orderBy\"\u003e\r\n        \u003cinput type=\"checkbox\" value=\"rating\"\u003e Rating\u003cbr/\u003e\r\n        \u003cinput type=\"checkbox\" value=\"date\"\u003e Date\u003cbr/\u003e\r\n        \u003cinput type=\"checkbox\" value=\"watches\"\u003e Watch count\u003cbr/\u003e\r\n        \u003cinput type=\"checkbox\" value=\"comments\"\u003e Comment count\u003cbr/\u003e\r\n    \u003c/checkbox-group\u003e\r\n\r\n    \u003ci\u003eselected items:\u003c/i\u003e \u003cb\u003e\u003cspan *ngFor=\"let order of orderBy\"\u003e{{ order }} \u003c/span\u003e\u003c/b\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\r\n\r\n    \u003ch4\u003eSort by: (check boxes in group, less flexible, but simpler and the whole component is clickable)\u003c/h4\u003e\r\n    \u003cradio-group [(ngModel)]=\"sortBy\"\u003e\r\n        \u003cradio-item value=\"rating\"\u003eRating\u003c/radio-item\u003e\r\n        \u003cradio-item value=\"date\"\u003eDate\u003c/radio-item\u003e\r\n        \u003cradio-item value=\"watches\"\u003eWatch count\u003c/radio-item\u003e\r\n        \u003cradio-item value=\"comments\"\u003eComment count\u003c/radio-item\u003e\r\n    \u003c/radio-group\u003e\r\n\r\n    \u003ci\u003eselected item:\u003c/i\u003e \u003cb\u003e{{ sortBy }}\u003c/b\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\r\n\r\n    \u003ch4\u003eOrder by: (radio boxes in group, less flexible, but simpler and the whole component is clickable)\u003c/h4\u003e\r\n    \u003ccheckbox-group [(ngModel)]=\"orderBy\"\u003e\r\n        \u003ccheckbox-item value=\"rating\"\u003eRating\u003c/checkbox-item\u003e\r\n        \u003ccheckbox-item value=\"date\"\u003eDate\u003c/checkbox-item\u003e\r\n        \u003ccheckbox-item value=\"watches\"\u003eWatch count\u003c/checkbox-item\u003e\r\n        \u003ccheckbox-item value=\"comments\"\u003eComment count\u003c/checkbox-item\u003e\r\n    \u003c/checkbox-group\u003e\r\n\r\n    \u003ci\u003eselected items:\u003c/i\u003e \u003cb\u003e\u003cspan *ngFor=\"let order of orderBy\"\u003e{{ order }} \u003c/span\u003e\u003c/b\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n\r\n\r\n    \u003ch4\u003eExample with form:\u003c/h4\u003e\r\n\r\n    \u003cform\u003e\r\n        \u003cradio-group ngControl=\"sortByControl\" #sortByRadioGroup=\"ngForm\" [(ngModel)]=\"sortBy\" [required]=\"true\"\u003e\r\n            \u003cinput type=\"radio\" value=\"\"\u003e Not selected\u003cbr/\u003e\r\n            \u003cinput type=\"radio\" value=\"rating\"\u003e Rating\u003cbr/\u003e\r\n            \u003cinput type=\"radio\" value=\"date\"\u003e Date\u003cbr/\u003e\r\n            \u003cinput type=\"radio\" value=\"watches\"\u003e Watch count\u003cbr/\u003e\r\n            \u003cinput type=\"radio\" value=\"comments\"\u003e Comment count\u003cbr/\u003e\r\n        \u003c/radio-group\u003e\r\n        \u003cdiv [hidden]=\"sortByRadioGroup.valid || sortByRadioGroup.pristine\" class=\"alert alert-danger\"\u003e\r\n            Sort by is required\r\n        \u003c/div\u003e\r\n        \u003cbr/\u003e\r\n        \u003ccheckbox-group ngControl=\"orderByControl\" #orderByCheckboxGroup=\"ngForm\" [(ngModel)]=\"orderBy\" [required]=\"true\"\u003e\r\n            \u003ccheckbox-item value=\"rating\"\u003eRating\u003c/checkbox-item\u003e\r\n            \u003ccheckbox-item value=\"date\"\u003eDate\u003c/checkbox-item\u003e\r\n            \u003ccheckbox-item value=\"watches\"\u003eWatch count\u003c/checkbox-item\u003e\r\n            \u003ccheckbox-item value=\"comments\"\u003eComment count\u003c/checkbox-item\u003e\r\n        \u003c/checkbox-group\u003e\r\n        \u003cdiv [hidden]=\"orderByCheckboxGroup.valid || orderByCheckboxGroup.pristine\" class=\"alert alert-danger\"\u003e\r\n            Order by is required\r\n        \u003c/div\u003e\r\n    \u003c/form\u003e\r\n\r\n    `,\r\n    directives: [RADIO_GROUP_DIRECTIVES]\r\n})\r\nexport class App {\r\n\r\n    rememberMe: boolean = false;\r\n    sortBy: string = \"date\";\r\n    orderBy: string[] = [\"rating\", \"comments\"];\r\n\r\n}\r\n```\r\n\r\nTake a look on samples in [./sample](https://github.com/pleerock/ng2-radio-group/tree/master/sample) for more examples of\r\nusages.\r\n\r\n## Release notes\r\n\r\n**0.0.5**\r\n\r\n* `[(model)]` now should be `[(ngModel)]`\r\n* component now can be used with forms and validation can be applied (like `required`)\r\n* `check-box` and `radio-box` has been removed, now you simply need to make your input as checkbox or radio:\r\n`\u003cinput type=\"checkbox\"\u003e` or `\u003cinput type=\"radio\"\u003e`\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpleerock%2Fngx-select-controls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpleerock%2Fngx-select-controls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpleerock%2Fngx-select-controls/lists"}