{"id":19451384,"url":"https://github.com/yazaabed/at-who-angular","last_synced_at":"2026-04-28T12:35:57.187Z","repository":{"id":117357822,"uuid":"124605450","full_name":"yazaabed/at-who-angular","owner":"yazaabed","description":"wrapper for At.js that add mentions autocomplete to your application with angular component for using it on any AngularJS projects","archived":false,"fork":false,"pushed_at":"2018-03-10T09:05:47.000Z","size":192,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-11-19T12:03:02.495Z","etag":null,"topics":["angular-components","angularjs","autocomplete","components","data","modules","webpack","wrapper"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/yazaabed.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-09T23:51:07.000Z","updated_at":"2023-12-01T07:53:56.000Z","dependencies_parsed_at":"2023-07-08T06:01:01.986Z","dependency_job_id":null,"html_url":"https://github.com/yazaabed/at-who-angular","commit_stats":null,"previous_names":["yazanaabeed/at-who-angular"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yazaabed/at-who-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yazaabed%2Fat-who-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yazaabed%2Fat-who-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yazaabed%2Fat-who-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yazaabed%2Fat-who-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yazaabed","download_url":"https://codeload.github.com/yazaabed/at-who-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yazaabed%2Fat-who-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32381686,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T11:25:28.583Z","status":"ssl_error","status_checked_at":"2026-04-28T11:25:05.435Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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-components","angularjs","autocomplete","components","data","modules","webpack","wrapper"],"created_at":"2024-11-10T16:41:29.716Z","updated_at":"2026-04-28T12:35:57.169Z","avatar_url":"https://github.com/yazaabed.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# At Who Angular\nwrapper for [At.js](http://ichord.github.io/At.js/) that add mentions autocomplete to your application with angular component for using it on any AngularJS projects\n\n## Introduction\nThis project done using AngularJS after need it to wrapp the autocomplete At.js nice library to use it easly on AngularJS projects.\n\n## Getting Started\n### For changes on this repo\n- First you need to clone the project to start working.\n- We need to install Node.js you can install it using [nvm](https://github.com/creationix/nvm).\n- Run `npm install` to install all needed plugins and modules for this project.\n- Run `npm run start` to run the example for this project from `./src/example/app.js`\n- You can find the starting point for the application and the needed things on `app.js`\n- You need to import on your project the `import 'at.js/dist/css/jquery.atwho.min.css';` to make sure the style as expected.\n- You need to import on your project the `import 'jquery.caret';` because its a dependancy for `At.js`.\n\n### For just a normal use on your project\n- Use npm to install it on your project using `@yazanaabed/at-who-angular`.\n- Import it on your project and start using it by pass the `AtWhoModule.name` to your main module or needed module.\n\n### Prerequisites\n- Node.js\n- webpack\n- webpack-cli\n- webpack-dev-server\n- jQuery\n- @yazanaabed/dommutationobserver\n\n### Examples\n* Firstly, we need to include this on our module.\n```javascript\nconst MainModule = angular\n  .module('atWhoAppExample', [\n    AtWhoModule.name\n  ])\n```\n* Secondly, we need to add some data to our component or controller, and make sure to update the model using the `on-model-changed` event send from parent to children. This to prevent the two way data-binding and make sure the changes using events.\n```javascript\nclass AppController {\n  constructor(){\n    this.item = {\n      subject: '',\n      title: ''\n    };\n\n    this.smartFields = [{\n      code: 'TEST_1',\n      name: 'test 1'\n    }, {\n      code: 'TEST_2',\n      name: 'test 2'\n    }, {\n      code: 'TEST_3',\n      name: 'test 3'\n    }, {\n      code: 'TEST_4',\n      name: 'test 4'\n    }];\n  }\n\n  onSubjectChanged(value) {\n    this.item.subject = value;\n  }\n\n  onTitleChanged(value) {\n    this.item.title = value;\n  }\n}\n```\n* Add our component to our html to start working with it. Here is two examples with multiple options send to the compoent.\n```html\n\u003cat-who ng-model=\"AppComponent.item.title\"\n                class=\"input-container\"\n                name=\"subject\"\n                character=\"'@'\"\n                insert-item=\"'${name}'\"\n                search-key=\"'name'\"\n                inserted-key=\"'code'\"\n                pop-up-item-template=\"'\u003cli\u003e${name}\u003c/li\u003e'\"\n                data=\"AppComponent.smartFields\"\n                on-model-changed=\"AppComponent.onTitleChanged(value)\"\n                place-holder=\"'Message Title'\"\n                hide-brackets=\"true\"\u003e\u003c/at-who\u003e\n\n\u003cat-who ng-model=\"AppComponent.item.subject\"\n                class=\"textarea-container\"\n                is-text-area=\"true\"\n                name=\"subject\"\n                character=\"'@'\"\n                insert-item=\"'${name}'\"\n                search-key=\"'name'\"\n                inserted-key=\"'code'\"\n                pop-up-item-template=\"'\u003cli\u003e${name}\u003c/li\u003e'\"\n                data=\"AppComponent.smartFields\"\n                place-holder=\"'Message Body'\"\n                on-model-changed=\"AppComponent.onSubjectChanged(value)\"\n                hide-brackets=\"true\"\u003e\u003c/at-who\u003e\n```\n* You can style your component as you want using the styling.\n```css\n.app-container {\n    max-width: 1200px;\n    margin: 0 auto;\n}\n\n.app-container h1 {\n    text-align: center;\n}\n\n.app-container .textarea-container .textarea,\n.app-container .input-container .input-field {\n    border: 1px solid #ccc;\n    border-radius: 5px;\n    padding: 5px;\n}\n\n```\n* Options passed to this component\n```javascript\n{\n    // Name for the input or field\n    name: '@',\n    // Class used to attach on element\n    class: '\u003c',\n    // Is it an text area or simple input don't pass this if you want input\n    isTextArea: '\u003c',\n    // What is the trigger char on the above example its '@'\n    character: '\u003c',\n    popupHeader: '\u003c',\n    popUpItemTemplate: '\u003c',\n    insertItem: '\u003c',\n    searchKey: '\u003c',\n    maxLen: '\u003c',\n    startWithSpace: '\u003c',\n    itemsLimit: '\u003c',\n    displayTimeout: '\u003c',\n    delay: '\u003c',\n    suffix: '\u003c',\n    highlightFirst: '\u003c',\n    data: '\u003c',\n    hideWithoutSuffix: '\u003c',\n    dataAttributes: '\u003c',\n    callbacks: '\u003c',\n    leftBrackets: '\u003c',\n    rightBrackets: '\u003c',\n    hideBrackets: '\u003c',\n    ngModel: '\u003c',\n    insertedKey: '\u003c',\n    placeHolder: '\u003c',\n    disabledField: '\u003c',\n    onModelChanged: '\u0026'\n  }\n```\n\n## Built With\n\n* [@yazanaabed/dommutationobserver](https://www.npmjs.com/package/@yazanaabed/dommutationobserver) - Component build by me.\n* [At.js](http://ichord.github.io/At.js/) - Main component for this project.\n\n## Contributing\n\nPlease read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.\n\n## Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags). \n\n## Authors\n\n* **Yazan Aabed**\n* See also the list of [contributors](https://github.com/YazanAabeed/at-who-angular/graphs/contributors) who participated in this project.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n\n## Acknowledgments\n\n* This is my first component on this field to help people integrate with autocomplete At.js easily for AngularJS projects.\n* I love to hear any comments to learn from people on this community.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyazaabed%2Fat-who-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyazaabed%2Fat-who-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyazaabed%2Fat-who-angular/lists"}