Add a GIF picker to Angular

A standalone component with encapsulated styles, animated results and a typed selection event. No React dependency.

1. Install the package

npm install @rowix/gifsnap-angular

Install the Angular picker from npm. Its JavaScript client dependency is installed automatically.

Supports Angular 21.2.24+ and 22. You do not need a global stylesheet import. Use a Node.js version supported by your Angular release; these packages were tested with Node.js 24.

2. Import the component

Add GifSnapPicker to your component’s imports, then handle gifSelect.

import { Component } from '@angular/core';
import { GifSnapPicker } from '@rowix/gifsnap-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GifSnapPicker],
  template: '<gifsnap-picker (gifSelect)="select($event)" />',
})
export class App {
  select(gif: { url: string }) { console.log(gif.url); }
}

3. Keep a typed selection

import type { GifSnapGif } from "@rowix/gifsnap-angular";

// Inside your component class:
selected: GifSnapGif | null = null;

select(gif: GifSnapGif) {
  this.selected = gif;
}

Use selected.url for the full animated media and keep the title, dimensions and source metadata with it. Your application decides how to send or attach the selection.

Match your interface

<gifsnap-picker
  theme="system"
  mediaType="sticker"
  [pageSize]="12"
  initialQuery="celebrate"
  (gifSelect)="select($event)"
/>

Use light, dark or system appearance. Set mediaType to gif or sticker. An empty query browses trending results. The component handles loading, failed requests, empty results and pagination.

Build a custom interface

Use the standalone JavaScript client when you need your own search controls. You can also pass a configured client to the picker through its client input.

Full media URLs are used for animation. Previews can be still images; do not substitute them for the animation URL unless you intentionally want a thumbnail. Preserve complete URLs and query strings.

SDK source and package reference ↗ · REST endpoint reference