{"id":21307319,"url":"https://github.com/jdegand/angular-dictionary-app","last_synced_at":"2026-05-18T09:05:28.788Z","repository":{"id":169887320,"uuid":"645972545","full_name":"jdegand/angular-dictionary-app","owner":"jdegand","description":"Angular conversion of my React Dictionary App","archived":false,"fork":false,"pushed_at":"2025-09-21T17:38:42.000Z","size":461,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-07T05:44:44.090Z","etag":null,"topics":["angular","angular16","cypress","standalone-components"],"latest_commit_sha":null,"homepage":"https://jdegand.github.io/angular-dictionary-app/","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/jdegand.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-05-26T22:33:52.000Z","updated_at":"2025-09-21T17:38:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"24256dd2-abcc-4153-b0ad-d5ae53960133","html_url":"https://github.com/jdegand/angular-dictionary-app","commit_stats":null,"previous_names":["jdegand/angular-dictionary-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jdegand/angular-dictionary-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-dictionary-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-dictionary-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-dictionary-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-dictionary-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdegand","download_url":"https://codeload.github.com/jdegand/angular-dictionary-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-dictionary-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33172173,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T05:43:36.989Z","status":"ssl_error","status_checked_at":"2026-05-18T05:43:19.133Z","response_time":71,"last_error":"SSL_read: 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","angular16","cypress","standalone-components"],"created_at":"2024-11-21T16:31:15.914Z","updated_at":"2026-05-18T09:05:28.766Z","avatar_url":"https://github.com/jdegand.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Dictionary App\n\nAngular conversion of my [React Dictionary App](https://github.com/jdegand/dictionary-app).\n\n## Table of contents\n\n- [Overview](#overview)\n  - [Screenshots](#screenshots)\n  - [Link](#link)\n  - [How to Use](#how-to-use)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [Thoughts](#thoughts)\n  - [API Bug](#api-bug)\n  - [Useful Resources](#useful-resources)\n\n## Overview\n\n### Screenshots\n\n![](screenshots/angular-dictionary-app-1.png)\n\n***\n\n![](screenshots/angular-dictionary-app-2.png)\n\n***\n\n![](screenshots/angular-dictionary-app-3.png)\n\n***\n\n![](screenshots/angular-dictionary-app-4.png)\n\n***\n\n![](screenshots/angular-dictionary-app-5.png)\n\n![](screenshots/angular-dictionary-app-6.png)\n\n***\n\n![](screenshots/angular-dictionary-app-7.png)\n\n***\n\n![](screenshots/angular-dictionary-app-8.png)\n\n***\n\n### Link\n\n[Live Link](https://jdegand.github.io/angular-dictionary-app/)\n\n### How to Use \n\n```bash\n\ngit clone https://github.com/jdegand/angular-dictionary-app.git\n\n# cd into the directory\nnpm install \n\nnpm start\n\n# open another terminal for tests \n\nnpx cypress open \n\n```\n\n## My process\n\n### Built with\n\n- [Angular](https://angular.io)\n- [Angular CLI](https://github.com/angular/angular-cli) version 16.0.1.\n- [Dictionary Api](https://dictionaryapi.dev/)\n- [Cypress](https://docs.cypress.io)\n\n## Thoughts\n\n- Used this project as a basis to test new Angular 16 features.\n- Used standalone components for everything. Removed app.module and changed main.ts to bootstrap the application.\n- No errors are shown on the searchForm - submission is prevented if the input is empty.\n- You can type the word in the input or just change the query parameter value.\n- pneumonoultramicroscopicsilicovolcanoconiosis - maxLength for search input \n- Many different ways to get make api request - thought about using state and passing the result of the query to word-details component, I could not have excluded router like I did in my React implementation,  different implementation of router, etc.\n- Added a router link on the book icon to go back to the home page. This was missing from my react implementation.\n- Used long words to test the play and pause functionality.\n- Showing an error when the observable failed was difficult to figure out and required some trial and error.\n- Using an async pipe with first and last - made it difficult to know if I could use an else statement as well.\n- Important to remember, not to use # on ng-template when passing an else reference.\n- Navigating back to the homepage does not clear the input value of the search form - possible to use ngOnInit in app component to reset it ? \n- Had issue with select option font color matching the option's background (could only see option text when cycling thru them) with dark mode.\n- Had trouble with angular-cli-ghpages because of angular 16 upgrade - added angular-cli-ghpages after creating the project and didn't realize it installed incorrectly - the package has since been updated and works fine with angular 16 - so I removed the package and re-installed it again.\n- To run cypress e2e test, need use to use `npx cypress open` and have the application running in another terminal\n- Made slight changes to word-details html to allow cypress to grab certain elements.\n\n## Api Bug \n\nThe word 'greet' has incorrectly formatted json.  This changed my [word-details](src/app/word-details/word-details.component.html) implementation.\n\n```json\n[\n  {\n    \"word\": \"greet\",\n    \"phonetic\": \"/ɡɹiːt/\",\n    \"phonetics\": [\n      {\n        \"text\": \"/ɡɹiːt/\",\n        \"audio\": \"https://api.dictionaryapi.dev/media/pronunciations/en/greet-us.mp3\",\n        \"sourceUrl\": \"https://commons.wikimedia.org/w/index.php?curid=2650995\",\n        \"license\": {\n          \"name\": \"BY-SA 3.0\",\n          \"url\": \"https://creativecommons.org/licenses/by-sa/3.0\"\n        }\n      }\n    ],\n    \"meanings\": [\n      {\n        \"partOfSpeech\": \"verb\",\n        \"definitions\": [\n          {\n            \"definition\": \"To welcome in a friendly manner, either in person or through another means e.g. writing or over the phone/internet\",\n            \"synonyms\": [\n              \n            ],\n            \"antonyms\": [\n              \n            ]\n          },\n          {\n            \"definition\": \"To arrive at or reach, or meet (talking of something which brings joy)\",\n            \"synonyms\": [\n              \n            ],\n            \"antonyms\": [\n              \n            ]\n          },\n          {\n            \"definition\": \"To accost; to address.\",\n            \"synonyms\": [\n              \n            ],\n            \"antonyms\": [\n              \n            ]\n          },\n          {\n            \"definition\": \"To meet and give salutations.\",\n            \"synonyms\": [\n              \n            ],\n            \"antonyms\": [\n              \n            ]\n          },\n          {\n            \"definition\": \"To be perceived by (somebody).\",\n            \"synonyms\": [\n              \n            ],\n            \"antonyms\": [\n              \n            ],\n            \"example\": \"A brilliant dawn greeted her eyes as she looked out of the window.\"\n          }\n        ],\n        \"synonyms\": [\n          \n        ],\n        \"antonyms\": [\n          \n        ]\n      }\n    ],\n    \"license\": {\n      \"name\": \"CC BY-SA 3.0\",\n      \"url\": \"https://creativecommons.org/licenses/by-sa/3.0\"\n    },\n    \"sourceUrls\": [\n      \"https://en.wiktionary.org/wiki/greet\"\n    ]\n  },\n  {\n    \"word\": \"greet\",\n    \"phonetic\": \"/ɡɹiːt/\",\n    \"phonetics\": [\n      {\n        \"text\": \"/ɡɹiːt/\",\n        \"audio\": \"https://api.dictionaryapi.dev/media/pronunciations/en/greet-us.mp3\",\n        \"sourceUrl\": \"https://commons.wikimedia.org/w/index.php?curid=2650995\",\n        \"license\": {\n          \"name\": \"BY-SA 3.0\",\n          \"url\": \"https://creativecommons.org/licenses/by-sa/3.0\"\n        }\n      }\n    ],\n    \"meanings\": [\n      {\n        \"partOfSpeech\": \"adjective\",\n        \"definitions\": [\n          {\n            \"definition\": \"(obsolete outside Scotland) Great.\",\n            \"synonyms\": [\n              \n            ],\n            \"antonyms\": [\n              \n            ]\n          }\n        ],\n        \"synonyms\": [\n          \n        ],\n        \"antonyms\": [\n          \n        ]\n      }\n    ],\n    \"license\": {\n      \"name\": \"CC BY-SA 3.0\",\n      \"url\": \"https://creativecommons.org/licenses/by-sa/3.0\"\n    },\n    \"sourceUrls\": [\n      \"https://en.wiktionary.org/wiki/greet\"\n    ]\n  },\n  {\n    \"word\": \"greet\",\n    \"phonetic\": \"/ɡɹiːt/\",\n    \"phonetics\": [\n      {\n        \"text\": \"/ɡɹiːt/\",\n        \"audio\": \"https://api.dictionaryapi.dev/media/pronunciations/en/greet-us.mp3\",\n        \"sourceUrl\": \"https://commons.wikimedia.org/w/index.php?curid=2650995\",\n        \"license\": {\n          \"name\": \"BY-SA 3.0\",\n          \"url\": \"https://creativecommons.org/licenses/by-sa/3.0\"\n        }\n      }\n    ],\n    \"meanings\": [\n      {\n        \"partOfSpeech\": \"noun\",\n        \"definitions\": [\n          {\n            \"definition\": \"Mourning, weeping, lamentation.\",\n            \"synonyms\": [\n              \n            ],\n            \"antonyms\": [\n              \n            ]\n          }\n        ],\n        \"synonyms\": [\n          \n        ],\n        \"antonyms\": [\n          \n        ]\n      },\n      {\n        \"partOfSpeech\": \"verb\",\n        \"definitions\": [\n          {\n            \"definition\": \"To weep; to cry.\",\n            \"synonyms\": [\n              \n            ],\n            \"antonyms\": [\n              \n            ]\n          }\n        ],\n        \"synonyms\": [\n          \n        ],\n        \"antonyms\": [\n          \n        ]\n      }\n    ],\n    \"license\": {\n      \"name\": \"CC BY-SA 3.0\",\n      \"url\": \"https://creativecommons.org/licenses/by-sa/3.0\"\n    },\n    \"sourceUrls\": [\n      \"https://en.wiktionary.org/wiki/greet\"\n    ]\n  }\n]\n```\n\n## Useful Resources\n\n- [Stack Blitz](https://stackblitz.com/edit/github-e6mv2z?file=src%2Fapp%2Fapp.component.ts) - Change font-family dynamically\n- [Stack Blitz](https://stackblitz.com/edit/angular-dark-mode-example?file=src%2Fapp%2Fdark-mode-toggle%2Fdark-mode-toggle.component.ts) - dark mode toggle component\n- [YouTube](https://www.youtube.com/watch?v=8PItOt2wiz0) - Template Driven Form in Angular | Angular Forms | Angular 13+\n- [Stack Overflow](https://stackoverflow.com/questions/35978450/angular-2-dropdown-options-default-value) - options default value\n- [Medium](https://blog.angulartraining.com/how-to-implement-a-dark-theme-with-css-and-angular-2cfd98b9455d) - dark theme angular\n- [Medium](https://medium.com/ngconf/how-to-inject-document-in-angular-7d17804430b6) - inject document\n- [Stack Overflow](https://stackoverflow.com/questions/15040297/clear-element-classlist) - clear element classlist\n- [Offering Solutions](https://offering.solutions/blog/articles/2023/02/11/migrating-to-angular-standalone-components/) - migrating to angular standalone components\n- [YouTube](https://www.youtube.com/watch?v=G381Q_nmnZM) - Search Forms with Angular and Spring Boot\n- [AngularJS Wiki](https://www.angularjswiki.com/angular/get-query-parameters-in-angular/) - get query parameters\n- [Stack Overflow](https://stackoverflow.com/questions/52317494/is-it-good-to-call-subscribe-inside-subscribe) - subscribe inside subscribe anti-pattern\n- [Medium](https://benlesh.medium.com/rxjs-observable-interop-with-promises-and-async-await-bebb05306875) - rxjs observable interop with promises and async await\n- [YouTube](https://www.youtube.com/watch?v=l5jARPyOlkM) - Angular Async Pipe - Learn the Main Advantages\n- [Stack Overflow](https://stackoverflow.com/questions/44226380/angular-2-get-value-from-url-with-promise-and-await) - get value from url with promise and await\n- [CodeBurst](https://codeburst.io/understanding-resolvers-in-angular-736e9db71267) - understanding resolvers\n- [Beyond Java](https://www.beyondjava.net/angular-async-await) - angular async await\n- [Stack Overflow](https://stackoverflow.com/questions/37771855/chaining-observables-in-rxjs) - chaining observables in rxjs\n- [Stack Overflow](https://stackoverflow.com/questions/73096964/how-to-refactor-nested-subscription-in-angular) - refactor nested subscription in angular\n- [Medium](https://blog.bitsrc.io/6-ways-to-unsubscribe-from-observables-in-angular-ab912819a78f) - unsubscribe from observables\n- [Stack Overflow](https://stackoverflow.com/questions/37818677/how-can-i-limit-ngfor-repeat-to-some-number-of-items-in-angular) - limit ngFor repeat\n- [Stack Overflow](https://stackoverflow.com/questions/50500706/how-to-display-certain-items-first-in-angular-ngfor) - display certain items first in angular ngFor\n- [Stack Overflow](https://stackoverflow.com/questions/66416945/how-to-get-1st-true-value-for-ngif-inside-ngfor) - first true value in ngFor\n- [Stack Overflow](https://stackoverflow.com/questions/38057537/how-to-check-the-length-of-an-observable-array) - check the length of observable array\n- [Stack Overflow](https://stackoverflow.com/questions/43712445/how-to-pass-object-as-component-input-in-ngfor) - pass object as component input\n- [Berlitz](https://www.berlitz.com/blog/longest-word-english#:~:text=Pneumonoultramicroscopicsilicovolcanoconiosis%20meaning\u0026text=Pneumonoultramicroscopicsilicovolcanoconiosis%20is%20a%20string%20of,term%20inhalation%20of%20silica%20dust.) - longest english words\n- [Github](https://github.com/mgechev/ngx-circular-player/blob/master/projects/ngx-circular-player/src/lib/ngx-circular-player.component.ts) - ngx circular player component\n- [Stack Overflow](https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass) - angular conditional class with ngclass\n- [Stack Overflow](https://stackoverflow.com/questions/37051496/combine-ngstyle-with-condition-if-else) - ngstyle with condition\n- [Elite Ionic](https://eliteionic.com/tutorials/handle-errors-reactively-when-using-async-pipe/) - handle errors reactively when using async pipe\n- [YouTube](https://www.youtube.com/watch?v=TF4rnbptfRo) - 12. Testing with jest and angular\n- [Blog](https://sebastian-holstein.de/post/2018-02-26-error-handling-angular/) - error handling angular\n- [Coding Latte](https://codinglatte.com/posts/angular/angular-async-pipe-handle-errors/) - async pipe handle errors\n- [Stack Overflow](https://stackoverflow.com/questions/33783967/rxjs-observable-doesnt-complete-when-an-error-occurs) - rxjs observable doesn't complete when an error occurs\n- [Stack Overflow](https://stackoverflow.com/questions/62567799/angular-9-rxjs-how-to-handle-an-error-thrown-inside-switchmap) - rxjs how to handle an error thrown inside switchMap\n- [Angular University](https://blog.angular-university.io/rxjs-error-handling/) - rxjs error handling\n- [Stack Overflow](https://stackoverflow.com/questions/12836227/change-select-box-option-background-color) - change select box option background color\n- [Cypress Docs](https://docs.cypress.io/guides/component-testing/angular/quickstart) - angular cypress quickstart\n- [Marmicode](https://marmicode.io/blog/testing-angular-components-using-cypress) - testing angular components using cypress\n- [Testing with Angular](https://testing-angular.com/end-to-end-testing/) - end to end testing\n- [Stack Overflow](https://stackoverflow.com/questions/66599428/audio-play-in-cypress) - audio play in cypress\n- [Stack Overflow](https://stackoverflow.com/questions/48077725/angular-4-failed-cant-resolve-all-parameters-for-activatedroute) - activatedRoute provide\n- [Stack Overflow](https://stackoverflow.com/questions/57103179/how-do-i-mock-or-stub-a-function-in-angular-when-using-cypress) - mock / stub a function in angular using cypress\n- [Stack Overflow](https://stackoverflow.com/questions/58250235/stubbing-out-angular-services-in-cypress) - stubbing out angular services in cypress\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fangular-dictionary-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdegand%2Fangular-dictionary-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fangular-dictionary-app/lists"}