{"id":15285566,"url":"https://github.com/isaacchacon/ngreactivepeoplepickerangularmaterial","last_synced_at":"2026-02-15T01:06:00.964Z","repository":{"id":57348218,"uuid":"105811792","full_name":"isaacchacon/NgReactivePeoplePickerAngularMaterial","owner":"isaacchacon","description":"A People Picker in Angular 2+, Tries to emulate office 365 / SharePoint online's People picker, implements Reactive Forms and Angular Material, ","archived":false,"fork":false,"pushed_at":"2018-01-24T18:32:59.000Z","size":105,"stargazers_count":1,"open_issues_count":1,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-11T20:44:54.526Z","etag":null,"topics":["angular","angular-cli","angular-components","angular-material","angular2","angular4","sharepoint","sharepoint-2016","sharepoint-lists","sharepoint-online","sharepoint2010","sharepoint2013"],"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/isaacchacon.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}},"created_at":"2017-10-04T19:53:35.000Z","updated_at":"2020-11-21T05:46:42.000Z","dependencies_parsed_at":"2022-08-31T16:44:48.417Z","dependency_job_id":null,"html_url":"https://github.com/isaacchacon/NgReactivePeoplePickerAngularMaterial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/isaacchacon/NgReactivePeoplePickerAngularMaterial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaacchacon%2FNgReactivePeoplePickerAngularMaterial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaacchacon%2FNgReactivePeoplePickerAngularMaterial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaacchacon%2FNgReactivePeoplePickerAngularMaterial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaacchacon%2FNgReactivePeoplePickerAngularMaterial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/isaacchacon","download_url":"https://codeload.github.com/isaacchacon/NgReactivePeoplePickerAngularMaterial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaacchacon%2FNgReactivePeoplePickerAngularMaterial/sbom","scorecard":{"id":494892,"data":{"date":"2025-08-11","repo":{"name":"github.com/isaacchacon/NgReactivePeoplePickerAngularMaterial","commit":"a35fc9a147e6b3ff4045917f4dd46cb60546127b"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-19T20:13:52.031Z","repository_id":57348218,"created_at":"2025-08-19T20:13:52.031Z","updated_at":"2025-08-19T20:13:52.031Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274602983,"owners_count":25315240,"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","status":"online","status_checked_at":"2025-09-11T02:00:13.660Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","angular-cli","angular-components","angular-material","angular2","angular4","sharepoint","sharepoint-2016","sharepoint-lists","sharepoint-online","sharepoint2010","sharepoint2013"],"created_at":"2024-09-30T15:06:13.770Z","updated_at":"2026-02-15T01:06:00.957Z","avatar_url":"https://github.com/isaacchacon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ReactivePeoplePickerAngularMaterial\n\nA People Picker in Angular 2+, Tries to emulate office 365 / SharePoint online's People picker, implements Angular's Reactive Forms and Angular Material, \n\n[NPM repository](https://www.npmjs.com/package/reactive-people-picker-angular-material)\n\nThis people picker is in abstracted layers, so that you could connect any backend with few code changes to he business class, and in theory this people picker should work with any back end. Current back end is a SharePoint 2010 web service (located in [NgSharePointWebServices](https://github.com/isaacchacon/NgSharePointWebServices). I think this should work right away with 2013 and, i believe 2016 as well but not 100% sure.  It works on SharePoint Online, i already tested it. \n\nThis people picker tries to mimick the way Office 365 / SharePoint online people picker works, to some extent.\n\nPlease see the app if you want to completely examine / learn how to consume this people picker.\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.4.2)\n\n### Features: \n\n- No postback / flickering.\n- It is made utilizing the reactive forms from angular.\n- It will work with mouse and / or keyboard arrows to select the people from the drop down list, and hit enter (or click) to make a selection .\n- Resolves the entity at page load to see if the entity is still valid or not \n- Currently the back end searches by email, login account, or display name, so it is a very powerful search.\n- It implements angular material (2+ ) components.\n- Implements the progress bar from material design , so that it let's people know when the picker is busy making a service call.\n- Implements the autocomplete from material, very nice control!\n- Implements tooltips with the mdtooltip from material design.\n- It will try to resolve the person on the blur event.\n- Implements an output event \"onPeoplePicked\"\n- current backend retrieves entries from user information list (/_catalogs/userinfo) ( this is the backend project, located in [NgSharePointWebServices](https://github.com/isaacchacon/NgSharePointWebServices). ) \n\n\n### Screenshots:\n\nNew People picker:\n\n![New People Picker](https://github.com/isaacchacon/NgReactivePeoplePickerAngularMaterial/raw/master/doc/1.png)\n\n\nSearch Results:\n\n![Search Results](https://github.com/isaacchacon/NgReactivePeoplePickerAngularMaterial/raw/master/doc/SearchResults.png)\n\n\nHovering with tooltip detail:\n\n![Hovering](https://github.com/isaacchacon/NgReactivePeoplePickerAngularMaterial/raw/master/doc/Hovering.png)\n\nResolved picker:\n\n![Resolved Picker](https://github.com/isaacchacon/NgReactivePeoplePickerAngularMaterial/raw/master/doc/ResolvedPicker.png)\n\nNo results found:\n\n![NoResultsFound](https://github.com/isaacchacon/NgReactivePeoplePickerAngularMaterial/raw/master/doc/NoResultsFound.png)\n\n\n### TODO's / current drawbacks:.\n\n\n- It does not support multiple people selection. - I have been tested angular material's chips, but they are not fully developed yet. As soon as they finish it, i may look into adding support for multiple people.\n- exception / error handling could be enhanced.\n- Testing specs are not there yet.\n\n### Dependencies : \n\nif you run the demo from index.html, (I used angular-cli), you should be able to see at least the initial picker.\nIt won't show any results , you have to connect it to your back end\n\nTrying to make memory, these are the steps that i followed to make this demo run:\n\n1. Npm install reactive-people-picker-angular-material\n2. Added indigo-pink.css from the animations:\n  (the indigo pink can be grabbed from \\node_modules\\@angular\\material\\prebuilt-themes), i guess you could grab the other css and it should work. Or you should be able to customize your css. I am a material newbie, please excuse.\n  `\u003clink rel=\"stylesheet\" href=\"/siteassets/bootstrap3.3.7.min.css\"\u003e`\n  `\u003clink href=\"/siteassets/indigo-pink.css\" rel=\"stylesheet\"\u003e`\n3. If you will utilize the back end of SharePoint web services, get them from the other [git hub](https://github.com/isaacchacon/NgSharePointWebServices) or [npm](https://www.npmjs.com/package/ng-tax-share-point-web-services-module) project\n    if that is the case, i am utilizing JQuery ONLY to treat the xml from the web services results. \n    I am sure that you can do better than me, but i had to quickly treat xml, so go ahead and add this to your index.html or to your webpart code: `\u003cscript src=\"/siteassets/jquery-3.1.1.min.js\"\u003e\u003c/script\u003e`\n3.5 - Make sure that you have angular material and angular/cdk.\n4. then i did an ng serve.\n\n### Dissecting the Demo:\n\nThe app.module has this relevant code:\nNgTaxServices is added because my backend is SharePoint web services (asmx), but you may recode the tax-people-picker-business.ts in order to connect your own service / backend.\n```\n/*import the new HTTP Client!!!!!*/\nimport {HttpClientModule} from '@angular/common/http';\nimport {NgTaxServices} from 'ng-tax-share-point-web-services-module';\nimport {ReactivePeoplePickerModule} from 'reactive-people-picker-angular-material';\n/*the below is necessary because it's the backend library. You can easily fork the picker and change the backend*/\nimport {TaxReusableComponentsModule} from 'ng-tax-reusable-components';\n```\nthen , in the  imports we do an NgTaxServices.forRoot():\nNgTaxServices is added because my backend is SharePoint web services (asmx), but you may recode the tax-people-picker-business.ts in order to connect your own service / backend.\n```\nimports: [\n    BrowserModule,ReactiveFormsModule,HttpClientModule, NgTaxServices.forRoot(), ReactivePeoplePickerModule\n  ],\n```\nNow onto the people picker code itself:\n\non app.component.html:\n\n```\n\u003cpeople-picker \n(onPeoplePicked)=\"peoplePickedEventHandler($event);\" \ncontrolId=\"samplePickerId\" \n[group]=\"sampleFormGroup.get('ParentPickerGroup')\"\u003e\n\u003c/people-picker\u003e\n```\nwe are consuming the output event 'onPeoplePicked', which is an output event . this is optional.\nthe controlId can really be anything i believe.\nrequiredMessage is an optional input parameter that if you don't specified, it should make the picker think that it's not required.\nthe important property to note is the group, which is initialized in the app.component.ts:\n\n```\ncreateForm() {\n\t\tthis.sampleFormGroup = this.fb.group({\n\t\t\tParentPickerGroup:TaxPeoplePickerComponent.buildItem(true)\n\t\t\t});\n\t}\n```\n\nThe FormGroup is created through the static method 'buildItem' from TaxPeoplePickerComponent.\nYou need to specify true if you want to make it required, or false if a people selection is NOT required.\n\nObject UserInfoListEntry: this is the object that is bound and represents a person either in the picker and in the autocomplete (drop down).\n\nit has the following properties: title, jobtitle, name and email and i believe they match to the column names in SharePoint's user information list. It also has an id porperty, which is the id column in Sharepoint.\n\nExample of an object instance that would come from a SharePoint 2010 backend:\n\nid:1212\ntitle:Adams, John\njobTitle: Manager3\nname: Contoso\\JAdams\nemail:John.Adams@contoso.com\n\n```\n\tgetItemProperties():string[]{\t\n\t\treturn [\"title\", \"jobTitle\",  \"name\", \"email\" ]\n}\n```\n\n ## Disclaimer:\n \n Use under your own risk, it has not been tested thoroughly.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).\nBefore running the tests make sure you are serving the app via `ng serve`.\n\n## Further help\n\nUse this under your own risk no warranties\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisaacchacon%2Fngreactivepeoplepickerangularmaterial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fisaacchacon%2Fngreactivepeoplepickerangularmaterial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisaacchacon%2Fngreactivepeoplepickerangularmaterial/lists"}