{"id":16660888,"url":"https://github.com/rbalet/ngx-href","last_synced_at":"2025-10-28T21:06:49.832Z","repository":{"id":199687617,"uuid":"703526320","full_name":"rbalet/ngx-href","owner":"rbalet","description":"A directive that allows href to understand Angular's router while retaining its default functionality.","archived":false,"fork":false,"pushed_at":"2024-04-24T13:50:22.000Z","size":397,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-24T16:53:25.363Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/rbalet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"rbalet","custom":"https://www.buymeacoffee.com/widness"}},"created_at":"2023-10-11T12:08:24.000Z","updated_at":"2024-06-17T13:05:13.894Z","dependencies_parsed_at":"2023-10-11T17:04:41.539Z","dependency_job_id":"dce3b20c-9c08-4368-9c84-901a272bca09","html_url":"https://github.com/rbalet/ngx-href","commit_stats":null,"previous_names":["rbalet/ngx-href"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbalet%2Fngx-href","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbalet%2Fngx-href/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbalet%2Fngx-href/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbalet%2Fngx-href/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rbalet","download_url":"https://codeload.github.com/rbalet/ngx-href/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247276188,"owners_count":20912288,"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":[],"created_at":"2024-10-12T10:32:07.060Z","updated_at":"2025-10-28T21:06:49.827Z","avatar_url":"https://github.com/rbalet.png","language":"TypeScript","funding_links":["https://github.com/sponsors/rbalet","https://www.buymeacoffee.com/widness"],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Nov 16, 2024](/content/2024/11/16/README.md)","Router"],"readme":"# ngx-href\nA library that allows href to understand Angular's router while retaining its default functionality.\n\n![NPM](https://img.shields.io/npm/l/ngx-href)\n[![npm version](https://img.shields.io/npm/v/ngx-href.svg)](https://www.npmjs.com/package/ngx-href)\n![npm bundle size](https://img.shields.io/bundlephobia/min/ngx-href)\n![npm](https://img.shields.io/npm/dm/ngx-href)\n[![codecov](https://codecov.io/gh/rbalet/ngx-href/graph/badge.svg?token=1Z1BJUFQD2)](https://codecov.io/gh/rbalet/ngx-href)\n\n1. Use `router.navigate()` for [internal link](#angular-routing)\n2. Support scroll with the `#` attributes and let you configure the [scrolling logic](#scroll-logic)\n3. Automatically append `rel=\"nooepener\"` \u0026 `target=\"_blank\"` to external link [if wished so](#installation)\n4. Support using `href` with the html `button` [attribute](#directive)\n5. Enable easy `Scroll when ready` mechanism which works with `SSR`\n6. Let you transform text to well formatted `anchor`\n\n## Demo\n- https://stackblitz.com/~/github.com/rbalet/ngx-href\n  \n## 19.2.0 Breaking change\n* Use of standalone\n* Configuration is now optional\n\n## 19.0.0 Breaking change\n* **Now use `scrollIntoView` which render the `Offset` useless.**  \n* Please use [scroll-margin-top](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top) instead.\n* Nows also work on SSR\n\n## Installation\n\n```sh\nnpm install ngx-href\n```\n\n### Optional configuration\n\nInside your `app.module.ts` file.\n```typescript\nimport { NgxHrefServiceProvider } from 'ngx-href'\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    {\n      provide: NgxHrefServiceProvider,\n      useValue: {\n      /** Default\n       * avoidSpam=\"false\"\n       * behavior=\"auto\"\n       * block=\"start\"\n       * inline=\"nearest\"\n       * rel=undefined\n       * retryTimeout=undefined\n       * target=\"_self\"\n       **/ \n        avoidSpam: true,\n        defaultRelAttr: '',\n        defaultTargetAttr: '_blank',\n        retryTimeout: 300,\n      },\n    },\n  ],\n}).catch((err) =\u003e console.error(err));\n```\n\n## Angular routing\nNothing to do it should work out of the box\n\n## Avoid Spam\n1. Change the `href` from the DOM from `example@outlook.com` into `example(at)outlook.com` \n2. Let js handle the click event.   \n\n## Scroll logic\n### Behavior\n**Default:** `\"auto\"`  \n**Accepted value:** `ScrollBehavior`  // (\"auto\" | \"instant\" | \"smooth\")  \n\nCan also be passed individually directly through html\n```html\n\u003ca href=\"https://my-external-url.com\" behavior=\"instant\"\u003e\n```\n\n### Offset\nIf you wish to add offset, add `scroll-margin-top: $offset` to your targeted component -\u003e [read more](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top)\n\n### retryTimeout\n**Default:** `undefined`\n**Accepted value:** `number`\n\nTrigger a second `scrollTo` event after `retryTimeout` milliseconds.  \n\n**Note:** This should be avoided, prefer playing with skeleton and fixed height\n\n\n## External link\n### Rel attribute \n**Default:** `undefined`  \n**Accepted value:** [string](https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel)\n\nCan also be passed individually directly through html\n```html\n\u003ca href=\"https://my-external-url.com\" rel=\"noopener nofollow\"\u003e\n```\n\n### Target attribute \n**Default:** `\"_self\"`  \n**Accepted value:** [string](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)\n\nCan also be passed individually directly through html\n```html\n\u003ca href=\"https://my-external-url.com\" target=\"_blank\"\u003e\n```\n\n## Usage\nWherever you plan to use the href directive or pipe\n\n```typescript\nimport { NgxHrefDirective, ToAnchorPipe } from 'ngx-href'\n\nimports: [\n  NgxHrefDirective,\n  ToAnchorPipe,\n]\n```\n\nThen you can use it as you would normally use an `a` element \n\n### Directive\nNormal use\n```html\n\u003c!-- Angular router --\u003e\n\u003ca href=\"/angular/router/link\"\u003e\n  My internal link\n\u003c/a\u003e\n\n\u003c!-- Or with a button --\u003e\n\u003cbutton href=\"/angular/router/link\"\u003e\n  My internal link\n\u003c/button\u003e\n\n\n\u003c!-- External link --\u003e\n\u003ca href=\"https://external-url.com\"\u003e\n  An external link\n\u003c/a\u003e\n\n\u003c!-- Tel --\u003e\n\u003ca href=\"tel:+41791112233\"\u003e\n  +41791112233\n\u003c/a\u003e\n\n\u003c!-- Email --\u003e\n\u003ca href=\"mailto:foobar@outlook.com\"\u003e\n  foobar\u0026#64;outlook.com\n\u003c/a\u003e\n\n\u003c!-- Scroll --\u003e\n\u003ca href=\"#myAnchor\"\u003e\n  My scroll to anchor\n\u003c/a\u003e\n\n\u003c!-- Scroll in different page --\u003e\n\u003ca href=\"/angular/router#link\"\u003e\n  My internal link with anchor\n\u003c/a\u003e\n```\n\n### Pipe: _ToAnchorPipe_\nThe `toAnchor` pipe let you \n1. transform an element ot a correct anchor\nexample: `my Title $%` will be transform to `my-title`\n\n2. Emit that this anchor have been created, so that we can scroll to that element\n\n```html\n  \u003c!-- Just transform the title to anchor like string--\u003e\n  \u003cdiv [id]=\"my Title $%\"| toAnchor : false\"\u003e \u003c/div\u003e\n\n  \u003c!-- If an href has been previously triggered, scroll to this element --\u003e\n  \u003cdiv [id]=\"my Title $%\"| toAnchor\"\u003e \u003c/div\u003e\n```\n\n### Service\n```typescript\n// foo.component.ts\nimport { NgxHrefService } from 'ngx-href'\n\n// ...\n constructor(public ngxHrefService: NgxHrefService) {}\n```\n\nNormal use\n```html\n\u003cbutton (click)=\"ngxHrefService.scrollTo(#myAnchor)\"\u003e\n  Scroll to #myAnchor\n\u003c/button\u003e\n\n\u003c!-- some html --\u003e\n\n\u003ch2 id=\"myAnchor\"\u003eA title\u003c/h2\u003e\n```\n\n\n## Authors and acknowledgment\n* maintainer [Raphaël Balet](https://github.com/rbalet)\n\n[![BuyMeACoffee](https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png)](https://www.buymeacoffee.com/widness)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbalet%2Fngx-href","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frbalet%2Fngx-href","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbalet%2Fngx-href/lists"}