@peekjs/angular

Angular bindings for Peek — live link-hover previews. Requires Angular ≥ 17.

Install

npm install @peekjs/angular

Setup

Register Peek in app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { providePeek } from '@peekjs/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    providePeek({
      delay: 200,
      corsProxy: 'https://proxy.example.com/?url={{url}}',
    }),
  ],
};

Usage

Add the peek directive to any <a> element. Import PeekLinkDirective (and optionally PeekContentDirective) in your component.

import { PeekLinkDirective, PeekContentDirective } from '@peekjs/angular';

@Component({
  imports: [PeekLinkDirective, PeekContentDirective],
  template: `
    <!-- Standard renderer (iframe / card) -->
    <a href="https://example.com" peek>Visit site</a>

    <!-- Custom template card -->
    <a href="/user/1" peek [peekData]="user">
      Jane Doe
      <ng-template peekContent let-u>
        <app-user-card [user]="u" />
      </ng-template>
    </a>
  `,
})
export class MyComponent {
  user = { name: 'Jane', avatar: '/jane.jpg' };
}

Injecting the service

import { PeekService } from '@peekjs/angular';

@Component({ ... })
export class MyComponent {
  constructor(private peek: PeekService) {}

  pinPreview() { this.peek.instance?.pin(); }
}

Options

All @peekjs/core options are accepted by providePeek.

Links

• Full docs & demo
• GitHub