├── .editorconfig ├── .github ├── CODEOWNERS └── workflows │ ├── ci.yml │ └── update-contributor-leaderboard.yml ├── .gitignore ├── .husky └── pre-commit ├── .node-version ├── .nvmrc ├── .postcssrc.json ├── .prettierignore ├── .prettierrc ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── angular.json ├── angular_logo.png ├── contribute.md ├── ng-delhi-logo.png ├── package-lock.json ├── package.json ├── public ├── cua.webp ├── data │ └── companies.json └── favicon.ico ├── src ├── app │ ├── app.component.ts │ ├── app.config.ts │ ├── app.constants.ts │ ├── app.routes.ts │ ├── core │ │ ├── components │ │ │ ├── company-card.ts │ │ │ ├── footer.ts │ │ │ ├── header.ts │ │ │ └── search-company.ts │ │ ├── services │ │ │ └── theme.ts │ │ └── types │ │ │ ├── company.ts │ │ │ └── techiconmapping.ts │ └── pages │ │ ├── about │ │ └── about.ts │ │ └── home │ │ └── home.ts ├── index.html ├── main.ts └── styles.css ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | ij_typescript_use_double_quotes = false 14 | 15 | [*.md] 16 | max_line_length = off 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # Default reviewer for everything 2 | * @rohtashsethi 3 | 4 | # Optional: Specific reviewers for files 5 | /companies.json @howdysuraj 6 | /README.md @howdysuraj -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | pull_request: 7 | branches: [main] 8 | 9 | jobs: 10 | ci: 11 | runs-on: ubuntu-latest 12 | 13 | steps: 14 | - name: Checkout code 15 | uses: actions/checkout@v4 16 | 17 | - name: Set up Node.js 18 | uses: actions/setup-node@v4 19 | with: 20 | node-version: '20' 21 | 22 | - name: Install dependencies 23 | run: npm ci 24 | 25 | - name: Check Formatting 26 | run: npm run check-format 27 | 28 | # Add back after implementing ES Lint 29 | # - name: Run Lint 30 | # run: npm run lint 31 | 32 | - name: Run Build 33 | run: npm run build 34 | -------------------------------------------------------------------------------- /.github/workflows/update-contributor-leaderboard.yml: -------------------------------------------------------------------------------- 1 | name: Update Contributor Leaderboard 2 | 3 | on: 4 | schedule: 5 | - cron: '0 0 * * *' # Update everyday at 00:00 UTC 6 | 7 | workflow_dispatch: # Manually trigger the update 8 | 9 | jobs: 10 | update-leaderboard: 11 | runs-on: ubuntu-latest 12 | 13 | permissions: 14 | contents: write 15 | pull-requests: write 16 | 17 | env: 18 | GH_TOKEN: ${{ github.token }} 19 | 20 | steps: 21 | - name: Update Leaderboard 22 | uses: kristof-low/github-contributor-leaderboard@v1 23 | with: 24 | commit-message: "docs(readme): update contributor leaderboard" 25 | use-pull-request: "true" 26 | 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /.node-version: -------------------------------------------------------------------------------- 1 | 20 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 20 2 | -------------------------------------------------------------------------------- /.postcssrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "@tailwindcss/postcss": {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "singleQuote": true, 4 | "printWidth": 100, 5 | "tabWidth": 2, 6 | "trailingComma": "all" 7 | } 8 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "conventionalCommits.scopes": ["ci"] 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Ng Delhi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🌐 We Use Angular 2 | 3 | ![Ng Delhi Logo](./ng-delhi-logo.png) 4 | 5 | A community-driven directory of companies that use **Angular** in their tech stack. 6 | 7 | ## 🚀 Why this project? 8 | 9 | - To help Angular developers discover companies actively using Angular. 10 | - To showcase real-world adoption of Angular in production. 11 | - To support the Angular ecosystem with open, transparent data. 12 | 13 | ## 📋 What does the directory include? 14 | 15 | Each entry includes: 16 | 17 | - ✅ Company Name 18 | - 🧱 Tech Stack (Frontend, Backend, DB, Hosting, etc.) 19 | - 🌍 Careers Site 20 | - 🌍 Work Mode (Remote/Hybrid/On Site) 21 | - 📦 Product / Domain (Optional) 22 | - 📍 Location (Optional) 23 | 24 | ## Companies Using Angular 25 | 26 | Check out at [We Use Angular](https://weuseangular.netlify.app/) 27 | 28 | ## ✨ How to contribute 29 | 30 | We’d love your input! You can contribute in two ways: 31 | 32 | ### 🚀 Method 1: GitHub PR — For the Devs Who Love a Good Commit 33 | 34 | Are you the kind of dev who speaks fluent git and lives for clean PRs? 😎 35 | Then this one’s for you! 36 | 37 | Here’s how to get your favorite Angular-using company on the list: 38 | 39 | - 🍴 Fork this repo and clone it locally 40 | 41 | - 🧩 Add your company to companies.json (don’t forget all the juicy details!) 42 | 43 | - 📝 Update the README.md with a new entry under the directory 44 | 45 | - 📚 Follow our [Contribution Guide](contribute.md) to keep things neat 46 | 47 | - ✅ Open a PR with a clear commit message like: 48 | add(company): added awesome corp to directory 49 | 50 | Once reviewed, your contribution will go live — and your GitHub handle will shine in the 🎉 Contributors Hall of Fame at the bottom of the README! 51 | 52 | Bonus points if your PR is pixel-perfect ✨ 53 | 54 | Bonus bonus if you ⭐ star the repo and share it with friends! 55 | 56 | ### 💬 Method 2: Community Submission 57 | 58 | Not comfortable with GitHub PRs? No worries — we’ve got you covered! 59 | You can contribute to this directory by any of the following ways: 60 | 61 | - 📥 Comment on our community discussion thread 62 | - 💬 Write a post tagging [NgDelhi](https://www.linkedin.com/company/ng-delhi/) on LinkedIn 63 | - 💬 Reply to our LinkedIn announcement posts 64 | - 🐛 Create a GitHub Issue with the company details — and our maintainers will add it for you! 65 | 66 | #### 📋 Please include: 67 | 68 | - ✅ Company Name 69 | - 🧱 Tech Stack (Frontend + Backend + DB + Hosting, etc.) 70 | - 🌐 Website (if any) 71 | - 🏢 Work Mode (On-Site / Remote / Hybrid) 72 | - 📦 Product (optional) 73 | - 📍 Location (optional) 74 | 75 | We’ll review and add it to the list — and you’ll be credited in the contributors section with your name or social handle! 76 | 77 | ### 🙌 Credits 78 | 79 | This project is made possible by YOU — the amazing Angular community. 80 | 81 | ### 💖 Contributors 82 | 83 | We proudly credit all community members who contribute entries, edits, or feedback. 84 | 85 | [](https://github.com/rohtashsethi/) 86 | [](https://github.com/howdysuraj/) 87 | [](https://github.com/HimanshuGoel/) 88 | [](https://github.com/yshashi/) 89 | [](https://github.com/ansafans/) 90 | [](https://github.com/vamshi-ui/) 91 | [](https://github.com/KingsleyAmankwah/) 92 | [](https://github.com/Muzummil/) 93 | [](https://github.com/AyushiRohela/) 94 | [](https://github.com/adi-ray/) 95 | [](https://github.com/ajitzero/) 96 | [](https://github.com/ArshdeepGrover/) 97 | [](https://github.com/sagar0437/) 98 | 99 | Want to see your name here? Start contributing! 100 | 101 | ### 🏆 Contributor Leaderboard 102 | 103 | 104 | 105 | | Rank | Contributor | Contributions | 106 | |:------:|:-------------:|:----------------:| 107 | | 🥇 | [rohtashsethi](https://github.com/rohtashsethi) | 17 | 108 | | 🥈 | [adi-ray](https://github.com/adi-ray) | 3 | 109 | | 🥉 | [kristof-low](https://github.com/kristof-low) | 3 | 110 | | 4 | [ajitzero](https://github.com/ajitzero) | 2 | 111 | | 5 | [yshashi](https://github.com/yshashi) | 2 | 112 | | 6 | [Saverio0134](https://github.com/Saverio0134) | 2 | 113 | | 7 | [3627pranav](https://github.com/3627pranav) | 1 | 114 | | 8 | [ArshdeepGrover](https://github.com/ArshdeepGrover) | 1 | 115 | | 9 | [AyushiRohela](https://github.com/AyushiRohela) | 1 | 116 | | 10 | [HimanshuGoel](https://github.com/HimanshuGoel) | 1 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "cua-ui": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "changeDetection": "OnPush", 11 | "style": "css", 12 | "skipTests": true, 13 | "inlineStyle": true, 14 | "inlineTemplate": true 15 | } 16 | }, 17 | "root": "", 18 | "sourceRoot": "src", 19 | "prefix": "app", 20 | "architect": { 21 | "build": { 22 | "builder": "@angular/build:application", 23 | "options": { 24 | "outputPath": "dist/cua-ui", 25 | "index": "src/index.html", 26 | "browser": "src/main.ts", 27 | "tsConfig": "tsconfig.app.json", 28 | "assets": [ 29 | { 30 | "glob": "**/*", 31 | "input": "public" 32 | } 33 | ], 34 | "styles": ["src/styles.css"], 35 | "scripts": [] 36 | }, 37 | "configurations": { 38 | "production": { 39 | "budgets": [ 40 | { 41 | "type": "initial", 42 | "maximumWarning": "500kB", 43 | "maximumError": "1MB" 44 | }, 45 | { 46 | "type": "anyComponentStyle", 47 | "maximumWarning": "4kB", 48 | "maximumError": "8kB" 49 | } 50 | ], 51 | "outputHashing": "all" 52 | }, 53 | "development": { 54 | "optimization": false, 55 | "extractLicenses": false, 56 | "sourceMap": true 57 | } 58 | }, 59 | "defaultConfiguration": "production" 60 | }, 61 | "serve": { 62 | "builder": "@angular/build:dev-server", 63 | "configurations": { 64 | "production": { 65 | "buildTarget": "cua-ui:build:production" 66 | }, 67 | "development": { 68 | "buildTarget": "cua-ui:build:development" 69 | } 70 | }, 71 | "defaultConfiguration": "development" 72 | }, 73 | "extract-i18n": { 74 | "builder": "@angular/build:extract-i18n" 75 | }, 76 | "test": { 77 | "builder": "@angular/build:karma", 78 | "options": { 79 | "tsConfig": "tsconfig.spec.json", 80 | "assets": [ 81 | { 82 | "glob": "**/*", 83 | "input": "public" 84 | } 85 | ], 86 | "styles": ["src/styles.css"], 87 | "scripts": [] 88 | } 89 | } 90 | } 91 | } 92 | }, 93 | "cli": { 94 | "analytics": false 95 | }, 96 | "schematics": { 97 | "@schematics/angular:component": { 98 | "type": "component" 99 | }, 100 | "@schematics/angular:directive": { 101 | "type": "directive" 102 | }, 103 | "@schematics/angular:service": { 104 | "type": "service" 105 | }, 106 | "@schematics/angular:guard": { 107 | "typeSeparator": "." 108 | }, 109 | "@schematics/angular:interceptor": { 110 | "typeSeparator": "." 111 | }, 112 | "@schematics/angular:module": { 113 | "typeSeparator": "." 114 | }, 115 | "@schematics/angular:pipe": { 116 | "typeSeparator": "." 117 | }, 118 | "@schematics/angular:resolver": { 119 | "typeSeparator": "." 120 | } 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /angular_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-delhi/we-use-angular/a960fc20f4b72c3f1a64d4c96c9a876a56c5b61c/angular_logo.png -------------------------------------------------------------------------------- /contribute.md: -------------------------------------------------------------------------------- 1 | # 📌 Contribution Guidelines 2 | 3 | Thank you for considering contributing to the Angular Companies Directory! 4 | 5 | ## ✨ What you can do 6 | 7 | - Add a new company entry 8 | - Fix data formatting or typos 9 | - Suggest improvements 10 | 11 | ## ✅ Guidelines 12 | 13 | - Ensure your entry is JSON-valid. 14 | - Follow the data structure used in `companies.json`. 15 | - Add only real, verifiable companies using Angular. 16 | - Avoid spam, test data, or self-promotion unless it's relevant. 17 | 18 | ## ✨ Steps 19 | 20 | - 🍴 Fork this repo and clone it locally 21 | 22 | - 🧩 Add your company to companies.json (don’t forget all the juicy details!) 23 | 24 | - 📝 Update the README.md with a new entry under the directory 25 | 26 | - 📚 Follow our [Contribution Guide](contribute.md) to keep things neat 27 | 28 | - ✅ Open a PR with a clear commit message like: 29 | add(company): added awesome corp to directory 30 | 31 | ## 📦 Directory Format 32 | 33 | ```json 34 | { 35 | "name": "Example Corp", 36 | "techStack": ["Angular 16", "Node.js", "PostgreSQL", "AWS"], 37 | "careerSite": "https://example.com", 38 | "workMode": "Remote", 39 | "product": "SaaS Platform for Analytics", 40 | "location": "San Francisco, CA" 41 | } 42 | ``` 43 | 44 | ## ✅ Standard Commit Message Format 45 | 46 | ``` 47 | (): 48 | │ │ │ 49 | │ │ └─⫸ Summary in present tense. Not capitalized. No period at the end. 50 | │ │ 51 | │ └─⫸ Commit Scope: company|readme|credits|guidelines 52 | │ 53 | └─⫸ Commit Type: add|update|fix|docs|chore 54 | ``` 55 | 56 | ### 🎯 Types: 57 | 58 | - **add**: Add new entries or content 59 | - **update**: Modify existing content 60 | - **fix**: Fix typos, broken links, or formatting issues 61 | - **docs**: Changes in documentation or README 62 | - **chore**: Non-functional updates like file structure or config 63 | 64 | ### 🔍 Scopes: 65 | 66 | - **company**: For changes in companies.json 67 | - **readme**: For changes in README.md 68 | - **credits**: For changes to contributors/maintainers 69 | - **guidelines**: For contributing rules or commit formats 70 | 71 | ### 💡 Examples: 72 | 73 | - add(company): added spotdraft to companies.json 74 | - update(company): updated work mode for nagarro 75 | - fix(company): fixed typo in backbase tech stack 76 | - docs(readme): added method 2 contribution flow 77 | - chore(credits): added new maintainers section 78 | -------------------------------------------------------------------------------- /ng-delhi-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-delhi/we-use-angular/a960fc20f4b72c3f1a64d4c96c9a876a56c5b61c/ng-delhi-logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cua-ui", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test", 10 | "format": "prettier --write \"./**/*.{ts,html,scss,json}\"", 11 | "check-format": "prettier --check \"./**/*.{ts,html,scss,json}\"" 12 | }, 13 | "lint-staged": { 14 | "*.{ts,html,scss,json}": "prettier --write" 15 | }, 16 | "private": true, 17 | "dependencies": { 18 | "@angular/common": "^20.0.0", 19 | "@angular/compiler": "^20.0.0", 20 | "@angular/core": "^20.0.0", 21 | "@angular/forms": "^20.0.0", 22 | "@angular/platform-browser": "^20.0.0", 23 | "@angular/platform-browser-dynamic": "^20.0.0", 24 | "@angular/router": "^20.0.0", 25 | "@tailwindcss/postcss": "^4.1.4", 26 | "postcss": "^8.5.3", 27 | "rxjs": "~7.8.0", 28 | "tailwindcss": "^4.1.4", 29 | "tslib": "^2.3.0" 30 | }, 31 | "devDependencies": { 32 | "@angular/build": "^20.0.0", 33 | "@angular/cli": "^20.0.0", 34 | "@angular/compiler-cli": "^20.0.0", 35 | "@types/jasmine": "~5.1.0", 36 | "husky": "^9.1.7", 37 | "jasmine-core": "~5.6.0", 38 | "karma": "~6.4.0", 39 | "karma-chrome-launcher": "~3.2.0", 40 | "karma-coverage": "~2.2.0", 41 | "karma-jasmine": "~5.1.0", 42 | "karma-jasmine-html-reporter": "~2.1.0", 43 | "lint-staged": "^15.5.1", 44 | "postcss": "^8.5.3", 45 | "prettier": "^3.5.3", 46 | "typescript": "~5.8.3" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /public/cua.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-delhi/we-use-angular/a960fc20f4b72c3f1a64d4c96c9a876a56c5b61c/public/cua.webp -------------------------------------------------------------------------------- /public/data/companies.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Minoan", 4 | "techStack": ["Angular", "TypeScript"], 5 | "careerSite": "https://minoan.com", 6 | "companySite": "https://minoan.com", 7 | "workMode": "OnSite" 8 | }, 9 | { 10 | "name": "Fyle", 11 | "techStack": ["Angular", "TypeScript", "AngularJS", "Nx"], 12 | "careerSite": "https://www.fylehq.com/company/team/join", 13 | "companySite": "https://www.fylehq.com", 14 | "workMode": "Remote" 15 | }, 16 | { 17 | "name": "Backbase", 18 | "techStack": ["Angular", "TypeScript", "Nx"], 19 | "careerSite": "https://www.backbase.com/careers/jobs", 20 | "companySite": "https://www.backbase.com", 21 | "workMode": "Hybrid" 22 | }, 23 | { 24 | "name": "Nagarro", 25 | "techStack": ["Angular", "TypeScript"], 26 | "careerSite": "https://www.nagarro.com/en/careers", 27 | "companySite": "https://www.nagarro.com", 28 | "workMode": "Hybrid / Remote" 29 | }, 30 | { 31 | "name": "NetCore", 32 | "techStack": ["Angular", "TypeScript", "PHP"], 33 | "careerSite": "https://netcorecloud.com/careers-list?job_category=engineering", 34 | "companySite": "https://netcorecloud.com", 35 | "workMode": "Hybrid / Remote" 36 | }, 37 | { 38 | "name": "ZoomInfo", 39 | "techStack": ["Angular", "TypeScript"], 40 | "careerSite": "https://www.zoominfo.com/careers#jobs", 41 | "companySite": "https://www.zoominfo.com", 42 | "workMode": "On-Site" 43 | }, 44 | { 45 | "name": "HashedIn By Deloitte", 46 | "techStack": ["Angular", "TypeScript"], 47 | "careerSite": "https://hashedin.com/careers/#explore-opportunities", 48 | "companySite": "https://hashedin.com", 49 | "workMode": "Hybrid" 50 | }, 51 | { 52 | "name": "Thomson Reuters", 53 | "techStack": ["Angular", "TypeScript"], 54 | "careerSite": "https://careers.thomsonreuters.com/us/en/search-results", 55 | "companySite": "https://careers.thomsonreuters.com", 56 | "workMode": "On-Site/Hybrid" 57 | }, 58 | { 59 | "name": "Roche", 60 | "techStack": ["Angular", "TypeScript"], 61 | "careerSite": "https://careers.roche.com/global/en/india-jobs", 62 | "companySite": "https://careers.roche.com", 63 | "workMode": "On-Site/Hybrid" 64 | }, 65 | { 66 | "name": "SpotDraft", 67 | "techStack": ["Angular", "TypeScript", "Nx"], 68 | "careerSite": "https://www.spotdraft.com/careers", 69 | "companySite": "https://www.spotdraft.com", 70 | "workMode": "On-Site" 71 | }, 72 | { 73 | "name": "Siemens", 74 | "techStack": ["Angular", "TypeScript"], 75 | "careerSite": "https://jobs.siemens.com/careers", 76 | "companySite": "https://jobs.siemens.com", 77 | "workMode": "On-Site" 78 | }, 79 | { 80 | "name": "Locobuzz", 81 | "techStack": ["Angular", "TypeScript", "Material", "NX"], 82 | "careerSite": "https://locobuzz.com/", 83 | "companySite": "https://locobuzz.com", 84 | "workMode": "On-Site" 85 | }, 86 | { 87 | "name": "Simcorp", 88 | "techStack": ["Angular", "TypeScript"], 89 | "careerSite": "https://www.simcorp.com/about-us/career", 90 | "companySite": "https://www.simcorp.com", 91 | "workMode": "Hybrid" 92 | }, 93 | { 94 | "name": "CareMonitor", 95 | "techStack": ["Angular", "TypeScript"], 96 | "careerSite": "https://caremonitor.com.au/", 97 | "companySite": "https://caremonitor.com.au/", 98 | "workMode": "Remote" 99 | }, 100 | { 101 | "name": "Synoptek", 102 | "techStack": ["Angular", "TypeScript"], 103 | "careerSite": "https://careers.synoptek.com/", 104 | "companySite": "https://careers.synoptek.com/", 105 | "workMode": "Remote" 106 | }, 107 | { 108 | "name": "Ascendion", 109 | "techStack": ["Angular", "TypeScript"], 110 | "careerSite": "https://ascendion.com/careers/india/", 111 | "companySite": "https://ascendion.com", 112 | "workMode": "Remote" 113 | }, 114 | { 115 | "name": "Tech Holding", 116 | "techStack": ["Angular", "TypeScript"], 117 | "careerSite": "https://techholding.co/careers", 118 | "companySite": "https://techholding.co", 119 | "workMode": "On-Site" 120 | }, 121 | { 122 | "name": "SBS", 123 | "techStack": ["Angular"], 124 | "careerSite": "https://sbs-software.com/join-us/", 125 | "companySite": "https://sbs-software.com", 126 | "workMode": "Hybrid" 127 | }, 128 | { 129 | "name": "Reliance Industries Ltd", 130 | "techStack": ["Angular", "Node.js", "Azure DevOps", "MySQL", "MongoDB", ".NET"], 131 | "careerSite": "https://www.ril.com/careers", 132 | "workMode": "Work From Office", 133 | "product": "Enterprise-level in-house products", 134 | "location": "Navi Mumbai" 135 | }, 136 | { 137 | "name": "Henkel", 138 | "techStack": ["Angular 19", "TypeScript", "Module Federation"], 139 | "careerSite": "https://www.henkel.com/careers", 140 | "workMode": "On-Site", 141 | "location": ["Germany", "India", "China"] 142 | }, 143 | { 144 | "name": "Unit4", 145 | "techStack": ["Angular", "Node.js", "TypeScript", "JavaScript", "RxJs"], 146 | "careerSite": "https://careers.unit4.com/jobs?name=&location_country=All&department_id=8086448", 147 | "workMode": "Remote", 148 | "product": "Enterprise resource planning (ERP) Solutions" 149 | }, 150 | { 151 | "name": "Cloud Solutions International", 152 | "techStack": ["Angular", "Java", "Postgres DB", "Oracle DB", "Mongo DB", "NX"], 153 | "careerSite": "https://cloudsolutions.lk/join-us/#we-are-hiring-section", 154 | "workMode": "Hybrid" 155 | }, 156 | { 157 | "name": "WatchGuard Technologies", 158 | "techStack": ["Angular", "Material", "Nx"], 159 | "careerSite": "https://www.watchguard.com/wgrd-careers", 160 | "companySite": "https://www.watchguard.com", 161 | "workMode": "On-Site" 162 | }, 163 | { 164 | "name": "Keka HR", 165 | "techStack": ["Angular", ".NET Core", "C#"], 166 | "careerSite": "https://www.keka.com/careers", 167 | "companySite": "https://www.keka.com/", 168 | "workMode": "On-Site" 169 | }, 170 | { 171 | "name": "Fortinet", 172 | "techStack": ["Angular", "Nx", "Python", "Django", "Java", "Golang"], 173 | "careerSite": "https://www.fortinet.com/corporate/careers", 174 | "companySite": "https://www.fortinet.com/", 175 | "workMode": "On-Site" 176 | }, 177 | { 178 | "name": "Commudle", 179 | "techStack": [ 180 | "Angular", 181 | "Ruby", 182 | "Rails", 183 | "GoLang", 184 | "Postgres", 185 | "Redis", 186 | "TypeScript", 187 | "Nx", 188 | "Docker" 189 | ], 190 | "careerSite": "https://www.commudle.com/", 191 | "companySite": "https://www.commudle.com/", 192 | "workMode": "Remote", 193 | "product": "All-in-one enterprise developer community platform to build and scale developer programs globally." 194 | }, 195 | { 196 | "name": "Epicor", 197 | "techStack": ["Angular 19", ".Net", "Java", "python"], 198 | "careerSite": "https://epicorsoftware.wd5.myworkdayjobs.com/epicorjobs", 199 | "companySite": "https://www.epicor.com/en/", 200 | "workMode": "On-Site", 201 | "location": ["India", "Mexico", "USA", "Canada"] 202 | }, 203 | { 204 | "name": "Taazaa inc", 205 | "techStack": ["Angular", "React", "Nx", "Storybooks", ".NET Core", "Postgres DB", "Java"], 206 | "careerSite": "https://taazaa.keka.com/careers/", 207 | "companySite": "https://www.taazaa.com/", 208 | "workMode": "Hybrid", 209 | "location": "Noida" 210 | }, 211 | { 212 | "name": "Secureworks (A Sophos Company)", 213 | "techStack": [ 214 | "Angular", 215 | "Nx", 216 | "Nrgx Signals Store", 217 | "Storybooks", 218 | "GoLang", 219 | "GraphQL", 220 | "Microfrontend" 221 | ], 222 | "careerSite": "https://www.sophos.com/en-us/careers", 223 | "companySite": "https://www.secureworks.com/", 224 | "workMode": "Remote" 225 | }, 226 | { 227 | "name": "Sophos", 228 | "techStack": ["Angular", "Nx", "React", "Java", "Microfrontend"], 229 | "careerSite": "https://www.sophos.com/en-us/careers", 230 | "companySite": "https://www.sophos.com/en-us", 231 | "workMode": "Remote" 232 | }, 233 | { 234 | "name": "Thales", 235 | "techStack": ["Angular", "Java", ".NET", "MySQL", "Postgres DB", "Mongo DB", "Azure"], 236 | "careerSite": "https://careers.thalesgroup.com/global/en", 237 | "companySite": "https://www.thalesgroup.com/en", 238 | "workMode": "Hybrid", 239 | "location": ["Noida", "Bangalore", "Hyderabad", "Gurgram"] 240 | }, 241 | { 242 | "name": "Deutsche Telekom Digital Labs", 243 | "techStack": ["Angular", "PWA", "Node.js", "Microservices", "TDD"], 244 | "careerSite": "https://dtdl.in/joinus", 245 | "companySite": "https://dtdl.in/home", 246 | "workMode": "Hybrid", 247 | "location": "Gurgram" 248 | }, 249 | { 250 | "name": "Coditas Solutions LLP", 251 | "techStack": ["Angular", "TypeScript", "NgRx", "Node.js"], 252 | "careerSite": "https://coditas.com/careers", 253 | "companySite": "https://coditas.com", 254 | "workMode": "Hybrid", 255 | "location": ["India,Pune"] 256 | } 257 | ] 258 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ng-delhi/we-use-angular/a960fc20f4b72c3f1a64d4c96c9a876a56c5b61c/public/favicon.ico -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { Header } from './core/components/header'; 3 | import { Footer } from './core/components/footer'; 4 | import { RouterOutlet } from '@angular/router'; 5 | 6 | @Component({ 7 | selector: 'app-root', 8 | imports: [RouterOutlet, Header, Footer], 9 | template: ` 10 | 11 |
12 | 13 |
14 | 15 | `, 16 | host: { 17 | class: 'cua-ui', 18 | }, 19 | changeDetection: ChangeDetectionStrategy.OnPush, 20 | }) 21 | export class AppComponent {} 22 | -------------------------------------------------------------------------------- /src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.routes'; 5 | 6 | export const appConfig: ApplicationConfig = { 7 | providers: [provideRouter(routes), provideZonelessChangeDetection()], 8 | }; 9 | -------------------------------------------------------------------------------- /src/app/app.constants.ts: -------------------------------------------------------------------------------- 1 | export const CUA_THEME_KEY = 'cua-theme'; 2 | -------------------------------------------------------------------------------- /src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = [ 4 | { 5 | path: '', 6 | loadComponent: () => import('./pages/home/home'), 7 | }, 8 | ]; 9 | -------------------------------------------------------------------------------- /src/app/core/components/company-card.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core'; 2 | import { Company } from '../types/company'; 3 | import { ThemeService } from '../services/theme'; 4 | import { TECH_ICON_CLASSES } from '../types/techiconmapping'; 5 | 6 | @Component({ 7 | selector: 'company-card', 8 | template: ` 9 |
12 |
13 |

