{"id":28754466,"url":"https://github.com/ppaternostro/angular-example","last_synced_at":"2026-05-04T10:34:28.587Z","repository":{"id":297047686,"uuid":"995460981","full_name":"ppaternostro/angular-example","owner":"ppaternostro","description":"An Angular UI (User Interface) CRUD (Create, Read, Update, Delete) web application.","archived":false,"fork":false,"pushed_at":"2025-06-21T19:13:37.000Z","size":170,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-21T20:24:14.130Z","etag":null,"topics":["angular","javascript","material-ui","tailwind-css","typescript"],"latest_commit_sha":null,"homepage":"","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/ppaternostro.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}},"created_at":"2025-06-03T14:11:46.000Z","updated_at":"2025-06-21T19:13:39.000Z","dependencies_parsed_at":"2025-06-04T01:14:22.319Z","dependency_job_id":"8a7a0b4d-b442-43ee-b9e0-6f2ad8a8a6ac","html_url":"https://github.com/ppaternostro/angular-example","commit_stats":null,"previous_names":["ppaternostro/angular-example"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ppaternostro/angular-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppaternostro%2Fangular-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppaternostro%2Fangular-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppaternostro%2Fangular-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppaternostro%2Fangular-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ppaternostro","download_url":"https://codeload.github.com/ppaternostro/angular-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppaternostro%2Fangular-example/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262044434,"owners_count":23249748,"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":["angular","javascript","material-ui","tailwind-css","typescript"],"created_at":"2025-06-17T01:09:30.749Z","updated_at":"2026-05-04T10:34:28.580Z","avatar_url":"https://github.com/ppaternostro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-example\n\nAn Angular UI (User Interface) CRUD (Create, Read, Update, Delete) web application.\n\nThis application provides CRUD capability utilizing the public [JSON Placeholder](https://jsonplaceholder.typicode.com/) API and displays the results in an Angular UI web application. The JSON Placeholder **post** resource is used to invoke the APIs via Angular's [HttpClient](https://angular.dev/guide/http).\n\nThis project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.11.\n\n## Background\n\nThis web application is a variation of my [javafx-example](https://github.com/ppaternostro/javafx-example) application and was created with [Angular Material](https://material.angular.dev/) components and uses the [Tailwind CSS](https://tailwindcss.com/) library for application layout and CSS styling. After cloning the project, ensure both [Node.js\u0026reg; and NPM](https://nodejs.org/en/download) are installed. To pull in the project's dependencies, from a terminal window in the project's root folder, run\n\n```bash\nnpm install\n```\n\n## Running the application\n\nTo start a local development server, from a terminal window in the project's root folder, run:\n\n```bash\nng serve\n```\n\nor\n\n```bash\nnpm start\n```\n\nOnce the server is running, open your browser and navigate to `http://localhost:4200/`.\n\n\u003cimg width=\"1366\" height=\"670\" alt=\"Main Screen\" src=\"https://github.com/user-attachments/assets/408a042a-4774-493c-8b31-ce404d5af6e4\" /\u003e\n\nSearches are performed by numeric id or by the default which will retrieve all post objects when clicking on the **Search** button when **All** is selected from the **Search By** drop down list.\n\n\u003cimg width=\"1366\" height=\"670\" alt=\"Search By All\" src=\"https://github.com/user-attachments/assets/4440865d-5499-42a8-b14d-714d3bf663c4\" /\u003e\n\nAll the table columns are sortable by clicking their respective column headers. Continuously clicking the column header cycles the sort direction. Note the down arrow icon in the **Id** column below.\n\n\u003cimg width=\"1366\" height=\"670\" alt=\"Id Column Sort\" src=\"https://github.com/user-attachments/assets/8136f334-0ed0-4586-b4ab-0dcb7ef32135\" /\u003e\n\nThe **Create** button is only enabled if a table row is selected.\n\n\u003cimg width=\"1366\" height=\"670\" alt=\"Row Selected\" src=\"https://github.com/user-attachments/assets/82f8114f-5b9a-4b61-a4af-f8a2d01cd319\" /\u003e\n\nThe JSON Placeholder API's **create** (POST), **update** (PUT) and **delete** (DELETE) operations are faked and will not persist changes on the server side. The returned responses will reflect results as if the operations were actually persisted server side.\n\nThe only editable columns in the result table are the **Title** and **Body** columns. To initiate an edit, click on the **Action** column's **edit** icon of the desired row. Clicking the **edit** icon will change the **Title** and **Body** columns into editable text fields. Make any desired changes and click on the **Action** column's **save** icon to execute the PUT API and persist the change in the table's columns. To abort changes while in edit mode, click on the **Action** column's **cancel** icon.\n\nClicking on the **Action** column's **delete** icon removes a row from the table only after succesfully calling the HTTP\nDELETE operation on the **post** resource.\n\n\u003cimg width=\"1366\" height=\"670\" alt=\"Edit Columns\" src=\"https://github.com/user-attachments/assets/7eb31501-25f1-4f31-b2e2-3c4bdffcfc9c\" /\u003e\n\nClicking on the **Create** button will display a data entry dialog box for creating a new post. The created post will be associated with the user id value of the currently selected row. The dialog's **User Id** text field will be pre-filled and disabled.\n\n\u003cimg width=\"1366\" height=\"670\" alt=\"Create Post Dialog\" src=\"https://github.com/user-attachments/assets/28f210b0-01d5-492b-911e-ec11e7bf6148\" /\u003e\n\nSince creating a new post is faked by the JSON Placeholder API, creating multiple posts produces the same post id for each newly created post. This isn't representative of an actual API call.\n\nAnother issue uncovered with the newly created posts occurs when editing the editable column (**Title** and **Body**) values. Editing those column values produces a _500 Internal Server Error_ response code when calling the PUT API. This issue is listed in the JSON Placeholder API's [known issues](https://github.com/typicode/jsonplaceholder/issues) and I was also able to reproduce the error when using [Postman](https://www.postman.com/) to execute the PUT API with a post id value of _101_ or greater. The below stack trace is produced in the Postman console window which is the same error reported in [known issue 98](https://github.com/typicode/jsonplaceholder/issues/98).\n\n\u003e TypeError: Cannot read properties of undefined (reading 'id')\n\u003e at update (/app/node_modules/json-server/lib/server/router/plural.js:262:24)\n\u003e at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)\n\u003e at next (/app/node_modules/express/lib/router/route.js:137:13)\n\u003e at next (/app/node_modules/express/lib/router/route.js:131:14)\n\u003e at Route.dispatch (/app/node_modules/express/lib/router/route.js:112:3)\n\u003e at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)\n\u003e at /app/node_modules/express/lib/router/index.js:281:22\n\u003e at param (/app/node_modules/express/lib/router/index.js:354:14)\n\u003e at param (/app/node_modules/express/lib/router/index.js:365:14)\n\u003e at Function.process_params (/app/node_modules/express/lib/router/index.js:410:3)\n\nDespite the issues stemming from using the free, fake JSON Placeholder API, this application is illustrative of using Angular as your web UI.\n\n## Building\n\nTo build the project run:\n\n```bash\nng build\n```\n\nThis will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.\n\n## Running unit tests\n\nTo execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:\n\n```bash\nng test\n```\n\n## Running end-to-end tests\n\nFor end-to-end (e2e) testing, run:\n\n```bash\nng e2e\n```\n\nAngular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.\n\n## Additional Resources\n\n- [Install Tailwind CSS with Angular](https://tailwindcss.com/docs/installation/framework-guides/angular)\n- [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli)\n- [Angular Signals: Complete Guide](https://blog.angular-university.io/angular-signals/)\n- [Angular @if: Complete Guide](https://blog.angular-university.io/angular-if/)\n- [Angular Standalone Components: Complete Guide](https://blog.angular-university.io/angular-standalone-components/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fppaternostro%2Fangular-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fppaternostro%2Fangular-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fppaternostro%2Fangular-example/lists"}