{"id":27935825,"url":"https://github.com/malekdammak/curved-line-arrow-angular","last_synced_at":"2026-05-05T21:32:00.052Z","repository":{"id":38524870,"uuid":"261529845","full_name":"MalekDammak/curved-line-arrow-angular","owner":"MalekDammak","description":"I put at your disposal npm package which assures Fancy curved arrows for your Angular project! Great for tutorials and product tours! I'm waiting for your feedback or your contribution","archived":false,"fork":false,"pushed_at":"2023-01-07T17:51:52.000Z","size":1915,"stargazers_count":0,"open_issues_count":23,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-21T08:46:05.796Z","etag":null,"topics":["angular","angularanimation","angulardrawline","arrow","cool","design","leader-line-angular"],"latest_commit_sha":null,"homepage":"","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/MalekDammak.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":"2020-05-05T16:46:38.000Z","updated_at":"2021-05-09T21:15:19.000Z","dependencies_parsed_at":"2023-02-07T19:16:07.641Z","dependency_job_id":null,"html_url":"https://github.com/MalekDammak/curved-line-arrow-angular","commit_stats":null,"previous_names":["melekdamak/curved-line-arrow-angular"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MalekDammak%2Fcurved-line-arrow-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MalekDammak%2Fcurved-line-arrow-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MalekDammak%2Fcurved-line-arrow-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MalekDammak%2Fcurved-line-arrow-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MalekDammak","download_url":"https://codeload.github.com/MalekDammak/curved-line-arrow-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252831181,"owners_count":21810780,"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","angularanimation","angulardrawline","arrow","cool","design","leader-line-angular"],"created_at":"2025-05-07T06:50:49.278Z","updated_at":"2026-05-05T21:32:00.025Z","avatar_url":"https://github.com/MalekDammak.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![enter image description here](https://i.ibb.co/jWk55xg/example.png)\nFancy curved arrows for your Angular project! Great for tutorials and product tours!\n\nDemo : https://vc6p1.csb.app/ \n\u003cbr /\u003e\nSandbox : https://codesandbox.io/s/vc6p1\n\n## Installation\n\n`npm i cool-line-arrow`\n\n## Usage\n\n```jsx\nimport {CurvedLineArrowModule} from 'cool-line-arrow';\n\n// Selector \n\n\u003ctn-curved-line-arrow\u003e \u003c/tn-curved-line-arrow\u003e\n\n```\n## Example\n```jsx \n  \u003ctn-curved-line-arrow\n    [fromSelector]=\"'.A'\"\n    [toSelector]=\"'.B'\"\n    [fromOffsetY]=\"-55\"\n    [toOffsetY]=\"-45\"\n    [middleY]=\"-15\"\n    [middleX]=\"0\"\n    [width]=\"6\"\n    [color]=\"'gray'\"\u003e\n  \u003c/tn-curved-line-arrow\u003e\n  \n```\n## Inputs\n|Name|Type|Description|Default|\n|--- |--- |--- |--- |\n|fromSelector|DOM selector|DOM element from which your arrow will start.|body|\n|fromOffsetX|number|Amount of pixels to offset the arrow from the DOM element on the X axis.|0|\n|fromOffsetY|number|Amount of pixels to offset the arrow from the DOM element on the Y axis.|0|\n|toSelector|DOM selector|DOM element to which your arrow will go to.|(same as fromSelector)|\n|toOffsetX|number|Amount of pixels to offset the arrow from the DOM element on the X axis.|0|\n|toOffsetY|number|Amount of pixels to offset the arrow from the DOM element on the Y axis.|0|\n|middleX|number|Middle point X position.|0|\n|middleY|number|Middle point Y position.|40|\n|width|number|Width of the arrow and arrowhead.|8|\n|color|color|Color of the arrow and arrowhead.|\"black\"|\n|hideIfFoundSelector|DOM selector|Optional. if the arrow can find this selector, it will hide itself. Useful for product tours when you only want to show an arrow whenever a user hasn't performed an action yet such as opening a menu.||\n|debugLine|boolean|Show debug dots and lines for fromOffset, toOffset and middle vectors.|false|\n|dynamicUpdate|boolean|Automatically adjust the arrow whenever the from/to DOM elements update. Useful for dynamic content such as sliding menus or content that is within a scrolling container.|false|\n|zIndex|number|Adjust the z-index for this arrow.|0|\n\n## Copyright\n\n\n\nMade with ❤️ by [Melek Damak](https://www.linkedin.com/in/damak-melek-2a9819147/)\n\n \u003cbr /\u003e\nMail : melekdamak@gmail.com\n\n## Inspired from\n\n [Styled Page](https://react-curved-arrow.nickjanssen.com), a tool that lets you visually build React apps \u0026 components!\n\n# License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalekdammak%2Fcurved-line-arrow-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmalekdammak%2Fcurved-line-arrow-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalekdammak%2Fcurved-line-arrow-angular/lists"}