{"id":20186108,"url":"https://github.com/leolanese/angular-signal-playground","last_synced_at":"2026-04-29T00:04:47.077Z","repository":{"id":232413494,"uuid":"774399136","full_name":"leolanese/Angular-Signal-playground","owner":"leolanese","description":"Angular (17+), using Signals and stand-alone components","archived":false,"fork":false,"pushed_at":"2024-04-19T13:08:40.000Z","size":1382,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-24T12:11:33.797Z","etag":null,"topics":["angular","signal"],"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/leolanese.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}},"created_at":"2024-03-19T13:37:41.000Z","updated_at":"2024-04-16T13:32:45.000Z","dependencies_parsed_at":"2024-04-09T19:17:35.516Z","dependency_job_id":"eccfa176-4e7e-4dd8-8ef9-f47fdfc4187e","html_url":"https://github.com/leolanese/Angular-Signal-playground","commit_stats":null,"previous_names":["leolanese/angular-signal-tests","leolanese/angular-signal-playground"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Signal-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Signal-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Signal-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Signal-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leolanese","download_url":"https://codeload.github.com/leolanese/Angular-Signal-playground/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241622593,"owners_count":19992501,"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","signal"],"created_at":"2024-11-14T03:16:01.222Z","updated_at":"2026-04-29T00:04:47.048Z","avatar_url":"https://github.com/leolanese.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Signal Playground\n\n## Description\n\n\u003e Angular 17 App Playground tests. Using Signals and trending Angular techniques\n\n-----\n\n## Run App\n\n```js\n// npm run storybook\n// http://localhost:6006\nyarn storybook --debug-webpack\n\n// run Angular App\n// http://localhost:4200/\nng serve -o --poll=2000\n```\n\n## mock the API\n\n```js\n// To run some parsing test we need to mock the API\n// run mock API server using Mockoon (or similar) \n// use: `app/mocks/mockTranslations` with `test-ui` base url\nhttp://localhost:3000/test-ui\n```\n\n---\n\n## Essential Corporate colours pattern (global styles)\n\n```js\n// styles.scss\n.global_style {\n    vy_extra_dark_putple: #0c0128;\n    vy_dark_purple: #6c56f5;\n    vy_light_purple:  #6c56f9;\n    vy_light_red: #900573;\n    vy_dark_red: #850257;\n    vy_green: #606701;\n    vy_black: #000;\n}\n```\n\n---\n\n## Responsive Layout Consideration\n\n\u003e Created a `3x3 grid` with named areas for the: header, navigation, content, sidebar, and footer (grid-template-areas)\n\n\u003e Created responsive layout based on: `Small Screens` (Mobile) @media (max-width: 576px), `Medium Screens` (Tablets) @media (min-width: 577px) and (max-width: 1024px) and `Large Screens` (PCs) @media (min-width: 1025px) enforced with Responsive StoryBook addOns for easy visual testing\n\n\u003e Enforced responsiveness content: usign flexible `measure units intead px`, using font-type with modern `clamp()`, and (experimental) `aspect-ratio:` to setup preferred aspect ratio for the container wrapper box, which will be used in the calculation of auto sizes. \n\n\u003e `Inner table scrollable` horizontally, to improve UX on smaller screens\n\n\u003e Implemented `.browserslistrc` to ensure that your `CSS code is compatible with the browsers that you want to support`. This is a great way to ensure that you don't have to worry about browser compatibility issues. The list can be improved for this project but I wanted to start with a simple setup based on the Global Stats StatCounter (`https://gs.statcounter.com/`)\n\n\u003e Service and injector best practice:\nI'm keeping the component clean and dependency injection free. I'm using closure to be able to store the injected HttpClient and ActivatedRoute inside the closure scope and still use values in the returned function. Leveraging the inject() function outside the constructor phase. \n\n\n\u003e The `TransactionContainer` incorporates the `PaginationComponent` and binds its currentPage signal to the page model of the `PaginationComponent` using the banana-in-a-box syntax ([(page)]=\"currentPage\") = bidirectional synchronization between the PaginationComponent’s page signal and the TransactionContainer's currentPage signal\n\n---\n\n## Design View / Diferent viewport\n\n```html\n// Small Screens (Mobile)\n+-----------+\n|  header   |\n+-----------+\n|   nav     |\n+-----------+\n|  CONTENT  |\n+-----------+\n|   side    |\n+-----------+\n|  footer   |\n+-----------+\n```\n\n```html\n// Medium Screens (Tablets)\n+-----------+-----------+\n|  header   |  header   |\n+-----------+-----------+\n|   nav     |  CONTENT  |\n+-----------+-----------+\n|   side    |  footer   |\n+-----------+-----------+\n```\n\n\n```html\n// Large Screens (PCs)\n+-----------+-----------+-----------+\n|  header   |  header   |  header   |\n+-----------+-----------+-----------+\n|   nav     |  CONTENT  |   side    |\n+-----------+-----------+-----------+\n|  footer   |  footer   |  footer   |\n+-----------+-----------+-----------+\n```\n\n---\n\n### Architecture considerations\n\n\u003e Follow layered achitecture, `Smart Component and Presentational Component` are separated. Data Access is separated from the UI and Shared reusable parts will be shared across multiple parts of the application. This architecture enforced `Separation of Concerns`, `Dependency Injection`, `Single Responsibility Principle` and `Modularisation`. I made an small concession to use a modern `Signal` as a reactive construct to avoid the need of a `Subject` to communicate between the components.\n\n\u003e `ChangeDetection strategy` is set OnPush. Component are detach from the detection cycle. This is a great way to improve performance and reduce the amount of work that Angular has to do. An step forward, could be `zoneless` rendering. Specially, using Signal could make a perfomance impact as the application could become more smart and granullar. This strategy will encorage pure functional components that will lead to a more performant and predictable application. (TODO: implement `zoneless` rendering for a fully detached)\n\n\u003e `Lazy Loading` is used to load the modules only when they are needed. This is a great way to improve performance and reduce the amount of work\n\n---\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/).\n\n## Further help\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\n---\n\n### :100: \u003ci\u003eThanks!\u003c/i\u003e\n#### Now, don't be an stranger. Let's stay in touch!\n\n\u003ca href=\"https://github.com/leolanese\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n  \u003cimg src=\"https://scastiel.dev/api/image/leolanese?dark\u0026removeLink\" alt=\"leolanese’s GitHub image\" width=\"600\" height=\"314\" /\u003e\n\u003c/a\u003e\n\n##### :radio_button: Linkedin: \u003ca href=\"https://www.linkedin.com/in/leolanese/\" target=\"_blank\"\u003eLeoLanese\u003c/a\u003e\n##### :radio_button: Twitter: \u003ca href=\"https://twitter.com/LeoLanese\" target=\"_blank\"\u003e@LeoLanese\u003c/a\u003e\n##### :radio_button: Portfolio: \u003ca href=\"https://www.leolanese.com\" target=\"_blank\"\u003ewww.leolanese.com\u003c/a\u003e\n##### :radio_button: DEV.to: \u003ca href=\"https://www.dev.to/leolanese\" target=\"_blank\"\u003edev.to/leolanese\u003c/a\u003e\n##### :radio_button: Blog: \u003ca href=\"https://www.leolanese.com/blog\" target=\"_blank\"\u003eleolanese.com/blog\u003c/a\u003e\n##### :radio_button: Questions / Suggestion / Recommendation: developer@leolanese.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleolanese%2Fangular-signal-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleolanese%2Fangular-signal-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleolanese%2Fangular-signal-playground/lists"}