ng-hyped-link

An Angular library that creates a bootstrap inspired popup card when hovering over a link based on the metadata retrieved from the URL.

Usage no npm install needed!

<script type="module">
  import ngHypedLink from 'https://cdn.skypack.dev/ng-hyped-link';
</script>

README

ng-hyped-link

An Angular library that creates a bootstrap inspired popup card when hovering over a link based on the metadata retrieved from the URL.

The popup information is generated using the Open Graph protocol properties from <meta> tags. OG properties used:

  • og:site_name
  • og:title
  • og:image
  • og:description

The tags are retrieved using jQuery which is a required dependency.

Example

Please visit Github for an example.

Installation

Using npm:

npm install ng-hyped-link

Import the module in your app.module.ts file:

import { NgHypedLinkModule } from 'ng-hyped-link';

@NgModule({
  imports: [
    NgHypedLinkModule
  ],
})

Use the component in the template file:

Click <ng-hyped-link targetUrl="https://github.com/deandum" target="_blank">here</ng-hyped-link> to see my cool link.

Component inputs:

  • targetUrl: the URL to redirect to when clicked
  • target: the equivalent of a target attribute when using the <a> tag

License

MIT © Dean Dumitru