{{ company().name }}

14 | 15 |
16 |

Tech Stack

17 |
18 | @for (tech of company().techStack; track tech) { 19 | 22 | 23 | {{ tech }} 24 | 25 | } 26 |
27 |
28 |
29 | 30 |
31 |
32 |

Work Mode

33 |

{{ company().workMode }}

34 |
35 | 36 |
37 | 43 | Careers 44 | 45 | 51 | Company Site 52 | 53 |
54 |
55 |
56 | `, 57 | changeDetection: ChangeDetectionStrategy.OnPush, 58 | }) 59 | export class CompanyCardComponent { 60 | company = input.required(); 61 | readonly themeService = inject(ThemeService); 62 | 63 | getIconsClass(tech: string): string { 64 | return TECH_ICON_CLASSES[tech.toLowerCase()] || ''; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/app/core/components/footer.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core'; 2 | import { ThemeService } from '../services/theme'; 3 | 4 | @Component({ 5 | selector: 'cua-footer', 6 | template: ` 7 |
8 |

9 | © {{ currentYear() }} Ng Delhi. All rights reserved. 10 |

11 |
12 | `, 13 | changeDetection: ChangeDetectionStrategy.OnPush, 14 | }) 15 | export class Footer { 16 | readonly currentYear = signal(new Date().getFullYear()); 17 | readonly themeService = inject(ThemeService); 18 | } 19 | -------------------------------------------------------------------------------- /src/app/core/components/header.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; 2 | import { ThemeService } from '../services/theme'; 3 | 4 | @Component({ 5 | selector: 'cua-header', 6 | template: ` 7 |
8 |
9 | Angular Logo 14 |

