{"id":17005030,"url":"https://github.com/adisreyaj/angular-directives-showcase","last_synced_at":"2025-07-12T15:38:35.641Z","repository":{"id":48622113,"uuid":"376888402","full_name":"adisreyaj/angular-directives-showcase","owner":"adisreyaj","description":"An example repo to showcase some use cases for directives in Angular","archived":false,"fork":false,"pushed_at":"2021-07-17T10:17:18.000Z","size":1671,"stargazers_count":19,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-26T02:03:42.672Z","etag":null,"topics":["angular","directives","examples"],"latest_commit_sha":null,"homepage":"https://ng-directives.vercel.app","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/adisreyaj.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}},"created_at":"2021-06-14T16:28:49.000Z","updated_at":"2024-01-29T02:31:05.000Z","dependencies_parsed_at":"2022-09-15T20:50:18.651Z","dependency_job_id":null,"html_url":"https://github.com/adisreyaj/angular-directives-showcase","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adisreyaj%2Fangular-directives-showcase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adisreyaj%2Fangular-directives-showcase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adisreyaj%2Fangular-directives-showcase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adisreyaj%2Fangular-directives-showcase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adisreyaj","download_url":"https://codeload.github.com/adisreyaj/angular-directives-showcase/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248529830,"owners_count":21119580,"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","directives","examples"],"created_at":"2024-10-14T04:45:03.585Z","updated_at":"2025-04-12T06:32:16.926Z","avatar_url":"https://github.com/adisreyaj.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/adisreyaj"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eAngular Directive Showcase\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Angular-v12-red?style=for-the-badge\u0026logo=angular\" alt=\"angular\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Conventional Commits-friendly-brightgreen.svg?style=for-the-badge\u0026logo=git\" alt=\"Commitizen\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Styled_with-Prettier-ff69b4.svg?style=for-the-badge\u0026logo=prettier\" alt=\"Prettier\"\u003e\n\u003c/p\u003e\n\nA collection of directives that can be used in different scenarios. See how to extract\naway the extra logics from components to have a more maintainable and reusable code.\n\n![Angular Directives Showcase](./docs/assets/feature-image.jpg)\n\n## Examples Showcased\n\n1. Delta Value Arrow\n1. Full-screen Toggle\n1. Permission\n1. Highlight Text\n1. Long Press Directive\n1. Badge Directive\n1. Table Sort Directive\n\nEach directive has a dedicated page where the code is also displayed.\n\n![Angular Directives Detail](./docs/assets/detail-page.jpg)\n\n---\n\n## Run Locally\n\n#### 1. Download or Clone the repository\n\n```sh\ngit clone https://github.com/adisreyaj/angular-directives-showcase.git\n```\n\n#### 2. Install dependencies\n\n```sh\nnpm install\n```\n\n#### 3. Run application\n\n```sh\nnpm start\n```\n\n#### 4. Open the URL in browser\n\n```\nhttp://localhost:4200\n```\n\n---\n\n## Support\n\nDon't forget to ⭐ the repository if you like it.\n\n \u003ca href=\"https://twitter.com/AdiSreyaj\"\u003e\n \u003cimg alt=\"Twitter\" src=\"https://img.shields.io/badge/@Adisreyaj-%231DA1F2.svg?style=for-the-badge\u0026logo=Twitter\u0026logoColor=white\"/\u003e\n \u003c/a\u003e\n \u003cbr/\u003e\n \u003ca href=\"https://github.com/adisreyaj\"\u003e\n\u003cimg alt=\"GitHub\" src=\"https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge\u0026logo=github\u0026logoColor=white\"/\u003e\n\u003c/a\u003e\n \u003cbr/\u003e\n \u003ca href=\"https://www.linkedin.com/in/adithyasreyaj/\"\u003e\n \u003cimg alt=\"LinkedIn\" src=\"https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\"/\u003e\n\u003c/a\u003e\n \u003cbr/\u003e\n \u003ca href=\"https://www.buymeacoffee.com/adisreyaj\"\u003e\n \u003cimg alt=\"BuyMeACoffee\" src=\"https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge\u0026logo=buy-me-a-coffee\u0026logoColor=black\" /\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadisreyaj%2Fangular-directives-showcase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadisreyaj%2Fangular-directives-showcase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadisreyaj%2Fangular-directives-showcase/lists"}