{"id":22962161,"url":"https://github.com/actionanand/angular-pass-data","last_synced_at":"2025-10-28T06:34:17.897Z","repository":{"id":174773528,"uuid":"651513964","full_name":"actionanand/angular-pass-data","owner":"actionanand","description":"Project is about @Input and @Output","archived":false,"fork":false,"pushed_at":"2023-06-12T19:58:30.000Z","size":339,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T03:28:41.437Z","etag":null,"topics":["angular","angular16","node-engine-mentioned"],"latest_commit_sha":null,"homepage":"https://actionanand.github.io/angular-pass-data/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/actionanand.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2023-06-09T12:05:27.000Z","updated_at":"2023-06-12T19:32:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"a48bfec3-d2da-46dc-bde7-7ce608bc5452","html_url":"https://github.com/actionanand/angular-pass-data","commit_stats":null,"previous_names":["actionanand/angular-pass-data"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/actionanand/angular-pass-data","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fangular-pass-data","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fangular-pass-data/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fangular-pass-data/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fangular-pass-data/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/actionanand","download_url":"https://codeload.github.com/actionanand/angular-pass-data/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fangular-pass-data/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281397336,"owners_count":26493908,"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","status":"online","status_checked_at":"2025-10-28T02:00:06.022Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","node-engine-mentioned"],"created_at":"2024-12-14T19:15:32.936Z","updated_at":"2025-10-28T06:34:17.892Z","avatar_url":"https://github.com/actionanand.png","language":"TypeScript","readme":"# Project is about @input and @output\n\n\u003c!-- prettier-ignore --\u003e\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.0.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application 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.\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 a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.\n\n## Cloning Guide\n\n1.  Clone only the remote primary HEAD (default: origin/master)\n\n```bash\ngit clone \u003curl\u003e --single-branch\n```\n\n2. Only specific branch\n\n```bash\ngit clone \u003curl\u003e --branch \u003cbranch\u003e --single-branch [\u003cfolder\u003e]\n```\n\n```bash\ngit clone \u003curl\u003e --branch \u003cbranch\u003e\n```\n\n3. Cloning repositories using degit\n\n   - master branch is default.\n\n```bash\nnpx degit github:user/repo#branch-name \u003cfolder-name\u003e\n```\n\n4. Cloning this project with skeleton\n\n```bash\ngit clone https://github.com/actionanand/angular-pass-data.git --branch 1-skeleton-ngv16 angular-proj-name\n```\n\n```bash\nnpx degit github:actionanand/angular-pass-data#1-skeleton-ngv16 angular-proj-name\n```\n\n## Automate using `Prettier`, `Es Lint` and `Husky`\n\n1. Install the compatible node version\n\n```bash\n  nvm install v16.20.0\n```\n\n2. Install and Configure Prettier\n\n   - Install prettier as below:\n\n   ```bash\n     yarn add prettier -D\n   ```\n\n   - Create a `.prettierrc` file and write down the format as below: - [online ref](https://prettier.io/docs/en/options.html)\n\n   ```yml\n   trailingComma: 'all'\n   tabWidth: 2\n   useTabs: false\n   semi: true\n   singleQuote: true\n   bracketSpacing: true\n   bracketSameLine: true\n   arrowParens: 'avoid'\n   printWidth: 120\n   overrides:\n     - files:\n         - '*.js'\n         - '*.jsx'\n       options:\n         bracketSpacing: true\n         jsxSingleQuote: true\n         semi: true\n         singleQuote: true\n         tabWidth: 2\n         useTabs: false\n     - files:\n         - '*.ts'\n       options:\n         tabWidth: 2\n   ```\n\n   - Create a `.prettierignore` file and write as below(sample)\n\n   ```gitignore\n   # Ignore artifacts:\n   build\n   coverage\n   e2e\n   node_modules\n   dist\n   dest\n   reports\n\n   # Ignore files\n   *.lock\n   package-lock.json\n   yarn.lock\n   ```\n\n3. Install `Es Lint`, if not installed\n\n```bash\nng add @angular-eslint/schematics\n```\n\n4. Configure pre-commit hooks\n\nPre-commit hooks are a nice way to run certain checks to ensure clean code. This can be used to format staged files if for some reason they weren’t automatically formatted during editing. [husky](https://github.com/typicode/husky) can be used to easily configure git hooks to prevent bad commits. We will use this along with [pretty-quick](https://github.com/azz/pretty-quick) to run Prettier on our changed files. Install these packages, along with [npm-run-all](https://github.com/mysticatea/npm-run-all), which will make it easier for us to run npm scripts:\n\n```bash\nyarn add husky pretty-quick npm-run-all -D\n```\n\nTo configure the pre-commit hook, simply add a `precommit` npm script. We want to first run Prettier, then run TSLint on the formatted files. To make our scripts cleaner, I am using the npm-run-all package, which gives you two commands, `run-s` to run scripts in sequence, and `run-p` to run scripts in parallel:\n\n```json\n  \"precommit\": \"run-s format:fix lint\",\n  \"format:fix\": \"pretty-quick --staged\",\n  \"format:check\": \"prettier --config ./.prettierrc --list-different \\\"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\\\"\",\n  \"format:all\": \"prettier --config ./.prettierrc --write \\\"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\\\"\",\n  \"lint\": \"ng lint\",\n```\n\n5. Initialize husky\n\n   - Run it once\n\n   ```bash\n     npm pkg set scripts.prepare=\"husky install\"\n     npm run prepare\n   ```\n\n   - Add a hook\n\n   ```bash\n     npx husky add .husky/pre-commit \"yarn run precommit\"\n     npx husky add .husky/pre-commit \"yarn test\"\n     git add .husky/pre-commit\n   ```\n\n   - Make a commit\n\n   ```bash\n     git commit -m \"Keep calm and commit\"\n     # `yarn run precommit and yarn test` will run every time you commit\n   ```\n\n6. How to skip prettier format only in particular file\n\n   1. JS\n\n   ```js\n   matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);\n\n   // prettier-ignore\n   matrix(\n       1, 0, 0,\n       0, 1, 0,\n       0, 0, 1\n     )\n   ```\n\n   2. JSX\n\n   ```jsx\n   \u003cdiv\u003e\n     {/* prettier-ignore */}\n     \u003cspan     ugly  format=''   /\u003e\n   \u003c/div\u003e\n   ```\n\n   3. HTML\n\n   ```html\n   \u003c!-- prettier-ignore --\u003e\n   \u003cdiv         class=\"x\"       \u003ehello world\u003c/div            \u003e\n\n   \u003c!-- prettier-ignore-attribute --\u003e\n   \u003cdiv (mousedown)=\"       onStart    (    )         \" (mouseup)=\"         onEnd      (    )         \"\u003e\u003c/div\u003e\n\n   \u003c!-- prettier-ignore-attribute (mouseup) --\u003e\n   \u003cdiv (mousedown)=\"onStart()\" (mouseup)=\"         onEnd      (    )         \"\u003e\u003c/div\u003e\n   ```\n\n   4. CSS\n\n   ```css\n   /* prettier-ignore */\n   .my    ugly rule\n     {\n   \n     }\n   ```\n\n   5. Markdown\n\n   ```markdown\n     \u003c!-- prettier-ignore --\u003e\n\n   Do not format this\n   ```\n\n   6. YAML\n\n   ```yml\n   # prettier-ignore\n   key  : value\n     hello: world\n   ```\n\n   7. For more, please [check](https://prettier.io/docs/en/ignore.html)\n\n7. Husky Non-executable error in cloned repo\n\n   ```shell\n   hint: The '.husky/pre-commit' hook was ignored because it's not set as executable.\n   hint: You can disable this warning with `git config advice.ignoredHook false`.\n   ```\n\n   ![image](https://github.com/actionanand/angular-pass-data/assets/46064269/7b35bc09-03e9-437c-bdbd-e82b46fed06c)\n\n   To fix this, execute the below command\n\n   ```shell\n     chmod ug+x .husky/*\n   ```\n\n## Resources\n\n1. [Angular v16 is here! - Official](https://blog.angular.io/angular-v16-is-here-4d7a28ec680d)\n2. [What's new in Angular 16](https://dev.to/this-is-angular/whats-new-in-angular-16-375b)\n3. [Angular 16 previews new reactivity model](https://www.infoworld.com/article/3695589/angular-16-previews-new-reactivity-model.html)\n4. [🅰️ New Angular 16 is Going Big in 2023: Everything You Need to Know](https://easy-web.medium.com/new-angular-16-is-going-big-in-2023-everything-you-need-to-know-3fc62b227aab)\n5. [Lazy loading services in Angular. What?! Yes, we can.](https://itnext.io/lazy-loading-services-in-angular-what-yes-we-can-cfbaf586d54e)\n6. [Angular 🚦 Signals 📡 (The future of Angular)](https://itnext.io/angular-signals-the-future-of-angular-395a69e60062)\n7. [Signals in Angular – How to Write More Reactive Code](https://www.freecodecamp.org/news/angular-signals/)\n8. [Upgrading an enterprise app to Angular 16](https://itnext.io/upgrading-an-enterprise-app-to-angular-16-4a92b1b29906)\n\n![image](https://user-images.githubusercontent.com/46064269/236193114-2aeda878-f4d1-43ba-aeb2-4aaf7b3c7495.png)\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n\n## Angular compatibility list\n\n```bash\n  npx ngvm compat\n```\n\n1. [Is there a compatibility list for Angular / Angular-CLI and Node.js? - stackoverflow](https://stackoverflow.com/questions/60248452/is-there-a-compatibility-list-for-angular-angular-cli-and-node-js)\n2. [Version compatibility - Angular official](https://angular.io/guide/versions)\n3. [Angular version node compatibility - gist](https://gist.github.com/LayZeeDK/c822cc812f75bb07b7c55d07ba2719b3)\n\n- [StackBlitz for angular property binding](https://stackblitz.com/edit/angular-ivy-ucidce)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factionanand%2Fangular-pass-data","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Factionanand%2Fangular-pass-data","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factionanand%2Fangular-pass-data/lists"}