We Use Angular

15 |
16 | 17 | 20 |
21 | `, 22 | changeDetection: ChangeDetectionStrategy.OnPush, 23 | }) 24 | export class Header { 25 | readonly themeService = inject(ThemeService); 26 | } 27 | -------------------------------------------------------------------------------- /src/app/core/components/search-company.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, model } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'search-company', 5 | template: ` 6 |
7 |

8 | Discover Companies Using Angular 9 |

10 |

13 | A curated directory of companies leveraging Angular to build amazing products 14 |

15 | 22 |
23 | `, 24 | changeDetection: ChangeDetectionStrategy.OnPush, 25 | }) 26 | export class SearchCompany { 27 | searchQuery = model(''); 28 | 29 | onSearchInput(event: Event) { 30 | const target = event.target as HTMLInputElement; 31 | this.searchQuery.set(target.value); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/app/core/services/theme.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, computed, effect, inject, signal, DOCUMENT } from '@angular/core'; 2 | import { CUA_THEME_KEY } from '../../app.constants'; 3 | 4 | type Theme = 'light' | 'dark'; 5 | 6 | @Injectable({ 7 | providedIn: 'root', 8 | }) 9 | export class ThemeService { 10 | private document = inject(DOCUMENT); 11 | private darkMode = signal(this.initializeTheme()); 12 | readonly isDarkMode = computed(() => this.darkMode()); 13 | 14 | constructor() { 15 | effect(() => { 16 | this.setTheme(this.darkMode() ? 'dark' : 'light'); 17 | }); 18 | } 19 | 20 | private initializeTheme(): boolean { 21 | const savedTheme = localStorage.getItem(CUA_THEME_KEY); 22 | if (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches) { 23 | return true; 24 | } 25 | 26 | return savedTheme === 'dark'; 27 | } 28 | 29 | private setTheme(theme: Theme): void { 30 | const { classList } = this.document.documentElement; 31 | 32 | if (theme === 'dark') { 33 | classList.add('dark'); 34 | localStorage.setItem(CUA_THEME_KEY, 'dark'); 35 | } else { 36 | classList.remove('dark'); 37 | localStorage.setItem(CUA_THEME_KEY, 'light'); 38 | } 39 | } 40 | 41 | toggleTheme(): void { 42 | this.darkMode.update((current) => !current); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/app/core/types/company.ts: -------------------------------------------------------------------------------- 1 | export type Company = { 2 | name: string; 3 | techStack: string[]; 4 | careerSite: string; 5 | workMode: string; 6 | companySite: string; 7 | }; 8 | -------------------------------------------------------------------------------- /src/app/core/types/techiconmapping.ts: -------------------------------------------------------------------------------- 1 | export type TechstackIconClass = { 2 | [techName: string]: string; 3 | }; 4 | 5 | export const TECH_ICON_CLASSES: TechstackIconClass = { 6 | angular: 'ri-angularjs-line', 7 | angularjs: 'ri-angularjs-line', 8 | react: 'ri-reactjs-line', 9 | 'node.js': 'ri-nodejs-line', 10 | java: 'ri-java-line', 11 | javascript: 'ri-javascript-line', 12 | firebase: 'ri-firebase-line', 13 | }; 14 | -------------------------------------------------------------------------------- /src/app/pages/about/about.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'about', 5 | template: `

