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