{"id":21961884,"url":"https://github.com/lucasnbsb/angularpatterns","last_synced_at":"2026-04-12T00:32:26.049Z","repository":{"id":236813307,"uuid":"793200623","full_name":"lucasnbsb/AngularPatterns","owner":"lucasnbsb","description":"This is my personal patterns stash, stuff I use regularly and don't want to forget","archived":false,"fork":false,"pushed_at":"2025-07-24T01:56:19.000Z","size":3244,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-02T13:39:59.376Z","etag":null,"topics":["angular","angular-patterns"],"latest_commit_sha":null,"homepage":"https://lucasnbsb.github.io/AngularPatterns/","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/lucasnbsb.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":"2024-04-28T17:54:08.000Z","updated_at":"2025-07-24T14:37:30.000Z","dependencies_parsed_at":"2024-09-12T12:16:43.176Z","dependency_job_id":"b06d1a11-f853-4957-8643-ae9ca90cf9e5","html_url":"https://github.com/lucasnbsb/AngularPatterns","commit_stats":null,"previous_names":["lucasnbsb/angularpatterns"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lucasnbsb/AngularPatterns","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasnbsb%2FAngularPatterns","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasnbsb%2FAngularPatterns/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasnbsb%2FAngularPatterns/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasnbsb%2FAngularPatterns/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lucasnbsb","download_url":"https://codeload.github.com/lucasnbsb/AngularPatterns/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasnbsb%2FAngularPatterns/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31700250,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T21:17:31.016Z","status":"ssl_error","status_checked_at":"2026-04-11T21:17:24.556Z","response_time":54,"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","angular-patterns"],"created_at":"2024-11-29T10:19:34.847Z","updated_at":"2026-04-12T00:32:26.027Z","avatar_url":"https://github.com/lucasnbsb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular patterns.\n\nThis is meant to be a knowlege base for the patterns that keep popping up in Angular projects.\n\n## How to use this repo:\n\nRunning the project with `npm run start` will show a menu with the implemented examples for the patterns. Each pattern has the it's own folder in the app directive\n\n## New Angular project configuration:\n\n### Angular CLI:\n\nSet your default flags for the CLI early, this will save you a lot of time.\n\n```json\n  \"@schematics/angular:component\": {\n    \"inlineTemplate\": false,\n    \"changeDetection\": \"OnPush\",\n    \"style\": \"none\",\n    \"skipTests\": true // don't skip tests.\n  }\n  // if you use a shared module, set it's path\n  \"@schematics/angular:service\": {\n    \"path\": \"shared/services\"\n  },\n  \"@schematics/angular:pipe\": {\n    \"path\": \"shared/pipes\",\n    \"module\": \"pipes\",\n    \"export\": true\n  }\n```\n\n### ESLint:\n\n```\nng add @angular-eslint/schematics\n```\n\nin the `settings.json` file:\n\n```json\n  \"eslint.options\": {\n    \"extensions\": [\".ts\", \".html\"]\n  },\n\n  \"eslint.validate\": [\"javascript\", \"javascriptreact\", \"typescript\", \"typescriptreact\", \"html\"]\n```\n\n### Prettier:\n\nFormat on save pretty much does not work on html unless you do a full file formatting on save. which is a git nightmare.\n\n**Setup**:\n\n```\nnpm install -D prettier prettier-plugin-tailwindcss\n```\n\nBasic config:\nin .vscode/settings.json\n\n```json\n{\n  \"[html]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n    \"editor.formatOnSaveMode\": \"file\"\n  }\n}\n```\n\nin .prettierrc.json, pretty much default settings with the pluggin and a larger print width., bracketSameLine false is better for vim users.\n\n```json\n{\n  \"plugins\": [\"prettier-plugin-tailwindcss\"],\n  \"arrowParens\": \"always\",\n  \"bracketSameLine\": false,\n  \"bracketSpacing\": true,\n  \"semi\": true,\n  \"experimentalTernaries\": false,\n  \"singleQuote\": true,\n  \"jsxSingleQuote\": false,\n  \"quoteProps\": \"as-needed\",\n  \"trailingComma\": \"all\",\n  \"singleAttributePerLine\": false,\n  \"htmlWhitespaceSensitivity\": \"css\",\n  \"vueIndentScriptAndStyle\": false,\n  \"proseWrap\": \"preserve\",\n  \"insertPragma\": false,\n  \"printWidth\": 120,\n  \"requirePragma\": false,\n  \"tabWidth\": 2,\n  \"useTabs\": false,\n  \"embeddedLanguageFormatting\": \"auto\"\n}\n```\n\nin tailwind.config.js\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: ['./src/**/*.{html,ts}'],\n  theme: {\n    extend: {},\n  },\n  plugins: ['prettier-plugin-tailwindcss'],\n};\n```\n\n## Tailwind:\n\nJust turn on prettier and typography, should be enough.\n\n## UI libraries:\n\n- Angular Material: `ng add @angular/material`\n- Daisy UI `npm i -D daisyui@latest`\n\nin tailwind.config.js\n\n```json\n  plugins: [\n    require('daisyui'),\n  ]\n```\n\nThe material CDK is very powerful and enriches Daisy Ui with a lot of functionality if you need it\nyou don't need anything else for most projects.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucasnbsb%2Fangularpatterns","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucasnbsb%2Fangularpatterns","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucasnbsb%2Fangularpatterns/lists"}