About

`, 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | }) 8 | export class About {} 9 | -------------------------------------------------------------------------------- /src/app/pages/home/home.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, computed, resource, signal } from '@angular/core'; 2 | import { CompanyCardComponent } from '../../core/components/company-card'; 3 | import { Company } from '../../core/types/company'; 4 | import { SearchCompany } from '../../core/components/search-company'; 5 | @Component({ 6 | selector: 'home', 7 | template: ` 8 | 9 |
12 | @for (company of filteredCompanies(); track company.name) { 13 | 14 | } 15 |
16 | `, 17 | imports: [CompanyCardComponent, SearchCompany], 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | }) 20 | export default class Home { 21 | companies = resource({ 22 | loader: async () => { 23 | const response = await fetch('/data/companies.json'); 24 | return response.json(); 25 | }, 26 | defaultValue: [], 27 | }); 28 | filteredCompanies = computed(() => { 29 | return this.companies.value().filter((company) => { 30 | return company.name.toLowerCase().includes(this.searchQuery().toLowerCase()); 31 | }); 32 | }); 33 | searchQuery = signal(''); 34 | 35 | onSearchQueryChange(searchQuery: string) { 36 | this.searchQuery.set(searchQuery); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | We Use Angular | Open directory of companies using Angular 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)); 6 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import 'tailwindcss'; 3 | @custom-variant dark (&:where(.dark, .dark *)); 4 | @layer utilities { 5 | .cua-ui { 6 | @apply w-full flex flex-col min-h-screen transition-colors duration-200 ease-in-out dark:bg-[#02040a] bg-white text-[#282828] dark:text-[#e1e1e1]; 7 | } 8 | 9 | .main { 10 | @apply px-8 pt-32 pb-8 sm:mx-auto my-0 max-w-[1200px] flex-1; 11 | } 12 | 13 | .header { 14 | @apply flex fixed inset-x-0 top-0 justify-between items-center px-6 py-2 border-b border-gray-200 dark:border-gray-700 shadow-sm backdrop-blur-[10px] z-[1030]; 15 | } 16 | 17 | .footer { 18 | @apply flex justify-center items-center px-6 py-4 border-t border-gray-200 dark:border-gray-700; 19 | } 20 | 21 | .theme-btn { 22 | @apply flex justify-center items-center p-2 bg-gray-100 rounded-full transition-colors duration-200 size-10 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/app", 7 | "types": [] 8 | }, 9 | "files": ["src/main.ts"], 10 | "include": ["src/**/*.d.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "compileOnSave": false, 5 | "compilerOptions": { 6 | "outDir": "./dist/out-tsc", 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "isolatedModules": true, 14 | "esModuleInterop": true, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "bundler", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022" 20 | }, 21 | "angularCompilerOptions": { 22 | "enableI18nLegacyMessageIdFormat": false, 23 | "strictInjectionParameters": true, 24 | "strictInputAccessModifiers": true, 25 | "strictTemplates": true 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/spec", 7 | "types": ["jasmine"] 8 | }, 9 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] 10 | } 11 | --------------------------------------------------------------------------------